본문 바로가기
💻 1. 웹개발_Front end/1-3 CSS

[CSS] 05-2 다단으로 편집하기

by 달님🌙 2021. 9. 5.
반응형

 

1. column-width – 단의 너비 고정하고 다단 구성하기

 

① 화면이 커지면 단의 개수가 많아짐

② 기본형 

column-width: <크기> | auto

 

③ 속성 값

 

<예제 – column-width-001.html>

<!DOCTYPE html>
<html lang="ko">
<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>column-width</title>
    <style>
        body {
            font-family: "맑은 고딕", "고딕", "굴림";
        }
        .multi {
            /*단의 width 120px로 고정 요소의 width가 늘어나면
            단의 개수가 늘어남*/
            -webkit-column-width: 120px;
            -moz-column-width: 120px;
            column-width: 120px;
        }
    </style>
</head>
<body>
    <header>
        <h2>토마토 - super food</h2>
    </header>
    <div class="multi">
        <p>토마토는 비타민 A,C가 풍부하여 칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며 
            혈압을 내리고 혈관을 튼튼하게 해준다. 토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며 
            잘 알려져 있듯이 블루베리와 함께 대표적인 향산화 음식이기도 하다.</p>
        <p>토마토는 비타민 A,C가 풍부하여 칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며 
            혈압을 내리고 혈관을 튼튼하게 해준다. 토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며 
            잘 알려져 있듯이 블루베리와 함께 대표적인 향산화 음식이기도 하다.</p>
        <p>토마토는 비타민 A,C가 풍부하여 칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며 
            혈압을 내리고 혈관을 튼튼하게 해준다. 토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며 
            잘 알려져 있듯이 블루베리와 함께 대표적인 향산화 음식이기도 하다.</p>
    </div>
</body>
</html>

 

 

2. column-count – 단의 개수 고정하고 다단 구성하기

 

① 브라우저 창의 너비와 상관없이 단의 개수 유지

② 화면이 커지면 단의 너비가 증가

③ 기본형

column-count: <숫자> | auto

 

<예제 – column-count-001.html>

<!DOCTYPE html>
<html lang="ko">
<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>column-count</title>
    <style>
        body {
            font-family: "맑은 고딕", "고딕", "굴림";
        }
        .multi {
            /*단의 개수 3개로 고정 요소의 width가 늘어나면
            단의 width가 늘어남*/
            -webkit-column-count: 3;
            -moz-column-count: 3;
            column-count: 3;
        }
    </style>
</head>
<body>
    <header>
        <h2>토마토 - super food</h2>
    </header>
    <div class="multi">
        <p>토마토는 비타민 A,C가 풍부하여 칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며 
            혈압을 내리고 혈관을 튼튼하게 해준다. 토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며 
            잘 알려져 있듯이 블루베리와 함께 대표적인 향산화 음식이기도 하다.</p>
        <p>토마토는 비타민 A,C가 풍부하여 칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며 
            혈압을 내리고 혈관을 튼튼하게 해준다. 토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며 
            잘 알려져 있듯이 블루베리와 함께 대표적인 향산화 음식이기도 하다.</p>
        <p>토마토는 비타민 A,C가 풍부하여 칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며 
            혈압을 내리고 혈관을 튼튼하게 해준다. 토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며 
            잘 알려져 있듯이 블루베리와 함께 대표적인 향산화 음식이기도 하다.</p>
    </div>
</body>
</html>

 

 

3. break-after – 다단 위치 지정하기

 

① 기본형

- break-before: column | avoid-column -> 특정 요소 앞

- break-after: column | avoid-column -> 특정 요소 뒤

- break-inside: column | avoid-column -> 특정 요소 안

 

② column : 단 나눔, avoid-column : 단 나누지 않음

 

 

<예제 – column-break-001.html>

<!DOCTYPE html>
<html lang="ko">
<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>column-break</title>
    <style>
        body {
            font-family: "맑은 고딕", "고딕", "굴림";
        }
        section {
            padding: 20px;
            width: 600px;
            margin: 20px auto;
            border: 1px solid #ccc;
            border-radius: 10px;
        }
        .multi {
            /*단의 개수 3개로 고정 요소의 width가 늘어나면
            단의 width가 늘어남*/
            -webkit-column-count: 3;
            -moz-column-count: 3;
            column-count: 3;
            -webkit-column-rule: 2px dotted #000;
            -moz-column-rule: 2px dotted #000;
            column-rule: 2px dotted #000;
            text-align: justify;
        }
    </style>
