15. 레이아웃(다단스타일)

1. columns 

2. column-count : 칼럼(column) 사이의 간격을 설정합니다.

3. column-gap : 칼럼(column) 사이의 간격을 설정합니다.

4. column-width :칼럼의 너비를 설정합니다.

웹 브라우저는 설정한 너비의 칼럼을 만든 후, 나머지 영역을 동일하게 나누어 칼럼 사이의 간격으로 자동 설정합니다.

5. column-span : 해당 요소가 몇 개의 칼럼을 병합하여 표현할지를 설정합니다.

6. column-fill :칼럼을 어떻게 채울지 설정함.

7. column-rule : 스타일을 한 줄에 설정할 수 있습니다.

8. column-rule-style  :칼럼 사이에 들어갈 라인의 스타일을 설정합니다.

9. column-rule-width :칼럼 사이에 들어갈 라인의 두께를 설정합니다.

10. column-rule-color :칼럼 사이에 들어갈 라인의 색상을 설정합니다.

    <style>
        .wrap {
            border: 1px solid black;
            height: 300px;
            overflow: scroll;
        }
        
        .column1 {
            column-width: 400px;
            column-gap: 50px;
        }
        
        .column2 {
            column-count: 4;
            column-rule-style: dashed;
        }
    </style>
    <h1>다단스타일</h1>
    <h3>고정 사이즈로 다단 설정</h3>
    <div class="wrap column1">
        내 나이 여섯 살 적에, 나는 '자연의 진실한 이야기'라는 제목의 원시림에 관한 책에서 근사한 그림 하나를 본 적이 있다. 그것은 보아뱀 한 마리가 맹수를 삼키고 있는 그림이었다. 그걸 옮겨 놓은 그림이 위에 있다. 그 책에 이런 말이 있었다. 보아뱀은 먹이를 씹지 않고 통째로 삼킨다. 그런 다음 몸을 움직일 수가 없게 되어 먹이가 소화될 때까지 여섯 달 동안 잠을 잔다. 나는 그 그림을 보고 나서 밀림의 여러 가지 모험들을 곰곰이 생각해 보았으며,
        드디어는 나도 색연필을 들고 나의 첫 그림을 용케 그려 내었다. 나의 그림 제 1호, 그건 다음과 같았다. 나는 내 걸작을 어른들에게 보여주며 내 그림이 무섭지 않느냐고물어 보았다. 어른들은 대답했다. "아니, 모자가 다 무서워?" 내 그림은 모자를 그린게 아니라 코끼리를 소화시키고 있는 보아뱀을 그린 것이었다. 그래서 나는 어른들이 알아볼 수 있도록 보아뱀의 속을 그렸다. 어른들에겐 항상 설명을 해 주어야 한다. 내 그림 제 2호는
        아래와 같았다. 어른들은 나에게 속이 보였다 안 보였다 하는 보아뱀의 그림따위는 집어 치우고, 차라리 지리나 산수, 역사, 문법에 재미를 붙여 보라고 충고했다. 나는 이렇게 해서 내 나이 여섯 살적에 화가라고 하는 멋있는 작업을 포기했다. 나는 내 그림 제 1 호와 제 2호의 실패로 그만 기가 죽었던 것이다. 어른들은 자기들 혼자서는 아무것도 이해하지 못하고, 그렇다고 그 때마다 자꾸자꾸 설명을 해 주자니 어린애에겐 힘겨운 일이었다.
        그래서 나는 다른 직업을 골라야 했고, 비행기 조종을 배웠다. 나는 세계의 여기저기 제법 많은 곳을 날아다녔다. 그 덕분에 나는 한 번 쓱 보아도 중국과 아리조나를 구별할 수 있었다. 밤의 어둠 속에서 길을 잃을 때 지리는 매우 편리하다. 나는 이렇게 살아오는 동안 착실한 사람들을 많이 만나 자주자주 접촉을 했다. 나는 오랫동안 어른들과 함께 살며 그들을 아주 가까이서 보아왔다. 그렇다고 해서 내 의견이 크게 달라지지는 않았다. 나는
        좀 똑똑해 보이는 사람을 만날 때마다, 항상 품고 다니던 내 그림 제 1호를 꺼내 그를 시험해 보곤 했다. 그가 정말 이해력 있는 사람인가 알고 싶었던 것이다. 그러나 늘 이런 대답이었다. '그건 모자로군요.' 그러면 나는 보아뱀 이야기도 처녀림 이야기도 별 이야기도 꺼내지 않았다.나는 그가 알아 들을 수 있는 트럼프 이야기, 골프 이야기, 넥타이이야기를 했다. 그러면 그 어른은 분별 있는 사람을 또 하나 알게 되었다고 아주 흐뭇해
        하는 것이었다. 나는 이렇게 해서 진심을 털어 놓고 이야기할 사람도 없이 혼자 살아왔다. 그러다가 육 년 전, 사하라 사막에서 비행기 사고를 만났던 것이다. 기관의 부속 하나가 부서져 나갔다. 기관사도 승객도 없었던 터라, 나는 그 어려운 수선을 혼자 감당해 볼 작정이었다. 나로서는 죽느냐 사느냐 하는 문제였다. 가진 것이라고는 겨우 일주일 동안 마실 물밖에 없었다. 첫날 저녁, 나는 사람이 사는 곳에서 수천 마일 떨어진 사막 위에
        누워 잠이 들었다. 넓은 바다 한가운데 뗏목을 타고 흘러가는 난파선의 뱃사람보다도 나는 훨씬 더 외로운 처지였다. 그러니 해 뜰 무렵 이상한 작은 목소리가 나를 불러 깨웠을 때 나는 얼마나 놀라웠겠는가. 그 목소리는 이렇게 말했다. "저..... 양 한 마리만 그려 줘요!" "뭐!" "양 한 마리만 그려 줘....." 나는 벼락이라도 맞은 듯 벌떡 일어섰다. 나는 열심히 눈을 비비고 주위를 조심스럽게 살폈다. 아주 신기한 꼬마 사람이
        엄숙하게 바라보고 있었다.
    </div>
    <h3>고정 개수로 다단 설정</h3>
    <div class="wrap column2">
        내 나이 여섯 살 적에, 나는 '자연의 진실한 이야기'라는 제목의 원시림에 관한 책에서 근사한 그림 하나를 본 적이 있다. 그것은 보아뱀 한 마리가 맹수를 삼키고 있는 그림이었다. 그걸 옮겨 놓은 그림이 위에 있다. 그 책에 이런 말이 있었다. 보아뱀은 먹이를 씹지 않고 통째로 삼킨다. 그런 다음 몸을 움직일 수가 없게 되어 먹이가 소화될 때까지 여섯 달 동안 잠을 잔다. 나는 그 그림을 보고 나서 밀림의 여러 가지 모험들을 곰곰이 생각해 보았으며,
        드디어는 나도 색연필을 들고 나의 첫 그림을 용케 그려 내었다. 나의 그림 제 1호, 그건 다음과 같았다. 나는 내 걸작을 어른들에게 보여주며 내 그림이 무섭지 않느냐고물어 보았다. 어른들은 대답했다. "아니, 모자가 다 무서워?" 내 그림은 모자를 그린게 아니라 코끼리를 소화시키고 있는 보아뱀을 그린 것이었다. 그래서 나는 어른들이 알아볼 수 있도록 보아뱀의 속을 그렸다. 어른들에겐 항상 설명을 해 주어야 한다. 내 그림 제 2호는
        아래와 같았다. 어른들은 나에게 속이 보였다 안 보였다 하는 보아뱀의 그림따위는 집어 치우고, 차라리 지리나 산수, 역사, 문법에 재미를 붙여 보라고 충고했다. 나는 이렇게 해서 내 나이 여섯 살적에 화가라고 하는 멋있는 작업을 포기했다. 나는 내 그림 제 1 호와 제 2호의 실패로 그만 기가 죽었던 것이다. 어른들은 자기들 혼자서는 아무것도 이해하지 못하고, 그렇다고 그 때마다 자꾸자꾸 설명을 해 주자니 어린애에겐 힘겨운 일이었다.
        그래서 나는 다른 직업을 골라야 했고, 비행기 조종을 배웠다. 나는 세계의 여기저기 제법 많은 곳을 날아다녔다. 그 덕분에 나는 한 번 쓱 보아도 중국과 아리조나를 구별할 수 있었다. 밤의 어둠 속에서 길을 잃을 때 지리는 매우 편리하다. 나는 이렇게 살아오는 동안 착실한 사람들을 많이 만나 자주자주 접촉을 했다. 나는 오랫동안 어른들과 함께 살며 그들을 아주 가까이서 보아왔다. 그렇다고 해서 내 의견이 크게 달라지지는 않았다. 나는
        좀 똑똑해 보이는 사람을 만날 때마다, 항상 품고 다니던 내 그림 제 1호를 꺼내 그를 시험해 보곤 했다. 그가 정말 이해력 있는 사람인가 알고 싶었던 것이다. 그러나 늘 이런 대답이었다. '그건 모자로군요.' 그러면 나는 보아뱀 이야기도 처녀림 이야기도 별 이야기도 꺼내지 않았다.나는 그가 알아 들을 수 있는 트럼프 이야기, 골프 이야기, 넥타이이야기를 했다. 그러면 그 어른은 분별 있는 사람을 또 하나 알게 되었다고 아주 흐뭇해
        하는 것이었다. 나는 이렇게 해서 진심을 털어 놓고 이야기할 사람도 없이 혼자 살아왔다. 그러다가 육 년 전, 사하라 사막에서 비행기 사고를 만났던 것이다. 기관의 부속 하나가 부서져 나갔다. 기관사도 승객도 없었던 터라, 나는 그 어려운 수선을 혼자 감당해 볼 작정이었다. 나로서는 죽느냐 사느냐 하는 문제였다. 가진 것이라고는 겨우 일주일 동안 마실 물밖에 없었다. 첫날 저녁, 나는 사람이 사는 곳에서 수천 마일 떨어진 사막 위에
        누워 잠이 들었다. 넓은 바다 한가운데 뗏목을 타고 흘러가는 난파선의 뱃사람보다도 나는 훨씬 더 외로운 처지였다. 그러니 해 뜰 무렵 이상한 작은 목소리가 나를 불러 깨웠을 때 나는 얼마나 놀라웠겠는가. 그 목소리는 이렇게 말했다. "저..... 양 한 마리만 그려 줘요!" "뭐!" "양 한 마리만 그려 줘....." 나는 벼락이라도 맞은 듯 벌떡 일어섰다. 나는 열심히 눈을 비비고 주위를 조심스럽게 살폈다. 아주 신기한 꼬마 사람이
        엄숙하게 바라보고 있었다.
    </div>

