끈기의 힘 : 뉴비에서 풀스텍으로

[인프런/생활코딩] 섹션5. Multi column(다단) 기능 본문

프로그래밍 언어/CSS 공부

[인프런/생활코딩] 섹션5. Multi column(다단) 기능

쓰리별 2021. 3. 4. 19:13

주로 신문과 같이 화면의 크기가 큰 매체에서 사용하는 전통적인 레이아웃 기법.

column 즉, 열을 조각조각 나눠서 좀더 읽기 편하게 만드는 기법.

이런 식의 예제

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="author" content="threestar">

  <style>

 

  </style>

</head>

<body>

 

</body>

</html>

 

그 다음 <body> 바로 밑에 class 속성값이 column인 div 태그를 하나 생성. 이 div 태그 안에 lorem1000을 추가.

(lorem1000을 쓰고 탭키를 누르면 아무 단어 1000개가 생성된다!)

lorem1000 을 추가 .

그다음 CSS영역에 다음과 같이 추가하면!

.column{

  column-count:2;

} (화면을 늘리건 줄이건 2개로 소분된 화면은 유지.) 결과는 그 많은 텍스트가 2개로 소분된다. 아래처럼.

 

.column{   column-count:2; }

 

근데 약간 텍스트가 들쭉날쭉한 거 같아서 나란히 보이게끔 하고 싶으면 저번에 배웠듯,

text-align:justify; 값을 주면 되겠지! (justify값은 단어 사이의 폭을 넓히는 대가로 문장 전체가 자연스럽게 보이도록 하는 효과) 다음과 같이.

text-align:justify; 추가

그다음에 해볼 것은 우리가 이 컬럼에 count(숫자)로 지정할 수도 있지만,

일단 column-count엔 주석처리를 하고 그 대신 column-width값을 줘보자. ex) 200px

즉, 컬럼의 폭을 200픽셀로 지정한 것. 그럼 웹브라우저는 우리가 지정한 200픽셀의 크기에 맞춰서 단을 나눠준다!

그래서 우리가 화면의 크기를 줄이거나 늘리면 그에 맞게 단의 수(컬럼의 수)가 변하게 된다!!

 

이 상황에서 column-count의 주석처리를 풀고 이 값을 4로 지정하면, 최대 4개 이상의 컬럼(단)은 생성되지 않는다! (다만, 화면의 크기를 줄이면 당연히 단이 줄어들겠지만 왜냐? count와 width값을 동시에 사용했으니까 만약 count값만 사용했으면 화면을 줄여도 단(컬럼)의 수는 줄어들지 않는다! ★) 기존값 2였다면 2개 이상의 컬럼은 생성되지 않을 것이란 의미. 다시 column-count값 4로 돌아와서,

 

CSS는 200픽셀을 유지하기 힘들어지는 지점(화면의 크기를 줄인다면)에서 컬럼을 하나 줄이는 대가로 200px 이상이면서 4개의 컬럼 이하인 상태를 유지하기 위해 노력한다는 의미이다.

column-count와 column-width값은 각각 독립적으로 사용가능하다.

 

만약, 어떤 컬럼의 ‘폭’을 중시한다면 count가 아닌 width만 사용하면 되고,

‘단’을 중요시하면 column-count만 사용하면 된다! 그 외에 2가지를 혼합해서 사용해도 ok!

어찌되었든 둘중 하나는 꼭 써야 한다.

 

그다음에 count-width값에 주석처리를 하고, count값만 있는 상태에서 다음과 같이 컬럼들 사이의 빈 여백(★ 단과 단 사이의 여백이다.)들이 보일텐데, 보기 아쉽다. 라고 한다면, 이 빈 여백(★ 단과 단 사이의 여백)에 대해서 어떻게 처리해야?? column-gap로 컨트롤할 수 있다. ex) 30px;을 줘보자. 그러면 좀 더 여유롭게 컬럼이 나눠지는 것을 볼 수 있다.

 

제일 중요한 건 column-count, width, gap / text-align 같은 애들이고,

 

좀 덜 중요한 애들은 column-rule-style이란 애가 있다. ex) column-rule-style:solid란 값을 주면

컬럼들 여백 사이에 솔리드한 단선이 생성된다. solid가 아닌 dotted로 하면 점선이 생김. dashed로 하면 절취선 모양이 된다! 

column-rule-style:solid

추가로 column-rule-width:~px;로 하면 선의 굵기를 조절할 수 있게 된다.

추가로 선에 색을 주고 싶으면 column-rule-color:blue;처럼 설정하면 됌!

 

이어서 div태그 안에 있는 내용에 h1 태그를 통해 특정 부분만을 강조하고 싶다고 한다면(제목을 만들어주고 싶다면),

아무 곳에 h1태그로 제목인 것처럼 감싼 예제

예를 들어, 위의 상황에서 이 h1으로 제목을 준 것이 컬럼에 갇히지 않고 독립되게, 즉 제목은 컬럼을 초월되게 표현해주고 싶다면 그 뛰어넘고 싶은 대상의 CSS 영역에 다음을 추가해주면 된다. 즉 여기선 h1의 CSS 영역이겠지?

h1{

  column-span: all;

} (이렇게)

column-span: all;

그러면 h1에 있는 내용은 컬럼에 구애받지 않고 자유롭게 자신의 위치를 찾아가게 된다!

비단, 신문같은 것에 쓰이는 속성이 아니라, 이미지에도 여러 단을 통해서 설명하는 것에도 쓰일 수 있는 것이

‘멀티 컬럼’이다!

 

pinterest.com처럼 멀티 칼럼을 통해 스타일 레이아웃 만들 수도 있다!!

https://opentutorials.org/module/2398/13712주소를 통해 더 공부하자 ★★★

 

핀터레스트 스타일 레이아웃 만들기 (masonry) - 겁나 빠른 웹 레시피

소개 masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유 서비스인 핀터레스트가 인기를 끈 이후에 핀터레스트와 같은 스타일의 레이아웃이 크게 인기를 끌었는데요. 이러

opentutorials.org

https://caniuse.com/ 를 통해 아직도 사용해도 되는지의 속성들에 대해 검색해보기!

 

Can I use... Support tables for HTML5, CSS3, etc

 

caniuse.com

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="author" content="threestar">

  <style>

    .column{

      column-count:4;

   /* column-width: 200px; */

      text-align: justify;

      column-gap: 30px;

      column-rule-style: dotted;

      column-rule-width: 5px;

      column-rule-color: blue;

      }

      h1{

       column-span: all;

      }

  </style>

</head>

<body>

  <div class="column">

    솰로솨라라라라 <h1>consequuntur eveniet facere eius.</h1> 솰라솰라솰라

  </div>

</body>

</html> 끝.

 

저작자표시 (새창열림)

'프로그래밍 언어 > CSS 공부' 카테고리의 다른 글

[인프런/생활코딩] 섹션5. float (2) - holy grail layout  (0) 2021.03.04
[인프런/생활코딩] 섹션5. float (1) - 기본  (0) 2021.03.04
[인프런/생활코딩] 섹션5. 미디어쿼리(Media query) - 반응형 디자인  (0) 2021.03.04
[인프런/생활코딩] 섹션5-4~5. flex : holy grail layout? flex 기타 속성들?  (0) 2021.03.02
[인프런/생활코딩] 섹션5-1~3. flex_diplay 속성? flex-direction? flex-grow & shrink??  (0) 2021.03.02
'프로그래밍 언어/CSS 공부' Related Articles more
Comments