CSS

CSS : Cascading Style Sheets

HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다.

✏️ css 순서 가이드
1. 전체적인 큰 틀, 덩어리(Header, Contents, Footer ...)를 먼저 나눠라. 무작정 콘텐츠를 채워 넣는 것은 좋지 않다.
2. 시각적으로 구분을 주면 좋다. background-color, border
3. 기본(layout) 스타일만 작성한다. 콘텐츠를 넣기 전에 공간부터 마련한다. margin, padding
4. 요소, 타입셀렉터 등을 이용해서 베이스 먼저 준비하기.
    초기화를 통해 정리한다. initial, inherit, margin 0, padding 0
5. class를 사용해서 섬세한 작업을 시작한다.

div 밖으로 생기는 여백은 기본 스타일 시트(user agent stylesheet)로 인해 body에 margin:8px 가 적용되어 있기 때문이다. 참고로 브라우저마다 기본 스타일 시트가 다르기 때문에 같은 디자인도 다르게 보일 수 있다. 따라서 초기화를 해줘야 한다.

여기서 잠깐, 콘텐츠가 왼쪽 정렬인 이유는 뭘까? 
우리나라는 글자를 왼쪽에서 오른쪽 방향으로 읽는다. 이러한 특성을 반영한 것이라고 할 수 있겠다. 
단순히 코딩만 하는 것이 아니라 브라우저 관점으로 시각을 넓히면 best!

initial, inherit

콘텐츠에 width 값을 주지 않았을 때, 콘텐츠는 부모 요소의 너비를 기준으로 가득 차게 된다.
그래서 body에 margin:0, margin:initial로 초기값을 준다.
그런데 initial은 IE가 지원하지 않기 때문에 속성 표시가 안되므로 대중적으로 margin:0를 사용한다.
값을 바로 0으로 줘도 좋지만 키워드를 보는 연습을 하자.

inherit은 상속이 지원되는 속성을 초기화해 줄 때 사용한다.
모든 요소가 해당되는 것은 아니다. (margin, padding, float, position, border 등의 속성은 하위 요소에 상속되지 않는다.) 상속 지원이 안되면 initial을 쓰자.
ex. 부모의 돈을 상속받고 싶어!

✏️ 정리
initial : 초기값
inherit : 부모 요소에서 값을 상속하도록 지정

property 상속

font-size를 body에 적용하면 자식 요소(wrapper, header, contents...)에 프로퍼티(속성)가 상속된다.
통상적으로 기본 폰트 사이즈는 16px인데 2em을 주면 2배가 된다. (h1의 폰트 사이즈는 16px X 2)

reset css

초기화 코드는 별도 관리를 위해 css 상단에 작성한다.

body, p, ul {
  margin: 0;
  padding: 0;
}

모든 형태의 모든 요소를 선택하는 전체 선택자(Universal Selector) * 를 사용하는 것도 좋지만 개별적으로 사용하면서 공부해보자!

* {
  margin: 0;
  padding: 0;
}

box model을 이루는 기본적인 속성 5가지

div {
  width: 20px;
  height: 20px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

• width:auto : 부모 요소의 너비 기준으로 가득 찬다.
• height:auto : 부모 요소가 아니라, 자식 요소 기준으로 콘텐츠의 크기만큼 차지한다 (width:auto와 다름)
• margin : 바깥 여백
• padding : 안쪽 여백
• border : border를 주면 콘텐츠의 전체 크기도 커진다.

margin: auto

div는 block level 요소이다.
margin:auto는 block 요소로서 가로 한 줄을 렌트했다고 할 수 있는데 그 말은 즉, 남는 공간은 자동으로 여백으로 취하겠다는 의미로 볼 수 있다.
그렇다면 이 div를 가운데 정렬하려면 아래와 같이 사용할 수 있다.
하지만 세로 가운데 정렬은 불가능하다. 콘텐츠 양(높이)에 따라 영향을 받기 때문에.

div {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

div {
  width: 200px;	  /* width값이 꼭 있어야 함 */
  magin: 0 auto;  /* 0은 상하, auto는 좌우 */
}

width:100% ? width:auto ?

둘 다 부모의 크기만큼 사용 가능한 공간을 가득 채운다. 두 개는 비슷해 보이지만 엄밀히 따지자면 다르다.
100%에 margin-left를 주면 전체적으로 오른쪽으로 가면서 콘텐츠의 너비를 오버한다.
auto에 똑같이 margin-left를 주면 자동으로 margin을 포함해서 오른쪽으로 밀리는데 콘텐츠의 너비를 오버하지 않는다.

text-align: center ?

"h1과 p를 가운데 정렬할 때, text-align:center를 줘야 해!" 는 오답이다.
h1과 p 는 block level 요소이므로 margin:0 auto를 줘야 한다.
text-align:center는 text만 가운데 정렬된다.

<h1>, <p>는 상하단에 margin 존재하므로 디자인적으로 보면 초기화해줘야 좋다.

inline elements, block-level elements

text는 width, height 개념이 존재하는 것이 아니고 길이로 보는 것이 맞다.
display:block은 inline을 block 요소로 만든다. block은 한 줄에 하나씩만 가능하다.
한 줄에 일렬로 나열하려면 display:inline-block를 사용한다. text의 baseline을 기준으로 한 줄에 배치한다.

block-level의 마진 겹침 현상

block-level elements 2개가 인접해 있을 때는 인접한 상하단 margin은 겹치도록 값이 하나로 통일되게끔 css에서 의도적으로 값을 조정해 준다. 더 높은 값의 마진 값이 적용된다.

부모 요소-자식 요소 간에도 마진 겹침 현상이 발생한다.

<div class="wrapper">
  <div class="contents">
    <div class="section">
    </div>
  </div>
</div>

부모(wrapper) margin이 100px, 자식 margin이 30px라면 더 큰 쪽으로 마진이 겹친다.
H => 8 모양으로 만들려면 wrapper에 padding:1px를 준다. 하지만 좋은 방법은 아님.
또 다른 방법들 (부모 요소에게 적용한다)

• border : 1px solid black
• overflow : hidden   (IE 고려)
• display : flow-root   (밝은 미래, IE가 멸망한 세상의 히어로)

.contents {padding: 20px}, .section:last-child {margin-bottom: 0px} 주는 방법도 있다!

#행복한 코딩을 위해 참고하자~ https://youtu.be/c19Mjg-ivxc