홈페이지 레이아웃 제어와 영역 분배하기 (column)

각 컨테이너 요소들로 화면을 제어해 준 후, 다단을 나누어 해당 하는 넓이에 맞게 차례대로 컨텐츠를 나열하는 것을 칼럼(column)이라고 합니다. 쉽게 생각해 신문과 같은 나누어 기입하는 나열 형식을 말하는데, 웹 페이지에서 많이 쓰이는 이미지와 설명을 보기좋게 분야별로 나열하는 배치입니다. 

이와 같은 칼럼은 아래와 같은 명령문으로 직접 나열하는 것을 제외하고, 그리드 형식인 부트스트랩 같은 자동 레이아웃을 rel속성으로 첨부해 도움을 받는 것이 훨씬 쉽고 간편한데, 그 전에 칼럼 속성의 의미를 인지하고 있어야 사용하기 편리합니다.

 

---

 

column

행과 열 중에서, 열 속성을 지정하는 칼럼(column)은 줄여 col 이라는 표기로 통칭 많이 사용됩니다. 

그리드라고 부르는 것이 좀 더 어감이 쉬운데, 

홈페이지를 제작하기 전에 최대,최소 사이즈, 반응형 사이즈등을 고려한 3단계인 ​ 

1. PC로 보여지는 화면, 
2. 태블릿으로 보여지는 화면, 
3. 핸드폰으로 보여지는 화면 ​ 

이렇게 3화면에 보여지는 것을 고려해 홈페이지 그리드를 제작 하는데 있어, 컨테이너 넓이 값과 사이를 몇 칸 띄워 배치할지를 정하는데, 칼럼의 넓이와 몇개의 컨테이너를 배치 하는지를 정수를 기입해 주면 됩니다.

 

반응형

 

columns: auto|column-width column-count;

div {
  -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
  -moz-columns: 100px 3; /* Firefox */
  columns: 100px 3;
}

▲ 최소 폭의 값 100px로 3개의 컨테이너를 배치한다.

※ 폭을 지정하지 않고 칼럼의 카운트속성만 작성하면, 미디어 쿼리나 다른 규칙의 필요가 없이 컨테이너가 정해진 값에 자동으로 분리됩니다.

 

[속성 값]

column-count	column-gap	column-rule
넓이를 카운트로 제어한다.	열의 사이 넓이를 제어한다.	열 사이의 스타일과 색상을 지정한다.
column-count: 정수값;	column-gap: 넓이값 (길이 기본단위사용)	column-rule: 넓이 선의종류 컬러코드;
몇개의 다단으로 채울것인지 제어합니다.	띄워지는 사이 넓이를 제어합니다.	가운데 들어갈 선의 넓이와 선의 종류, 컬러등을 지정해줍니다.

<style> 
.newspaper {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;

  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
  -moz-column-gap: 40px; /* Firefox */
  column-gap: 40px;

  -webkit-column-rule: 4px double #ff00ff; /* Chrome, Safari, Opera */
  -moz-column-rule: 4px double #ff00ff; /* Firefox */
  column-rule: 4px double #ff00ff;
}
</style>

 

---

 

column 속성 값과 그리드의 정의 

 

1. 기본 column값은 전체적으로 홈페이지를 나누는 데 많이 사용하기 때문에 클래스 범위별로 지정해 관리하는게 좋습니다. ​ 
2. 칼럼을 나누고 나서 클래스를 1개부터 12개단위로 쪼개, 일정 넓이를 미리 지정하고 제작 해 놓고 즉시 컨텐츠를 입힐 수 있게 홈페이지를 제작하는것이 훨씬 수월합니다. ​ 
3. 또한 column은 홈페이지를 제작하기 전 그리드의 형태로도 이야기하는데,12개의 칼럼으로 그리드를 나누었으면 12-col / 24개로 나누었으면 24-col 등으로 부르고 있습니다. ​ 

 

※ 그리드 시스템을 적용해 홈페이지를 만들기 전 칼럼(column)의 의미는 필수로 숙지하고 있어야 하는 사항입니다. 세계적으로 많이 사용하는 아래 960Grid사이트를 참고해서 칼럼과 그리드의 활용법을 참고 해 보세요.

960 Grid System