css 박스모델의 인라인박스와 블록박스 그리고 웹접근성
- 박스모델의 이해
- 박스모델
출처 : http://www.w3.org/TR/CSS21/box.html
박스모델에 대한 자세한 내용은 위 출처 url에서 참조하면된다. 박스모델에 대해 간단히 정리하자면,
contents : 내용이 표시되는 영역
padding : 내부여백
border : 테두리
margin : 외부여백
위 속성을 css 에서 사용하려면 border-top-color 등과 같이 개별적인 속성을 이용할 수도 있지만 아래와 같이 한번에 표현할 수도 있다.
border : 1px solid red;
박스모델에 대한 css 속성들은 http://www.w3schools.com/cssref/default.asp 에서 padding, margin, border 항목을 참조하면 된다. box 항목은 overflow에 대한 부분이므로 크게 신경안써도 된다. - 두 엘리먼트간 margin의 충돌
두 개의 div가 위 아래로 위치하고 있다고하자. 위에 위치한 div의 margin-bottom은 10px이고 아래에 위치한 div의 margin-top은 20px일 경우 실제 브라우저에서 보이는 두 div간의 간격은 30px이 아니다. 두 (바깥)여백 중 큰 값만 남고 작은값은 무시된다. - 인라인박스와 블록박스
<span>, <a>,<img> 태그 등을 나란히 붙여쓰면 브라우저에서 줄이 바뀌어 나타나지 않는다. <div>, <p>, <h1>등의 태그들을 사용하면 다음에 정의한 태그들은 무조건 줄이 바뀌어 나타난다. 전자의 경우는 인라인 성질을 가진 것이고 후자의 경우는 블록 성질을 가지고 있는 것이다. 두 성질의 박스는 margin 과 padding을 적용하는데 영향을 준다. 인라인 박스의 경우 margin이나 padding 을 사용해서 좌우 공간을 변경할 수 있지만 높이를 늘릴 수 없다.
예를 들어, <a> 태그에 margin : 10px 10px; 로 지정하면 좌우 10px여백, 상하 10px여백을 주겠다는 의미이다. 이 경우 a 태그는 인라인 성질을 가지고 있으므로 상하 10px의 여백은 무시된다. - display와 float
(display, float 에 position, box, clear, direction 까지를 더하면 visual formatting model 이라고 한다. http://www.w3.org/TR/CSS21/visuren.html )
ul, li 태그로 메뉴를 구성하거나, div 태그로 레이아웃을 구성하다 보면 인라인 성질을 블록 성질로 변환해야 한다. 또한 블록 성질을 유지하면서 인라인 처럼 보이게 하고 싶은 경우도 있다. 이러한 경우에 사용하는 css 프로퍼티가 display와 float 이다. 이 두 프로퍼티는 반드시 스스로 실습을 해보길 권한다. - display
display : inline ; <== 인라인 성질로 바꿔준다.
display : block ; <== 블록 성질로 바꿔준다.
<span> 와 <div>는 영역을 구분시키는 태그들이다. 두 태그의 차이점은 줄바꿈이 되는지 여부에 있다. <span> 태그를 줄바꿈이 되도록 하려면 <span style="display:block;"> 와 같이 해주면 된다. div는 display:inline 을 사용하면 줄바꿈이 되지 않는다. - float
박스모델 안의 내용을 가리지 않게 두 엘리먼트를 위치시키려면 float 프로퍼티를 사용하면 된다. (아래 그림 참조)
위 그림에서의 div 순서는 파란색 <div> , 빨간색 <div> 순이다. 이렇게 div를 작성한 후 빨간색 <div> 에 float:right; 를 지정해주면 위 그림과 같이 나타낼 수 있다. 위 상황은 블록 박스인 경우인데 <span>, <a> 태그와 같이 인라인 박스인 경우에도 테스트를 해보길 바란다.float : left;float : right;float : both;float : none;여기서 주의해야 할 것은 float : none; 은 float된 엘리먼트들을 해제한다는 의미가 아니다. 특정 엘리먼트에서 float된 엘리먼트가 적용되지 않도록 하려면, clear:both; 와 같이 사용해야한다.(글로는 설명이 쉽지않네요. 필요한 때가 있습니다. 아래그림 참고)
박스모델의 인라인,블록 성질을 이해하고 display, float, margin. position 프로퍼티를 자유자재로 이용하게 되면 웹접근성의 대부분 문제를 해결하면서 멋진 레이아웃을 구성할 수 있다.. position 에 대해 간단히 설명하자면,
position : absolute; <== 페이지의 절대 위치를 지정한다.
position : relative; <== 엘리먼트간 상대위치를 이용하여 위치를 지정한다.
position : fixed; <== 화면상의 제자리에 고정시킨다.
- 그리고 웹접근성
박스모델을 이해하고 position의 absolute와 relative를 이해하여 자유자재로 레이아웃을 구성할 줄 알게되면 아래와 같은 사례도 어렵지 않게 구현이 가능하다. 박스모델의 이해(정확히 하자면 visual formatting model의 이해도 포함된다)와 웹접근성이 밀접하게 연관되는 이유는 커서이동, 문서의 논리적 구성등과 밀접한 관련이 있다. html문서의 논리적 구성과 화면배치(레이아웃)에는 분명히 부딪히는 부분이 있을 것이다. 이 부분을 css가 해결해 주는 것이며, 그 배경에는 박스모델과 Visual formatting모델의 이해가 필수다.
아래그림을 참조하여 두 사이트에 탭으로 표현된 영역에서 탭 키로 커서를 이동시켜 보자 (왼쪽은 네이버 http://www.naver.com 쇼핑 컨텐츠 영역이며, 오른쪽은 공무원연금공단 http://www.geps.or.kr/main.jsp 공지영역이다.)
네이버의 경우 탭에 커서가 가도 하단의 컨텐츠가 변경되지 않는다. 공무원연금공단의 경우 탭에 커서가 가면 하단의 컨텐츠가 변경되며 해당 컨텐츠로 커서가 이동된다. 이는 두 문서의 html 태그 구조가 다르기 때문에 나타나는 현상이다.
네이버의 경우는,
탭1
탭2
탭3
컨텐츠
의 구조로 태그가 구성되어있다. 위와같이 구성하면 각 탭으로 커서가 이동했을때 하단 컨텐츠가 보이도록 자바스크립트를 작성할 수 있지만(웹접근성을 안따진다면 css만으로도 구현할 수 있다. ) 해당탭에 커서가 위치할 때(탭2, 탭3에서) 해당 컨텐츠로 커서가 이동하도록은 할 수 없다.
공무원연금공단의 경우는
탭1
컨텐츠
더보기버튼
탭2
컨텐츠
더보기버튼
탭3
컨텐츠
더보기버튼
와 같이 구성하였다. (공지영역 좌측에 있는 배너 영역도 동일하게 구성되어있다.) 이렇게 태그를 구성하면 탭에 의한 자연스런 커서이동이 가능하다. ( 제가 작업한 것이긴 하지만 그래도 태그 구성이 많이 아쉽습니다.)
여기서 딴지를 걸 사항이 있다. 탭 영역은 리스트이기 때문에 네비게이션의 성격이 강하므로 위의 공무원연금공단의 경우와 같이 구성하지 않아도 되지 않을까 하는 것이다. 웹 접근성 연구소 http://www.wah.or.kr/Example/index.asp?cate=7 링크를 참조해보면 알겠지만 지침에는 필자가 지적한 부분에 대한 지침이 별도로 마련되어있지 않다. 단지 onmouseover 보다는 onclick을 사용하고 onclick 이벤트에 return false; 를 두어 스크립트만 작동하도록 하고 있으며, href 에 탭이 연결된 링크를 명시하여 최소한의 접근성만을 보장하도록 되어있을 뿐이다. 하지만 공무원연금공단 사례와 같이 잘 구성된 태그 구조로 충분히 더 쉽게 구성할 수 있다.
숨겨진 바로가기 링크 제공으로도 해결할 수 있다. 공무원연금공단홈페이지에 접속한 뒤 주소창에 커서를 위치시킨다음 탭키로 커서를 이동시켜보자. 아래 그림과 같이 숨겨진 바로가기 링크가 나타난다. 이 링크는 커서로 이동할 때만 찾을 수 있는 숨겨진 영역이다. (막상 구현해보려면 쉽지않지만 답을 찾고나면 허무하다.)
(참조문헌)
- CSS비밀 매뉴얼/데이빗 소여 맥팔랜드/한빛미디어/ISBN 9788979144789
- 웹 접근성 연구소 http://www.wah.or.kr
(2012/05/01 22:52에 작성한 글입니다.)
댓글
댓글 쓰기