[HTML&CSS] column 속성으로 다단으로 편집 (multi-layout edit)

column 속성으로 다단으로 편집


텍스트 단을 column 속성으로 다단으로 편집할 수 있습니다. 다단으로 편집한다는 의미는 어떤 레이아웃을 여러 개의 컬럼으로 쪼개서 구성한다는 것을 의미합니다. 


보통 다단으로 편집하려면 table 요소를 사용하여 구성하기도 하지만 css의 column 속성으로 간편하게 구현할 수 있습니다. 



column-width 


column-width를 통해 column으로 표현되는 단의 너비를 고정해 놓고 구성할 수 있습니다. column 즉, 단을 고정시켜 놓았을 경우 화면이 커지면 단의 개수가 많아질 것이고 화면이 작아지면 단의 개수가 줄어드는 원리입니다. 


column-width: <크기> | auto


 <크기> 

 단 너비를 직접 지정할 수 있습니다. 

 auto

 단의 개수 같은 다른 속성에 따라 단 너비가 자   동 계산됩니다.


<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경 이미지</title>
<style>
.multi-layout {
column-width: 120px;
}
</style>
</head>
<body>
<div class="multi-layout">
<p> <strong>토마토 : </strong>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 HP까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
<p>
<strong>토마토 : </strong>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 HP까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
<p>
<strong>토마토 : </strong>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 HP까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
</div>

</body>
</html>




column-count 


column-count 속성으로 단의 개수를 고정할 수 있습니다. 만일 개수를 고정할 경우 화면의 커지면 단의 넓이가 커지게 되고 화면이 작아지면 단의 넓이가 작아지게 됩니다.


colunn-count: <숫자> | auto


 <숫자> 

 콘텐츠가 들어갈 단의 개수를 지정합니다.  

 auto

 단의 너비 같은 다른 속성에 따라 단의 개수가   자동 계산 됩니다.


<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경 이미지</title>
<style>
.multi-layout {
column-count: 3;
}
</style>
</head>
<body>
<div class="multi-layout">
<p> <strong>토마토 : </strong>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 HP까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
<p>
<strong>토마토 : </strong>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 HP까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
<p>
<strong>토마토 : </strong>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 HP까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
</div>
</body>
</html>



column-gap 


column-gap 속성은 단과 단 사이의 여백을 지정하는 속성입니다. 단과 단 사이에 구분 선을 넣는다면 구분선도 여백 안에 들어가게 됩니다.


column-gap : <크기> | normal


 <크기>

 단과 단 사이의 여백을 숫자로 지정합니다. 

 normal

 여백을 자동으로 지정합니다.


<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경 이미지</title>
<style>
.multi-layout {
column-count: 3;
column-gap: 50px;
}
</style>
</head>
<body>
<div class="multi-layout">
<p> <strong>토마토 : </strong>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 HP까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
<p>
<strong>토마토 : </strong>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 HP까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
<p>
<strong>토마토 : </strong>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 HP까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
</div>
</body>
</html>



column-rule 


column-rule 속성을 통해 단과 단 사이를 구분할 수 있는 수직선을 넣을 수 있습니다. 이때의 구분선은 color, style, width 같은 속성을 추가로 작성하여 꾸밀 수 있습니다.


column-rule-color: <색상>

column-rule-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

column-rule-width : <크기> | thin | medium | thick

column-rule : <너비> | <스타일> | <색상>


<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경 이미지</title>
<style>
.multi-layout {
column-count: 3;
column-gap: 50px;
column-rule-color: lightslategray;
column-rule-style: dotted;
column-width: 2px;
}
</style>
</head>
<body>
<div class="multi-layout">
<p> <strong>토마토 : </strong>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 HP까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
<p>
<strong>토마토 : </strong>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 HP까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
<p>
<strong>토마토 : </strong>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 HP까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
</div>
</body>
</html>



column-span 


column-span 속성으로 단을 여러개로 합칠 수도 있습니다. 


column-span : 1 | all


 1 

 단을 하나만 합치는 것이기 때문에 그대로 두   는 것과 같습니다. (기본값)

 all

 전체 단을 하나로 합칩니다.


<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경 이미지</title>
<style>
.multi-layout {
column-count: 3;
column-gap: 50px;
column-rule-color: lightslategray;
column-rule-style: dotted;
column-width: 2px;
}
.col-merge {
column-span:all;
}
</style>
</head>
<body>
<h1> 건강에 좋은 식품!</h1>
<h3> 너에게 좋은 음식 토마토 토마토 토마토!!</h3>

<div class="multi-layout">
<strong>토마토 </strong>
<p>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 HP까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
<strong>토마토 </strong>
<p>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 HP까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
<strong>토마토 </strong>
<p>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 HP까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
<div class="col-merge">
<strong > 코코넛 </strong>
<p>
내륙 지방과 위도가 높은 지역을 제외한 모든 곳에 서식한다. 코코넛 나무 같은 야자수는 햇빛에 노출되는 시간이 길어야 잘 자란다. 또한 높은 염분은 잘 견디나 삼투압 작용으로 인하여 빠져나가는 수분을 포충할 수분이 필요하기 때문에 강수량도 높아야 한다. 내륙 지역 중 건조하고 위도가 높은 곳은 적도보다 햇볕을 덜 받는다. , 아열대도 아니고 거의 열대기후 지역에서만 산다. 모래가 많은 토질에서는 열매가 해류를 따라 다른 곳으로 퍼져 나가기도 한다. 이렇게 열매가 바다 위에서도 장시간 생존할 수 있는 이유는 질긴 섬유질 과피는 물에 뜨고, 씨앗에는 안쪽에 물과 영양분이 저장
</p>
</div>

</div>
</body>
</html>


이 글을 공유하기

댓글(1)

Designed by JB FACTORY