CSS Layout?

Layout을 배워야하는 이유

페이지에 콘텐츠가 기다란 한 줄로만 나오게 하고 싶다면 아무런 레이아웃을 지정하지 않는 방법도 괜찮습니다. 하지만 사용자가 브라우저 창을 굉장히 넓게 키운다면 콘텐츠를 읽기가 굉장히 불편해질 것입니다.
예전에는 table을 이용하여 layout을 만들기도 했으나 html과 css 본연의 취지와 맞지않다. 그리고 반응형 웹 페이지에 대응하기 어렵다.
-> CSS를 사용하여 layout을 구성하는 것이 바람직하다.

layout의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것이다.

diplay property

• display는 CSS에서 레이아웃을 제어하기 위한 가장 중요한 프로퍼티
• 대부분의 엘리먼트 기본값은 보통 block(블록 (레벨) 엘리먼트)이나 inline(인라인 엘리먼트)
• 언제든지 이러한 기본값을 재정의할 수 있습니다
  • 인라인 div를 만드는 것은 적절하진 않음
  • 흔히 볼 수 있는 예로 가로 메뉴를 만들기 위해 인라인 li 엘리먼트를 만드는 것이 있음

1. block

• 블록 레벨 엘리먼트는 새 줄에서 시작해 좌우로 최대한 늘어납니다.
• div, p, form 등이 있고, HTML5에서는 header, footer, section 등이 새롭게 추가됨
• div는 표준 블록 레벨 엘리먼트

2. inline

• 해당 단락의 흐름을 방해하지 않은 채로 텍스트를 감쌀 수 있습니다.(content크기만큼만 차지)
• span이 표준 인라인 엘리먼트이고 a는 링크에 사용하는 가장 흔한 인라인 엘리먼트

3. none

• script와 같은 일부 특별한 엘리먼트에서는 none을 기본값
• 이 값은 자바스크립트에서 엘리먼트를 실제로 삭제하고 재생성하지 않고도 엘리먼트를 보이고 감추는 데 흔히 사용됩니다.
• visibility와 다름
  • display를 none으로 설정하면 엘리먼트가 마치 존재하지 않는 것처럼 페이지가 렌더링
  • visibility: hidden;으로 설정하면 엘리먼트가 감춰질 테지만 해당 엘리먼트는 완전히 보이지 않게 되더라도 여전히 공간을 차지합니다.

4. 그 외

• list-item, table, inline-block, flex 등이 있다.(참고)

block level element

#margin {
	width: 600px;
	margin: 0 auto;
}

• 블록 레벨 엘리먼트의 width를 설정하면 컨테이너의 좌우 가장자리로 늘어나지 않게 할 수 있습니다.
• 그런 다음 좌우 마진을 auto로 설정해 해당 엘리먼트를 컨테이너 안에서 가로 중앙에 오게 할 수 있습니다.(나머지 공간은 두 마진에 균등하게 나눠질 것입니다.)
• 브라우저 창이 엘리먼트 너비보다 좁을 때 유일하게 문제가 발생 -> 브라우저에서는 페이지에 가로 스크롤바를 만들어 이 문제를 해결

#margin {
	max-width: 600px;
	margin: 0 auto;
}

• width 대신 max-width를 사용하면 브라우저가 작은 창을 처리하는 방식을 개선할 수 있습니다.
• 모바일 환경에서도 사용할 수 있게 만들 때 중요합니다.

  tip! box-sizing
  여러 박스들을 만들다 보면 각각의 border과 padding값이 달라서 똑같은 width를 주더라도 사이즈가 달라지게 된다.

.simple {
	width: 500px;
	margin: 20px auto;
}

.fancy {
	width: 500px;
	margin: 20px auto;
    padding: 50px;
    border-width: 10px;
}

• 예전에는 일일이 다 계산해서 바꿔줘야 했다...
• 엘리먼트에 box-sizing을 지정하면 해당 엘리먼트의 패딩과 테두리가 더는 너비를 늘리지 않습니다.

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

• 다소 근래에 생긴 프로퍼티라서 브라우저마다 사용법이 달라질 수 있다. 예제에서 한 것처럼 -webkit-이나 -moz- 접두사를 붙여야 할 수도 있다.

position property

• position 프로퍼티에는 다양한 값이 있는데, 각 값의 이름은 제대로 지어지지 않아서 기억하기가 불가능합니다.

1. static

• static은 기본값입니다.
  -정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며, static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현합니다.

2. relative

.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

• relative는 별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작합니다.
• 상대 위치가 지정된 엘리먼트에 top이나 right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정됩니다.
• 다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않을 것입니다.(겹쳐지기 가능)

3. fixed

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

• 고정(fixed) 엘리먼트는 부모 요소와 관계없이 브라우저 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻입니다.
• relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용됩니다.
• 고정 엘리먼트는 평소대로라면 있었을 법한 공백을 페이지에 남기지 않습니다.(겹치기 가능)
• 모바일 브라우저의 경우 고정 엘리먼트 지원이 굉장히 불안정합니다.

4. absolute

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

• absolute는 뷰포트에 상대적으로 위치가 지정되는 게 아니라 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다는 점을 제외하면 fixed와 비슷하게 동작합니다.
• 절대 위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트(static이 아닌 element)가 없으면 문서 본문(document body)을 기준으로 삼고(부모가 만약 static이라면 빠져나와서 본문을 기준으로 상대위치 지정)
• 페이지 스크롤에 따라 움직입니다.

tip! display property로 위치를 조정했을때 static element와 겹치는걸 원하지 않는다면 static element에 margin값을 줘서 겹치지 않게 해준다.

static을 제외하고는 다른 요소위에 덮어쓰게 되는데 이런 특성을 부유 또는 부유 객체라 한다.

float property(협업에서 거의 사용X, 유지보수 어렵고, 조작 어렵다)

img {
  float: right;
  margin: 0 0 1em 1em;
}

• float은 다음과 같이 이미지 주위를 텍스트로 감싸기 위해 만들어진 것입니다.
  

clear property

• clear property는 float의 동작 방식을 제어할 수 있다.
• 참고

overflow property(clearfix)

• 이미지가 container에서 넘칠때 container크기를 이미지에 맞춰줌\
• 참고
• 참고
• 참고

inline-block element

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

• 원래는 위와 같은 방법으로 float을 이용하여 박스 그리드를 만들어줄 수 있었다.
• 다음 요소에 clear property를 줘서 겹치지 않게 해줘야된다.

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

• 위와 같이 inline-block을 사용하면 clear을 사용하지 않고 박스 그리드를 쉽게 만들 수 있다.
• inline-block 엘리먼트는 inline 엘리먼트와 비슷하지만 너비와 높이를 지정할 수 있습니다.
• vertical-align property의 영향을 받기 때문에 위치를 지정해줄 수 있다.

반응형 디자인

• 모바일 사용자가 데스크탑 사용자보다 많은 상황을 감안하여 화면의 크기에 따라 적절히 화면 구성을 변화시키는 반응형 웹 디자인(Responsive Web Design)는 모던 웹 사이트의 필수 사항
• 미디어 쿼리는 이렇게 하는 가장 강력한 도구

@media (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media (max-width:599px) {
  nav li {
    display: inline;
  }
}

Column property

• column-count
• column-gap

.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}

Reference

1. CSS 레이아웃을 배웁시다
2. Poiemaweb 2.18 CSS3 Layout 레이아웃