다단스타일

고정 사이즈로 다단 설정

내 나이 여섯 살 적에, 나는 '자연의 진실한 이야기'라는 제목의 원시림에 관한 책에서 근사한 그림 하나를 본 적이 있다. 그것은 보아뱀 한 마리가 맹수를 삼키고 있는 그림이었다. 그걸 옮겨 놓은 그림이 위에 있다. 그 책에 이런 말이 있었다. 보아뱀은 먹이를 씹지 않고 통째로 삼킨다. 그런 다음 몸을 움직일 수가 없게 되어 먹이가 소화될 때까지 여섯 달 동안 잠을 잔다. 나는 그 그림을 보고 나서 밀림의 여러 가지 모험들을 곰곰이 생각해 보았으며, 드디어는 나도 색연필을 들고 나의 첫 그림을 용케 그려 내었다. 나의 그림 제 1호, 그건 다음과 같았다. 나는 내 걸작을 어른들에게 보여주며 내 그림이 무섭지 않느냐고물어 보았다. 어른들은 대답했다. "아니, 모자가 다 무서워?" 내 그림은 모자를 그린게 아니라 코끼리를 소화시키고 있는 보아뱀을 그린 것이었다. 그래서 나는 어른들이 알아볼 수 있도록 보아뱀의 속을 그렸다. 어른들에겐 항상 설명을 해 주어야 한다. 내 그림 제 2호는 아래와 같았다. 어른들은 나에게 속이 보였다 안 보였다 하는 보아뱀의 그림따위는 집어 치우고, 차라리 지리나 산수, 역사, 문법에 재미를 붙여 보라고 충고했다. 나는 이렇게 해서 내 나이 여섯 살적에 화가라고 하는 멋있는 작업을 포기했다. 나는 내 그림 제 1 호와 제 2호의 실패로 그만 기가 죽었던 것이다. 어른들은 자기들 혼자서는 아무것도 이해하지 못하고, 그렇다고 그 때마다 자꾸자꾸 설명을 해 주자니 어린애에겐 힘겨운 일이었다. 그래서 나는 다른 직업을 골라야 했고, 비행기 조종을 배웠다. 나는 세계의 여기저기 제법 많은 곳을 날아다녔다. 그 덕분에 나는 한 번 쓱 보아도 중국과 아리조나를 구별할 수 있었다. 밤의 어둠 속에서 길을 잃을 때 지리는 매우 편리하다. 나는 이렇게 살아오는 동안 착실한 사람들을 많이 만나 자주자주 접촉을 했다. 나는 오랫동안 어른들과 함께 살며 그들을 아주 가까이서 보아왔다. 그렇다고 해서 내 의견이 크게 달라지지는 않았다. 나는 좀 똑똑해 보이는 사람을 만날 때마다, 항상 품고 다니던 내 그림 제 1호를 꺼내 그를 시험해 보곤 했다. 그가 정말 이해력 있는 사람인가 알고 싶었던 것이다. 그러나 늘 이런 대답이었다. '그건 모자로군요.' 그러면 나는 보아뱀 이야기도 처녀림 이야기도 별 이야기도 꺼내지 않았다.나는 그가 알아 들을 수 있는 트럼프 이야기, 골프 이야기, 넥타이이야기를 했다. 그러면 그 어른은 분별 있는 사람을 또 하나 알게 되었다고 아주 흐뭇해 하는 것이었다. 나는 이렇게 해서 진심을 털어 놓고 이야기할 사람도 없이 혼자 살아왔다. 그러다가 육 년 전, 사하라 사막에서 비행기 사고를 만났던 것이다. 기관의 부속 하나가 부서져 나갔다. 기관사도 승객도 없었던 터라, 나는 그 어려운 수선을 혼자 감당해 볼 작정이었다. 나로서는 죽느냐 사느냐 하는 문제였다. 가진 것이라고는 겨우 일주일 동안 마실 물밖에 없었다. 첫날 저녁, 나는 사람이 사는 곳에서 수천 마일 떨어진 사막 위에 누워 잠이 들었다. 넓은 바다 한가운데 뗏목을 타고 흘러가는 난파선의 뱃사람보다도 나는 훨씬 더 외로운 처지였다. 그러니 해 뜰 무렵 이상한 작은 목소리가 나를 불러 깨웠을 때 나는 얼마나 놀라웠겠는가. 그 목소리는 이렇게 말했다. "저..... 양 한 마리만 그려 줘요!" "뭐!" "양 한 마리만 그려 줘....." 나는 벼락이라도 맞은 듯 벌떡 일어섰다. 나는 열심히 눈을 비비고 주위를 조심스럽게 살폈다. 아주 신기한 꼬마 사람이 엄숙하게 바라보고 있었다.

