[css] 긴 문장의 단을 나눠보자

안녕하세요. 플입니다.

오늘은 단을 나눠볼 거예요.

 

---

 1.  단

우선 단이란 무엇일까요?

 

이미지에서 빨간 부분이 보이시나요? 그 부분을 한 단 이라고 합니다.

잡지에서 저렇게 세로로 한 뭉텅이를 단(column/칼럼)이라고 부르고 단을 나눈다는 말은 단을 여러 개로 만들어 문장을 쪼개서 넣는다는 의미예요.

 

이미지를 보면 총 네 단으로 있는 것을 알 수 있죠.

 

---

 2.  웹에서 단 나누기

잡지에서는 알았는데 그럼 웹에서는 단을 어떻게 나눌까요? 

일단 예제를 위해 의미 없는 문장을 가득 채워줄게요.

 

https://ssimplay.tistory.com/179

[html] 의미 없는 문장 채우기

의미 없는 문장을 채우는 방법이 궁금하시다면 위의 링크에서 확인해주세요~

 

실행되는 화면에서는 이렇게 엄청난 문장이 나옵니다.

오.. 가독성도 좋지 않고 엄청 길고 그러네요. 

 

p{ column-count: 3; }

 

 

(다른 건 넘어가 주시고 column-count부분만 봐주세요)

 

단을 나누는 방법은 아주 간단합니다.

column-count라는 속성을 이용해주면 되는데요. 칼럼의 수를 정해주는 속성이에요.

column-count의 값은 원하는 단의 수를 숫자로 넣어주시면 된답니다. 간편하죠?

제가 값을 3이라고 넣었으니 3단이 되겠죠? 확인해볼까요?

 

3단이 된 걸 알 수 있죠?

내가 글을 쓴 태그에 column-count속성을 넣어주면 된답니다. 

 

단을 나눈 것만으로도 읽기가 좀 쉬워졌죠. 디자인은 여기서 조금씩 추가해주면 된답니다.

나중에 디자인하는 포스팅도 올려보도록 할게요~

 

---

그럼 이만.

총총.