column-width-단의 너비 고정하고 다단 구성하기
한 화면을 여러 단으로 구성할 떄 단의 너비를 고정해 넣고 화면을 분할할 수도 있고 단의 개수를 고정해 놓고 화면을 분할할 수도 있습니다.
-
단의 너비를 고정해 놓고 구성하는 법은 화면이 커지면 단의 개수가 많아지고 화면이 좁아지면 단의 개수가 줄어듭니다.
-
다단으로 편집할때 단의 너비를 고정해놓으려면 column-width속성을 이용합니다.
column-count속성-단의 개수 고정하고 다단 구성하기
다단 화면을 만들 때 단의 개수를 고정해 놓을 수도 있습니다.
- 이렇게 하면 브라우저 창의 너비와 상관없이 단의 개수를 항상 일정하게 유지하기 때문에 창의 너비가 커지면 너비도 커집니다.
- 이렇게 단의 개수를 고정하려면 column-count 속성을 사용합니다.
| 속성 값 | 설명 |
|---|---|
| 숫자 | 콘텐츠가 들어갈 단의 개수를 지정합니다. 0보다 큰수를 사용합니다. |
| auto | 단의너비(column-width)같은 다른 속성에 따라 단의 개수가 자동 계산됩니다. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML5 레이아웃</title>
<style>
body {
font-family: "맑은 고딕", "고딕", "굴림";
}
.multi {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
</style>
</head>
<body>
<header>
<h2>건강에 좋은 식품 - Super Food</h2>
</header>
<div class="multi">
<p><b>코코넛 오일 </b>: 남미 파나마에서는 “코코넛오일 한 컵이면 모든 병이 낫는다”라고 이야기할 정도로 그 효능이 뛰어나다. 코코넛 오일에 들어있는 중사슬 지방산은 콜레스테롤 수치에 나쁜 영향을 주지 않는 건강한 지방산이다. 또 라우르산이 풍부해 세균을 물리치고 염증을 가라앉히는 효과가 있다. 하루 권장량은 성인기준 2~4스푼(30~40mL) 정도이다.</p>
<p><b>블루베리 </b>: 블루베리는 우리 몸이 산화하는 현상을 막아주는 '항산화 물질'이 가장 많은 식품으로 알려졌다. 미국 농무부 인간영양연구소에서 밝힌 자료에 따르면 블루베리의 '안토시아닌'이라는 물질은 시력 향상에 뛰어난 효과가 있다. 그뿐만 아니라 다이어트에도 좋다. 블루베리의 폴리페놀 성분은 체내 지방세포를 녹여주는 역할을 한다. 하루 권장량은 성인기준 50g 전후로, 20~30알 정도이다.</p>
<p><b>아몬드 </b>: 혈관질환에 좋은 오메가3, 섬유소, 비타민 E가 풍부해 항산화 효과가 높으며 콜레스테롤 수치를 낮추는 L-아르기닌 등의 좋은 영양소도 들어 있다. 또한, 식욕을 감소시키고 뇌 내 행복감을 촉진하는 세로토닌 분비를 증가시키는 것으로 나타났다. 특히 껍질에 비타민 E, 플라보노이드, 카테킨 등의 항산화 성분이 풍부하니 껍질째 먹는 것이 좋다. 하루 권장량은 30g(23알 내외) 정도이며, 과도하게 섭취하면 장의 흡수기능이 저하되니 주의해야 한다.</p>
</div>
</body>
</html>
column-gap 속성- 단과 단 사이 여백지정하기
단과 단 사이의 여백을 지정하는 속성입니다. 단과 단 사이에 구분선을 넣는다면 구분선도 이 여백안에 들어갑니다.
column-rlue속성-구분선의 색상,스타일,너비 지정하기
화면을 여러 단으로 구성할 때 단과 단 사이에 여백을 두는 것만으로도 구분하지만 좀 더 확실히 구분하기 위해 수직선을 넣기도 합니다.
- 이때 column-rule속성을 이용해 선의 스타일을 지정하는데 색상과 형태,너비를 따로 지정하고싶다면
- column-rulue-color,style,width속성을 사용합니다.
//단과 단 사이에 너비가 1px인 회색 점선의 구분선 추가하기!
column-rule-color:#ccc;
column-rule-style:dotted;
column-rule-width:1px;단사이에 구분선 삽입하기
.multi {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
-webkit-column-rule: 2px dotted #000;
-moz-column-rule: 2px dotted #000;
column-rule: 2px dotted #000;
text-align: justify;
}
블로그 이전합니다! https://jyyoun1022.tistory.com/