고정 개수로 다단 설정

내 나이 여섯 살 적에, 나는 '자연의 진실한 이야기'라는 제목의 원시림에 관한 책에서 근사한 그림 하나를 본 적이 있다. 그것은 보아뱀 한 마리가 맹수를 삼키고 있는 그림이었다. 그걸 옮겨 놓은 그림이 위에 있다. 그 책에 이런 말이 있었다. 보아뱀은 먹이를 씹지 않고 통째로 삼킨다. 그런 다음 몸을 움직일 수가 없게 되어 먹이가 소화될 때까지 여섯 달 동안 잠을 잔다. 나는 그 그림을 보고 나서 밀림의 여러 가지 모험들을 곰곰이 생각해 보았으며, 드디어는 나도 색연필을 들고 나의 첫 그림을 용케 그려 내었다. 나의 그림 제 1호, 그건 다음과 같았다. 나는 내 걸작을 어른들에게 보여주며 내 그림이 무섭지 않느냐고물어 보았다. 어른들은 대답했다. "아니, 모자가 다 무서워?" 내 그림은 모자를 그린게 아니라 코끼리를 소화시키고 있는 보아뱀을 그린 것이었다. 그래서 나는 어른들이 알아볼 수 있도록 보아뱀의 속을 그렸다. 어른들에겐 항상 설명을 해 주어야 한다. 내 그림 제 2호는 아래와 같았다. 어른들은 나에게 속이 보였다 안 보였다 하는 보아뱀의 그림따위는 집어 치우고, 차라리 지리나 산수, 역사, 문법에 재미를 붙여 보라고 충고했다. 나는 이렇게 해서 내 나이 여섯 살적에 화가라고 하는 멋있는 작업을 포기했다. 나는 내 그림 제 1 호와 제 2호의 실패로 그만 기가 죽었던 것이다. 어른들은 자기들 혼자서는 아무것도 이해하지 못하고, 그렇다고 그 때마다 자꾸자꾸 설명을 해 주자니 어린애에겐 힘겨운 일이었다. 그래서 나는 다른 직업을 골라야 했고, 비행기 조종을 배웠다. 나는 세계의 여기저기 제법 많은 곳을 날아다녔다. 그 덕분에 나는 한 번 쓱 보아도 중국과 아리조나를 구별할 수 있었다. 밤의 어둠 속에서 길을 잃을 때 지리는 매우 편리하다. 나는 이렇게 살아오는 동안 착실한 사람들을 많이 만나 자주자주 접촉을 했다. 나는 오랫동안 어른들과 함께 살며 그들을 아주 가까이서 보아왔다. 그렇다고 해서 내 의견이 크게 달라지지는 않았다. 나는 좀 똑똑해 보이는 사람을 만날 때마다, 항상 품고 다니던 내 그림 제 1호를 꺼내 그를 시험해 보곤 했다. 그가 정말 이해력 있는 사람인가 알고 싶었던 것이다. 그러나 늘 이런 대답이었다. '그건 모자로군요.' 그러면 나는 보아뱀 이야기도 처녀림 이야기도 별 이야기도 꺼내지 않았다.나는 그가 알아 들을 수 있는 트럼프 이야기, 골프 이야기, 넥타이이야기를 했다. 그러면 그 어른은 분별 있는 사람을 또 하나 알게 되었다고 아주 흐뭇해 하는 것이었다. 나는 이렇게 해서 진심을 털어 놓고 이야기할 사람도 없이 혼자 살아왔다. 그러다가 육 년 전, 사하라 사막에서 비행기 사고를 만났던 것이다. 기관의 부속 하나가 부서져 나갔다. 기관사도 승객도 없었던 터라, 나는 그 어려운 수선을 혼자 감당해 볼 작정이었다. 나로서는 죽느냐 사느냐 하는 문제였다. 가진 것이라고는 겨우 일주일 동안 마실 물밖에 없었다. 첫날 저녁, 나는 사람이 사는 곳에서 수천 마일 떨어진 사막 위에 누워 잠이 들었다. 넓은 바다 한가운데 뗏목을 타고 흘러가는 난파선의 뱃사람보다도 나는 훨씬 더 외로운 처지였다. 그러니 해 뜰 무렵 이상한 작은 목소리가 나를 불러 깨웠을 때 나는 얼마나 놀라웠겠는가. 그 목소리는 이렇게 말했다. "저..... 양 한 마리만 그려 줘요!" "뭐!" "양 한 마리만 그려 줘....." 나는 벼락이라도 맞은 듯 벌떡 일어섰다. 나는 열심히 눈을 비비고 주위를 조심스럽게 살폈다. 아주 신기한 꼬마 사람이 엄숙하게 바라보고 있었다.