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

Language & Solution/HTML&CSS
2019. 10. 22. 18:23

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가 풍부할 뿐 아니라 희귀한 성분인 비타민 H와 P까지 포함된 과일이다.
        칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
        토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
        잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
    </p>
    <p>
        <strong>토마토 : </strong>
        토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 H와 P까지 포함된 과일이다.
        칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
        토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
        잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
    </p>
    <p>
        <strong>토마토 : </strong>
        토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 H와 P까지 포함된 과일이다.
        칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
        토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
        잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
    </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가 풍부할 뿐 아니라 희귀한 성분인 비타민 H와 P까지 포함된 과일이다.
        칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
        토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
        잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
    </p>
    <p>
        <strong>토마토 : </strong>
        토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 H와 P까지 포함된 과일이다.
        칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
        토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
        잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
    </p>
    <p>
        <strong>토마토 : </strong>
        토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 H와 P까지 포함된 과일이다.
        칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
        토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
        잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
    </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가 풍부할 뿐 아니라 희귀한 성분인 비타민 H와 P까지 포함된 과일이다.
        칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
        토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
        잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
    </p>
    <p>
        <strong>토마토 : </strong>
        토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 H와 P까지 포함된 과일이다.
        칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
        토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
        잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
    </p>
    <p>
        <strong>토마토 : </strong>
        토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 H와 P까지 포함된 과일이다.
        칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
        토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
        잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
    </p>
</div>
</body>
</html>

column-rule

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

column-rule-color: <색상>

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

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

저작자표시 비영리 변경금지

'Language & Solution > HTML&CSS' 카테고리의 다른 글

[HTML&CSS] position 속성 정리하기! (1)	2019.10.10
[HTML&CSS] box-sizing, float, clear (0)	2019.10.08
[HTML&CSS] 마진(margin) 속성, 패딩(padding) 속성 (0)	2019.10.08
[HTML&CSS] 콘텐츠(content) 영역 (0)	2019.10.07
[HTML&CSS] 테두리(border) 영역 (0)	2019.10.07