정말 오랜만의 포스팅!!
오늘은 컨텐츠 세로 가운데 정렬을 가지고 글을 씁니다. 자~유~롭~게~
다른분에게 배운겁니다. 배운거라기보다는, 벤치마킹해서 분석해밨습니다.
널리(?) 알려진 position 을 이용한 방식은 아닙니다.
위 이미지처럼 이미지 및 텍스트가 여러줄인경우, 박스도 늘어나면서, 세로 중앙정렬을 유지하고,
위 이미지처럼 텍스트가 한줄일때에도 세로 가운데에 위치하도록 유지하는 UI 개발 기법을 소개해보겠습니다.
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
- <style type="text/css">
- * {
- margin:0;
- padding:0;
- border:0;
- }
- body {
- color:#545454;
- background:#fff;
- font:12px/18px '돋움', Dotum, sans-serif;
- }
- div {
- width:232px;
- min-height:80px;
- margin:20px;
- padding:10px 10px 10px 0;
- padding-left:100px;
- background:url('img_error.gif') no-repeat 10px 50%;
- border:4px solid #980101;
- }
- span {
- display:inline-block;
- width:0;
- height:80px;
- overflow:hidden;
- background:#f00;
- vertical-align:middle;
- }
- ul {
- list-style:none;
- display:inline-block;
- vertical-align:middle;
- }
- </style>
- <!--[if lte ie 7]>
- <style type="text/css">
- div {_height:80px;}
- ul {
- display:inline;
- zoom:1;
- text-indent:-12px;
- }
- </style>
- <![endif]-->
- <title>텍스트 가운데 정렬</title>
- </head>
- <body>
- <div>
- <span></span>
- <ul>
- <li>아이스크림 아이스크림 아이스크림 1개 </li>
- <!--
- <li>아이스크림 아이스크림 아이스크림 2개 </li>
- <li>아이스크림 아이스크림 아이스크림 3개 </li>
- <li>아이스크림 아이스크림 아이스크림 4개 </li>
- <li>아이스크림 아이스크림 아이스크림 5개 </li>
- <li>아이스크림 아이스크림 아이스크림 6개 </li>
- <li>아이스크림 아이스크림 아이스크림 7개 </li>
- <li>아이스크림 아이스크림 아이스크림 8개 </li>
- <li>아이스크림 아이스크림 아이스크림 9개 </li>
- -->
- </ul>
- </div>
- </body>
- </html>
코드는 위와 같습니다. 글로 코드하나하나를 설명하기가 좀 힘드네요 ㅠㅠ 사실 말로도 하기 힘든 다소 복잡한 코드입니다.
위코드에게 문제제기을 해본다면 빈태그를 사용했다는 점과, 익스만을 위한 스타일 정의를 사용했다는 점을 꼽을 수 있습니다.
하지만 크로스브라우징을 위해서라면 반드시 필요한 요소이고, 요즘엔 또 작업시 어쩔수없이 필요한 경우에는 유두리있게 사용하자는
트렌드이기때문에, 그리 크게 신경쓸 부분은 아닙니다. 핵심 코드를 설명해보겠습니다.
- {
- display:inline-block;
- vertical-align:middle;
- }
span 과 ul 에 공통적으로 넣은 스타일입니다.
주로 img 태그에 사용되던 vertical-align:middle; 을 사용하기 위해서는,
태그의 스타일 속성에 display:inline-block; 을 넣어줘야 합니다. 그럼 신기하게도 텍스트가 박스의 가운데에 위치를 하게됩니다.
- <!--[if lte ie 7]>
- <style type="text/css">
- div {_height:80px;}
- ul {
- *display:inline;
- *zoom:1;
- text-indent:-12px;
- }
- </style>
- <![endif]-->
익스플로러6 과 익스플로러7 을 지원해주기 위하여 추가로 코드를 넣줍니다.
zoom:1 코드를 사용하였는데 이 코드에 대해서 자신있게 설명을 못하기때문에 다른곳에서 배우셔야겠습니다 ㅡㅡㅋ
익스만을 위한 코드는 사용하지 말아야한다고 배워와서 아예 관심갖지 않았던 코드입니다.
그냥 익스6등에서 float 을 해제하기위한 용도로만 알고있습니다. 그런데 이번 코드는 float 요소도 없는데, 필요하답니다.
게다가 *display:inline; , *zoom:1; 이 둘중 하나라도 없게되면 바로 오류가 나버립니다. 항상 같이 존재해야합니다.
세로 가운데 정렬을 하기위한 요소이기때문에 어떻게 다른식으로 고쳐볼 방법이 없더군요;;
display:inline 속성을 사용했기때문에 공백도 발생합니다. 그래서 text-indent 속성을 사용해서 앞으로 땡겨주어 공백을 없앴습니다.
글을 작성하는 와중에도 계속 쑤셔보고있지만 봐도봐도 신기한 코드입니다 ㅎㅎ
아마 제가 이렇게 작성해도 이해가 전혀 안갈겁니다. 저두 그런데요 모~
아래 첨부파일도 같이 남기니 분석하는데 도움이 되었으면 하네요..
inspection.zip