CSS에서는 신문의 기사와 같은 텍스트의 다단 편집을 쉽게 만들 수 있다.
| 속성 값 | 설명 |
| column-count | 가로로 나열될 텍스트의 단의 개수 |
| column-gap | 단과 단 사이의 여백 |
| column-rule | 단과 단 사이의 구분선 구분선의 모양, 두께, 색상을 각각 지정할 수 있음 |
| column-span | 다단 안에 포함된 요소를 다단 편집에서 해제시킴 (제목을 나타내는 h2 요소 등) |
| column-width | 브라우저에 대한 최소 너비 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>다단편집</title>
<style>
.festival{
text-align: justify;
padding: 20px;
background-color: antiquewhite;
column-count: 3;
column-gap: 30px;
column-rule: 2px dashed chocolate;
}
.festival h2{ column-span: all; text-align: center; margin-bottom: 20px;}
</style>
</head>
<body>
<div class="festival">
<h2>Festival - 엄정화</h2>
<p>이제는 웃는 거야 Smile again
행복한 순간이야 Happy days
움츠린 어깨를 펴고 이 세상 속에
힘든 일 모두 지워버려
슬픔은 잊는거야 Never cry
뜨거운 태양 아래 Sunny days
언제나 좋은 일들만 가득하기를 바라면 돼
항상 똑같은 생활 속에 지쳐가지만
나를 누르는 힘든 일에 쓰러지지만
고개를 숙일 건 없어
그 속에 행복있는 걸 찾으면 돼
나의 주위를 둘러 봐 힘겹다 느낄 때
맑은 어린아이의 모습에 미솔 닮아 봐
이제는 웃는 거야 Smile again
행복한 순간이야 Happy days
움츠린 어깨를 펴고 이 세상 속에
힘든 일 모두 지워버려
슬픔은 잊는거야 Never cry
뜨거운 태양 아래 Sunny days
언제나 좋은 일들만 가득하기를 바라면 돼
아주 가끔은 사랑 있어 즐겁게 웃고
또 어떤 날은 사랑으로 울기도 하고
쉬운 건 하나도 없어
그 속에 기쁨 느끼면 그걸로 돼
조금 낮추어 돌아봐 삶이 무거울 때
아무 말없이 뛰고만 있는 많은 사람들
이제는 웃는 거야 Smile again
행복한 순간이야 Happy days
움츠린 어깨를 펴고 이 세상 속에
힘든 일 모두 지워버려
슬픔은 잊는거야 Never cry
뜨거운 태양 아래 Sunny days
언제나 좋은 일들만 가득하기를 바라면 돼
라라라 Smile again
라라라 Happy days
커다란 하늘처럼만 더 크게 웃고
더 크게 생각하는거야
눈물은 잊는거야 Never cry
푸르른 햇살처럼 Sunshine days
언제나 좋은 일들만 가득하기를 기도할게
</div>
</body>
</html>Festival - 엄정화
이제는 웃는 거야 Smile again 행복한 순간이야 Happy days 움츠린 어깨를 펴고 이 세상 속에 힘든 일 모두 지워버려 슬픔은 잊는거야 Never cry 뜨거운 태양 아래 Sunny days 언제나 좋은 일들만 가득하기를 바라면 돼 항상 똑같은 생활 속에 지쳐가지만 나를 누르는 힘든 일에 쓰러지지만 고개를 숙일 건 없어 그 속에 행복있는 걸 찾으면 돼 나의 주위를 둘러 봐 힘겹다 느낄 때 맑은 어린아이의 모습에 미솔 닮아 봐 이제는 웃는 거야 Smile again 행복한 순간이야 Happy days 움츠린 어깨를 펴고 이 세상 속에 힘든 일 모두 지워버려 슬픔은 잊는거야 Never cry 뜨거운 태양 아래 Sunny days 언제나 좋은 일들만 가득하기를 바라면 돼 아주 가끔은 사랑 있어 즐겁게 웃고 또 어떤 날은 사랑으로 울기도 하고 쉬운 건 하나도 없어 그 속에 기쁨 느끼면 그걸로 돼 조금 낮추어 돌아봐 삶이 무거울 때 아무 말없이 뛰고만 있는 많은 사람들 이제는 웃는 거야 Smile again 행복한 순간이야 Happy days 움츠린 어깨를 펴고 이 세상 속에 힘든 일 모두 지워버려 슬픔은 잊는거야 Never cry 뜨거운 태양 아래 Sunny days 언제나 좋은 일들만 가득하기를 바라면 돼 라라라 Smile again 라라라 Happy days 커다란 하늘처럼만 더 크게 웃고 더 크게 생각하는거야 눈물은 잊는거야 Never cry 푸르른 햇살처럼 Sunshine days 언제나 좋은 일들만 가득하기를 기도할게
'CSS' 카테고리의 다른 글
| CSS-레이아웃Ⅰ: float (0) | 2020.08.26 |
|---|---|
| CSS-요소의 정렬 : float (0) | 2020.08.26 |
| CSS-애니메이션(Animation) Icon 예제 (0) | 2020.08.24 |
| CSS-애니메이션(Animation) (0) | 2020.08.24 |
| CSS-속성전환(transitions) (0) | 2020.08.24 |
댓글