우리가 웹페이지를 열어보면 신문과 같이 다단으로 된 레이아웃을 찾아볼수가 있는데 이러한 기능을 css column 컬럼 다단으로 신문처럼 화면 크기에 맞게 구현해 볼수가 있습니다.
3. 페이지를 열어본 결과값입니다.
웹페이지에서 다단으로 나눌수 있는 column 레이아웃에 대해서 살펴보았습니다. 홈페이지를 디자인하면서 빈도수가 높은 속성인 만큼 컬럼 레이아웃의 기능을 알아두시면 도움이 될수가 있습니다.
아래의 예제와 같이 body 본문에 div class 를 column 값을 넣고 의미없는 글자를 넣어보도록 하겠습니다. 디자인 하기 위해서 style 에서 .column 속성으로 text-align 속성을 justify 로 텍스트를 중앙으로 정렬합니다.
column-count 값을 4는 본문의 텍스트를 4로 나누는 것이고, column-width 는 200px 은 텍스트를 200px 크기만큼 나타나게 하지만 count 값을 4로 나누었기 때문에 화면 크기에 따라서 변화합니다.
column-qap 를 20px은 텍스트 컬럼 나누기 부분의 크기를 20px 만큼으로 조정하는 것입니다. 여기까지가 텍스트 컬럼에서 가장 많이 사용되는 속성이고 나머지는 직접 작성하여 결과값을 확인해 보시길 바랍니다.
1. 본문 BODY 은 아래의 예제와같이 의미없는 텍스트를 넣고 div class 값을 넣습니다.
2. head의 style 에서 column 속성을 넣습니다
1. 본문 BODY 은 아래의 예제와같이 의미없는 텍스트를 넣고 div class 값을 넣습니다.
2. head의 style 에서 column 속성을 넣습니다
3. 페이지를 열어본 결과값입니다.
웹페이지에서 다단으로 나눌수 있는 column 레이아웃에 대해서 살펴보았습니다. 홈페이지를 디자인하면서 빈도수가 높은 속성인 만큼 컬럼 레이아웃의 기능을 알아두시면 도움이 될수가 있습니다.
