Article Layout


Home > Document > Web design > CSS > Layout > Article layout

본문 Layout

앞 페이지에서 Page layout에 대해 알아 보았는데, 그 완성된 Page layout 에 본문 제목, 소 제목, 본문을 정리하는 방법에 대해 알아 보겠습니다.



페이지 제목

페이지 제목은 문서의 첫 머리에 나오는 페이지 전체의 제목을 말합니다. 역시 일관성 있는 양식을 적용하기 위해 CSS를 적용해야 되겠져... 여기에 사용되는 element는 정해져 있지는 않지만 대표적으로 제목으로 쓰기 위해 만든 H1 ~ H6을 사용해도 될 것이고 P, DIV, SPAN 등의 Block element를 사용해도 되겠습니다. 여기서는 P element 를 사용해서 정리해 봤습니다.

페이지 제목에 지정하는 class 의 예
p.docTitle{
font:bold 18px verdana;
color:#336699;
text-align:left;
}


적용 예
<p class="docTitle">Page Title</p>


출력결과

Page Title





수평선의 사용

수평선(HR element)의 경우, 사용하지 않는다면 몰라도 사용할 경우에는 역시 사이트 유지 보수를 위해서 class 로 지정합니다.

수평선(HR element)에 지정하는 class 의 예
hr.blackHR{
color:#000000;
width:100%;
height:3px; /*수평선의 두께는 height Property로 조절한다. */
}


적용 예
<hr class="blackHr" />


출력결과





본문에 DL, DT, DD element를 사용하는 방법

이 방법은 DD element 가 좌측에 40px 의 padding 을 가진다는 점에 착안하여 DT element 는 제목에 사용하고, 본문은 DD element로 정리했습니다. 일단 아무런 class 도 지정하지 않고 dl, dt, dd 를 사용한 예를 보겠습니다.

입력
<dl>
    <dt>Definition term 1</dt>
    <dd>
    Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1
    Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1
    Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1
    Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 
    </dd>
    <dt>Definition term 2</dt>
    <dd>
    Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2
    Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2
    Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2
    Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 
    </dd>
    <dt>Definition term 3</dt>
    <dd>
    Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3
    Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3
    Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3
    Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 
    </dd>
</dl>
출력결과
Definition term 1
Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1
Definition term 2
Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2
Definition term 3
Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3

위의 결과를 보면 제목과 본문의 간격들이 일정하고 글씨 굵기도 같기 때문에 한 눈에 들어오지 않고 밑밑해 보입니다. 아래의 DHTML을 보면 확실히 비교할 수 있겠습니다. 또 어떤 Tag이 얼마의 면적을 차지하는지 알고 싶으면 style="background-color:어떤색;" 을 사용하면 되겠져...

DL background-color DT background-color DD background-color bgcolor 원래대로
DL padding-bottom DT padding-bottom DD padding-bottom padding 원래대로
Definition term 1
Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1 Definition data 1
Definition term 2
Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2 Definition data 2
Definition term 3
Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3 Definition data 3

그래서 위의 DHTML 을 기준으로 아래와 같이 정리할 수 있겠네요... 아래의 예는 이 사이트에 사용되는 class 이고, 각자 취향에 맞게 조절 합니다.

소제목과 본문에 지정하는 class 의 예
dl.paraBlock{
border-bottom:30px; /*뒤에 다른 DL과 연결 될수 있으므로 DL 간의 간격을 두기 위해서 지정. */
}

dt.subTitle{
font:bold 11px verdana;> /*굵은 글씨체(bold)로 지정*/
border-bottom:10px; /* 소제목과 본문과도 약간의 간격을 둔다.*/
}

dd.Article{
text-align:justify; /*양쪽 맞춤으로 설정, 취향에 따라 선택...*/
font:11px/1.3em verdana; /*행 간격을 글씨 크기(11px) 의 1.3 배로 지정 */
border-bottom:20px; /*본문과 다음 소제목과의 간격을 더 많이 둔다.*/
}




Page layout 과 Article layout 정리

앞 페이지의 Page layout 과 함께 아래와 같이 정리해 보았습니다.

myStyle.css
body{
color:#000000;
font:11px/1.5 Verdana;
background:#EFEFEF;
margin:10% 8%; 
.......
.......
}

p.docTitle{
font:bold 18px verdana;
color:#336699;
text-align:left;
}

hr.blackHR{
color:#000000;
width:100%;
height:3px;
}

dl.paraBlock{
border-bottom:30px;
}

dt.subTitle{
font:bold 11px verdana;>
border-bottom:10px;
}

dd.Article{
text-align:justify; 
font:11px/1.3em verdana;
border-bottom:20px;
} 

이렇게 Page layout과 Article layout을 정리해 보았는데, 그 이유는 그 만큼 중요하기 때문이겠죠. 대문 페이지 디자인, 메뉴 디자인, 버튼 디자인, 그리고 화려한 그래픽... 이런 것들은 나중에 그 일 부분만 수정하면 되지만, 많은 페이지를 CSS link 없이 HTML 만으로 작성하고 나중에 Layout을 수정 하려면 일일히 페이지를 열어서 고치는 수 밖에 더 있겠습니까? 제 개인적인 생각으로 사이트 다지인에서 가장 중요하고 선결되어야 할 사항이라고 생각합니다. 사이트 디자인은 StyleSheet Link 부터... 라고 강력히 주장합니다.




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색