코드/Html & CSS 48

QuickLinks

상단메뉴 바로가기본문내용 바로 가기 실제 브라우저에서 볼때야 상단메뉴(gnb) 가 바로 보이지만마크업상에서보면 첫번째 라인에서 gnb의 메뉴 하나하나를 보기까지는 상당히 먼 거리 일수가 있다.그래서 상단메뉴 바로가기 라는것도 넣어준다.엄연히 접근성을 위함이라지만, 가끔은 왠 지랄인가..라는 생각이..근데 저거 ie7에서는 또 탭키로 안먹는다 ㅎㅎul 아니라 div 로 해주면 먹는구려.. 본문내용 바로가기도 마찬가지 이럴 경우 css 는width: 0;height: 0;line-height: 0;over-flow: hidden;visibility: hiddenfont-size: 0;border: 0 none; 가로세로 넓이 죽이고 over-flow hidden 만 줘도 안보이지만 이거저거 같이 엮어서( 가..

코드/Html & CSS 2013.03.19

display:none 스크린 리더 음성 출력문제

과 스크린 리더 음성 출력문제얼마 전 display:none 이라고 설정한 내용을 스크린 리더가 읽어 주어서 고민이었다라는 글이 올라온 적이 있어습니다. 어제 국내 스크린 리더중 하나인 센스 리더가 업그레이드 하면서 이 문제를 해결하였습니다. 즉 display:none 으로 설정하면 해당 내용은 음성 출력을 하지 않습니다. 물론 센스 리더 가상 커서 옵션 상에서는 읽을 수 있는 옵션도 마련하였습니다.정찬명님께서 보내 주신 display 관련 부분을 센스리더와 드림보이스가 각각 어떻게 음성 출력하는지 비교해 보았습니다. 정찬명님에게 감사 드리며 웹 표준에 조금이나마 도움이 되시기를 바랍니다. 백남중 ....... 이 문장은 display:block 된 문장입니다. 이 문장은 display:none 된 문장..

코드/Html & CSS 2013.03.06

height 100% 높이 잡기

사전 조건DOCTYPE을 사용 할 것IE, Firefox, Opera, Safari 등 모든 브라우저에서 Standard Mode 혹은 Almost Standard Mode가 되는 조건은 아래 와 같다. 위와 같이 HTML Page에 첫번째로 선언하면 기본적인 BoxModel Problem을 해결 할수 있다.다른 Doctype도 많지만 가장 무난히 호환성을 유지해 나가면서 표준을 지키고 여러 브라우저에서 동일하게 표현 하기에 제일 좋은 Doctype이라 생각이 든다. 첫 번째 조건높이가 100%인 div 영역height: 100%;보통 div element에 위와 속성을 주면 안된다 ㅡㅡㅋ원인을 찾아 보니깐 저 조건이 되기위해서는 parent element의 height의 영향을 받기 때문이다.그래서 해..

코드/Html & CSS 2013.02.27

float 된 요소의 중앙 정렬

펑펑 떠버리면 좌우로 들러붙어 버리니 중앙정렬 어렵다.좌우 float 으로 띄운 div 객체를 중앙 정렬할 경우고정 넓이를 잡아주면 쉽게 부모 div 에서 text-align: center; 주면 끝이지만.고정 넓이를 쓰지 않는 경우 좀 귀찮아진다.찾다보니 이런게 나오네. position 특성을 이용한 방법같은데.. ul { float: right; left: -50%; position: relative; } li { float: left; left: 50%; position: relative; } 쓸만은 하다. 배경이 있거나 li 에 가로 100% 배경을 깔아 쓰기엔 무리가 있다. 박스모델을 만들기 위해 overflow : hidden 을 주는 경우 짤려 버리짐. 모든곳에 통할 건아니니 적당히 알아서 ..

코드/Html & CSS 2012.10.30

div 세로 정렬

div 의 세로 정렬은 이렇게도 할수있다. #parent_div{display: table;}#child_div{display: table-cell;vertical-align: middle;} ie7이하는 안 먹는다... 아 귀찮어.. 그럼 ie 무시.몰라 ie..때되면 ie 가 따라오겠지.어차피 모바일에서 ie 7쓸일은 없다. 단점은 부모 div 의 넓이는 자식 div 넓이의 총합 이상 잡히지 않는다. 예를 들어 #root_div{width: 480px;} #parent_div{display: table;background: 100%;}#child_div{display: table-cell;vertical-align: middle;width:200px;} 요런식일때 부모 div 는 꼭 200px 만 잡..

코드/Html & CSS 2012.10.30