</head>
<body>
    <section>
        <h2>건강에 좋은 식품 - Super Food</h2>
        <h3>코코넛 오일</h3>
        <p>남미 파나마에서는 “코코넛오일 한 컵이면 모든 병이 낫는다”라고 이야기할 정도로 그 효능이 뛰어나다. 
            코코넛 오일에 들어있는 중사슬 지방산은 콜레스테롤 수치에 나쁜 영향을 주지 않는 건강한 지방산이다. 
            또 라우르산이 풍부해 세균을 물리치고 염증을 가라앉히는 효과가 있다. 하루 권장량은 성인기준 2~4스푼(30~40mL) 정도이다.</p>
        <div class="multi">
            <h3>아보카도</h3>
            <p>나무에서 열리는 버터라고 불릴 만큼 몸에 좋은 지방인 오메가 3와 단백질, 비타민 E와 같은 항산화 성분이 풍부한 과일이다. 
                알파 카로틴이 풍부하게 들어 있어 여러 항암 효과가 뛰어난 것으로 알려져 있다. 
                그뿐만 아니라 세포의 콜라겐 합성을 도와 피부 탄력을 높이는 데 도움을 준다. 
                하루 권장량은 성인기준 1개이며, 꾸준히 섭취하면 콜레스테롤 수치를 낮춰준다.</p>
            <h3>케일</h3>
            <p>케일은 브로콜리, 양배추, 유채, 청경채와 같은 배추과 식물로써 세계보건기구에서 최고의 녹황색 채소로 선정되었다. 
                베타카로틴과 엽록소가 풍부해 체내 유전자를 회복하도록 돕는 항암효과가 뛰어나다. 
                또한, 위염, 위궤양에 좋은 비타민 U와 유산균을 늘리는 비타민 M과 같은 식물성 영양소를 함유하고 있다. 
                하루 권장량은 성인기준 150g 정도이다.</p>
            <h3>블루베리</h3>
            <p>블루베리는 우리 몸이 산화하는 현상을 막아주는 '항산화 물질'이 가장 많은 식품으로 알려졌다. 
                미국 농무부 인간영양연구소에서 밝힌 자료에 따르면 블루베리의 '안토시아닌'이라는 물질은 시력 향상에 뛰어난 효과가 있다. 
                그뿐만 아니라 다이어트에도 좋다. 블루베리의 폴리페놀 성분은 체내 지방세포를 녹여주는 역할을 한다. 
                하루 권장량은 성인기준 50g 전후로, 20~30알 정도이다.</p>
            <h3>아몬드</h3>
            <p>혈관질환에 좋은 오메가3, 섬유소, 비타민 E가 풍부해 항산화 효과가 높으며 콜레스테롤 수치를 낮추는 L-아르기닌 등의 좋은 영양소도 들어 있다. 
                또한, 식욕을 감소시키고 뇌 내 행복감을 촉진하는 세로토닌 분비를 증가시키는 것으로 나타났다. 
                특히 껍질에 비타민 E, 플라보노이드, 카테킨 등의 항산화 성분이 풍부하니 껍질째 먹는 것이 좋다. 
                하루 권장량은 30g(23알 내외) 정도이며, 과도하게 섭취하면 장의 흡수기능이 저하되니 주의해야 한다.</p>
        </div>
    </section>
</body>
</html>

 

 

4. column-span – 여러 단을 하나로 합치기

 

① 기본형 

column-span: 1 | all

 

② 속성 값

 

<예제 – column-span-001.html>

<!DOCTYPE html>
<html lang="ko">
<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>column-span</title>
    <style>
        body {
            font-family: "맑은 고딕", "고딕", "굴림";
        }
        section {
            padding: 20px;
            width: 600px;
            margin: 20px auto;
            border: 1px solid #ccc;
            border-radius: 10px;
        }
        .multi {
            /*단의 개수 3개로 고정 요소의 width가 늘어나면
            단의 width가 늘어남*/
            -webkit-column-count: 3;
            -moz-column-count: 3;
            column-count: 3;
            -webkit-column-rule: 2px dotted black;
            -moz-column-rule: 2px dotted black;
            column-rule: 2px dotted black;
            text-align: justify;
        }
        .no-col {
            background: #f0f0f0;
            margin: 10px 3px;
            padding: 20px;
            border-radius: 5px;
            /*column-span : 단을 나누거나 합치는 속성*/
            -webkit-column-span: 1;
            -moz-column-span: 1;
            column-span: 1;
        }
    </style>
</head>
<body>
    <section>
        <header>
            <h2>토마토 - super food</h2>
        </header>
        <div class="multi">
            <p>토마토는 비타민 A,C가 풍부하여 칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며 
                혈압을 내리고 혈관을 튼튼하게 해준다. 토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며 
                잘 알려져 있듯이 블루베리와 함께 대표적인 향산화 음식이기도 하다.</p>
            <p>토마토는 비타민 A,C가 풍부하여 칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며 
                혈압을 내리고 혈관을 튼튼하게 해준다. 토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며 
                잘 알려져 있듯이 블루베리와 함께 대표적인 향산화 음식이기도 하다.</p>
            <p>토마토는 비타민 A,C가 풍부하여 칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며 
                혈압을 내리고 혈관을 튼튼하게 해준다. 토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며 
                잘 알려져 있듯이 블루베리와 함께 대표적인 향산화 음식이기도 하다.</p>
            <div class="no-col">
                <p>토마토는 비타민 A,C가 풍부하여 칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며 
                혈압을 내리고 혈관을 튼튼하게 해준다. 토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며 
                잘 알려져 있듯이 블루베리와 함께 대표적인 향산화 음식이기도 하다.</p>
            </div>
        </div>
    </section>
</body>
</html>

 

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

'💻 1. 웹개발_Front end > 1-3 CSS' 카테고리의 다른 글

[CSS] 05-3 표 스타일  (0) 2021.09.05
[CSS] 05-1 CSS 포지셔닝과 주요 속성들  (0) 2021.09.05
[CSS] 04-3 여백을 조절하는 속성들  (0) 2021.09.05
[CSS] 04-2 테두리 관련 속성들  (0) 2021.09.05
[CSS] 04-1 CSS와 박스 모델  (0) 2021.09.05

관련글

댓글

티스토리툴바