-
다단 레이아웃프로그래밍/HTML&CSS 2022. 9. 14. 19:55728x90
다단 레이아웃은 신문의 양식과 비슷하게 신문을 보면 제목 헤드라인이 있고 그 밑으로 2~3개 정도의 단으로 구분한 모습이다. 다단 레이아웃의 모양을 먼저 이미지로 구현해보았다.
다단 레이아웃 구상도 위 이미지와 같이 본인이 구현하고자하는 웹 문서의 모양을 미리 구현해봄으로써 시각화 된 이미지를 활용하여 더 쉽게 CSS 스타일을 구현할 수 있을 것이다.
이제 HTML 부문을 작성하여 레이아웃의 틀을 구현해준다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>다단 레이아웃</title> </head> <body> <div class="col"> <h2>다단 레이아웃</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto ...</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto ...</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto ...</p> </div> </body> </html>그 다음으로 CSS를 작성하여 스타일을 입혀주는데, 단을 구현하기 위해서는 몇가지 속성들을 알아야한다.
종류 설명 column-count 생성하고자하는 단 개수를 설정 column-rule 단과 단 사이의 구분선의 모양, 두께, 색상을 설정 column-gap 단과 단 사이의 여백을 설정 column-span 단과 단의 포함된 요소를 다단 편집에서 해체(headLine) <style> div, h2, p{margin: 0; padding: 0;} body{margin: 10px;} h2{padding: 0 0 20px; text-align: center;} div.col{ text-align: justify; padding: 20px; background-color: gold; column-count: 3; /*단의 개수를 3개로 설정*/ column-gap: 30px; /*단의 여백를 30px로 설정*/ column-rule: 3px dashed red; /*단의 모양을 3px, 실선, red로 설정*/ } .col > h2 {column-span: all;} /*headLine 설정*/ </style>위 코드와 같이 CSS를 작성하여 결과를 보면,
다단 레이아웃 예제 결과 처음에 이미지로 구현한 것과 비슷한 다단 레이아웃을 구현할 수 있다.
728x90