HTML / CSS part를 공부하면서 배우게된 레이아웃에 대한 내용을 정리.
배움 출처 : https://ko.learnlayout.com/box-model.html

Index

• display 속성
• box model
• position 속성 : relative, absolute, fixed
• inline, inline-block, block
• float

I. display

display 는 css에서 레이아웃을 제어하기 위해 필요한 가장 중요한 property이다.

1. display 값

• block
• inline
• none
• inline-block
• flex (21.01.13 추가 내용)

사용자가 임의로 설정하지 않았을 경우 기본적으로 사용된 tag의 성질을 따른다.

block이 기본 설정인 tags

• div
• p
• form
  ..
  
  

inline이 기본 설정인 tags

• span
• a
• img
  ..

2. 그 외 다른 display 값

• list-item
• table
  ..

3. display 유의점

display: none
visibility: hidden

이 두가지 코드의 결과는 모두 "보이지 않게 하기" 이다.
단!
display: none은 해당 element가 아예 없는 존재가 되도록 하지만,
visibility: hidden 의 경우 해당 element가 존재하되, 보이지 않아 공간은 그대로 차지한다.

또한 기본이 block 성질인 div를 inline요소로 사용하는것은 그리 효율적이다 라고는 못하지만.. 이를 이용해 _li요소를 inline 형태로 바꿀순 있다!_ (목적에 따라 사용하는것이 좋을때도, 의미없을 때도 있다는걸 항상 기억하자!)

4. inline-block

inline element와 비슷하지만 너비를 지정할 수 있다.
예제로 보면 이해하기가 더 쉽다!

예제1: 박스 그리드 활용

float과 clear를 사용하여 박스그리드와 그리드에 포함되지 않는 컨테이너 구분

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

inline-block을 사용

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

두가지 방법의 공통된 결과

예제2: 레이아웃에 활용

주의할 점이 있다.
1. inline-element는 vertical-align property의 영향을 받는다. (기본적으로 top으로 설정하려는 경향이 있다.)
2. 각 column의 너비를 설정해 주어야 한다.
3. HTML 각 column 사이에 공백이 있으면 column 간에 틈이 생긴다.

nav {
  display: inline-block;
  vertical-align: top;
  width: 25%;
}
.column {
  display: inline-block;
  vertical-align: top;
  width: 75%;
}

5. flex (21.01.13 추가 내용)

도움 받은 정보 출처 : https://heropy.blog/2018/11/24/css-flexible-box/
이에 대한 내용은 실습하면서 내가 실제 사용한 부분에 대해서만 되내이려 한다. (내용이 너무 많기 때문)
display 값에는 flex 값도 있다.
flex를 사용하기 위해선 container와 item 두가지 요소가 있어야 한다.

container와 item

container를 display: flex 로 지정해줌으로써 안에 속한 item들의 정렬이 바뀐다.
여러가지 설정법 중 두가지를 되내이면

1. display: flex;
   • container들이 block 요소처럼 (수직) 쌓인다.
2. display: inline-flex;
   • container들이 inline 요소처럼 (수평) 쌓인다.

위 설정은 item이 아닌 container 양상에 해당하는 것임을 헷갈리지 말자!

flex 사이 간격

크게 두가지만 살펴보면

1. justify-content: space-between;
   - item들 사이 간격을 일저하게 한다.
2. justify-content: space-around;
   - item들 둘레의 간격을 일정하게 한다.

1번을 쓰면 사이간격만 조절되고 / 2번을 쓰면 첫번째와 마지막 child를 포함하여 모든 item의 테두리 간격이 조절된다.

II. box sizing

새롭게 탄생한 CSS property!

위 그림은 놀랍게도 width 값이 같다!! 단, padding값이 서로 다르게 설정되어 있다.

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

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

이런 현상때문에 실제 일할때 많은 어려움이 있었다고 한다.

1. box sizing 적용 효과

다음과 같이 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;
}

그 결과 더이상 padding과 테두리가 너비를 늘리지 않는다.

webkit ? moz ?

위에서 말했듯 box-sizing은 새로게 도입된 css property다. 실험적인 요소이기 때문에 이를 활성화 하기 위해선 아직까지 위와 같은 코드를 붙여주어야 한다.

팁

1. 모든 요소에 다음과 같이 box-sizing을 적용하려면
   css 에서 선택자를 해당 태그가 아닌 * 로하여 모든 대상으로 지정하면 된다.
2. 위 property는 IE8+ 에서만 적용된다.

III. position

좀 더 복잡한 레이아웃!

1. position 값

position: ###;

• static = 가장 기본 값 (위치가 지정됐다고 취급하지 않는다.)
• relative = 별도의 property가 필요하다. (top, right, bottom, left)

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

위 코드와 같을때, relative2 요소는 relative1 요소에 대해 윗부분은 20px만큼 겹치고, 왼쪽에서부터 20px 떨어져 있는 위치에 존재하게 된다.

• fixed = viewport에 상대적으로 위치가 지정되며 스크롤에 상관없이 고정된 위치에 존재한다. / property 가 필요하다. (top, right, bottom, left)
• absolute = "fixed"와 달리 가장 가까운 곳에 위치한 조상 element에 상대적으로 위치가 지정된다. (만약 해당되는 조상 element가 없으면 document body를 기준으로 삼아 스크롤에 따라 움직인다.)

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

IV. float

레이아웃을 잡는 데 사용하는 또 하나의 css property
이미지 주위를 텍스트로 감싸기 위해 만들어 졌다.

예시)
이미지에 float: right;를 설정하면 이미지는 화면 오른쪽에, 글은 이미지공간을 비켜선채로 왼쪽 부분으로 보인다.

1. clear

float의 동작 방식을 제어하는데 중요한 property

어떤 element가 float: left로 지정되어 있지만, margin으로 인해 공간이 띄어졌을때 그 다음 element가 그 element를 포함시켜 출력될 수 있다.
실제 section 부분은 div 다음에 있는 것이지만 화면 상 이렇게 나오는 것이다.
이를 해결하기 위해 section에 clear를 넣어준다!

clear: left;

그러면 left로 지정된 float 값을 무시하여 다음과 같이 나오게 된다. (left, right, both)

clearfix

이미지가 그것을 담고있는 element보다 더 높을 경우 element밖으로 삐져나올때 사용하는 개념.
요즘 나온 개념!

.clearfix {
  overflow: auto;
}

주의 : 요즘 나온 브라우저에만 적용된다. (IE6은 추가 코드 작성해야 한다.)

2. float으로 전체 레이아웃 조정

position처럼 작동하기

position을 이용했을 때

.container {
  position: relative;
}
nav {
  position: absolute;
  left: 0px;
  width: 200px;
}
section {
  /* position is static by default */
  margin-left: 200px;
}

floatd을 이용했을 때

nav {
  float: left;
  width: 200px;
}
section {
  margin-left: 200px;
}

끝맺음

CSS는 아직도 최신 기술이 계속 개발되고 있다. 당장 지금만 해도 flexbox같은 개념들로 더 멋진 column을 설정할 수 있다고 한다! 아직 완전히 상용화는 되지 않아 모든 브라우저에서 활성화할수 있는건 아닌거 같지만...
일단 이정도 까지 되새기며 공부를 마치고, 앞으로 개발하면서 꾸준히 새로운 개념들을 찾아 공부해야 함을 다시한번 느꼈다.