🌈 '빔캠프 CSS'를 만나다

오늘은 유튜버 빔캠프 css 이종찬 대표님의 특강을 들었다.
사실 난 처음 뵙는 분이었다.
목요일 수업끝날 때, 호준 대표님 말씀으로는 대단한 분이 오신다고 하셔서 사실 걱정했다.
너무 어려운 내용을 배울까봐....
그.런.데 진짜 너무너무너무 재밌고 유익한 수업 시간이었다.
그동안 궁금했던 것들부터 시작하여 사소한 것, 생각치도 못했던 것 까지!!
강사님도 신나시고 우리들도 신나고 정말 유쾌한 수업이었다.

📕 초심자라면 CSS 순서를 지키자

1. 전체적인 덩어리를 먼저 나누자. (컨텐츠는 나중에!!)
2. 덩어리 구분을 위해 각각 시각화하자. (background-color, border 등등)
3. contents(내용물)를 넣기 이전에 공간을 마련하며 기본 레이아웃 스타일만 우선 짜자. (기본 margin / padding)
4. 요리재료(요소, 타입셀렉터 이용) 손질부터 먼저 해주자. 초기화를 통해 가장 담백한 상태로 만들기. (inherit, initial, unset, margin 0, padding 0)
5. 이후 class를 사용하여 섬세한 작업 시작.

📗 property 속성 초기값은 다 다르다!!

각 property의 initial(초기값)은 다 다름. 그걸 잘 파악하자.

1. margin : initial; = margin : 0;

---

2. width : initial; = width : auto; != width : 100%
   

.test1{
    width: auto; //부모 요소 영역을 벗어나지 않는다
    margin-left: 50px;
}
.test2{
    width: 100%; //부모 요소 영역을 벗어난다
    margin-left: 50px;
}

---

3. height : initial; = height : auto;
   contents기준(자식요소 기준)으로 너비가 가득참. 그러므로 height는 사용하는 것은 좋다고 보긴 어렵다(유지보수이 어려울 수 있음)

---

4. background-color : initial; = background-color : transparent;

📙 contents 사이즈만큼의 width를 주고 싶을때

1. 브라우저 고려해야할 경우

display : inline-block

2. 브라우저 고려안해도 될 경우

width : fit-content;

📘 margin 중첩 현상

block끼리만 생김.
block과 inline-block 사이에서는 일어나지않음.

부모와 자식간의 마진겹침 현상이 일어날 경우

section{
    background-color: lightskyblue;
    width: 300px;
}
div{
    margin: 20px;
    background-color: bisque;
}

해결 방법

1. 인터넷 익스플로러 고려할 경우

section{
    background-color: lightskyblue;
    width: 300px;
    overflow : hidden
}

2. 인터넷 익스플로러 고려하지 않을 경우

section{
    background-color: lightskyblue;
    width: 300px;
    display : flow-root
}

3. 모든 브라우저를 고려한 경우

section{
    background-color: lightskyblue;
    width: 300px;
    padding: 20px;
}
div{
    background-color: bisque;
	margin-bottom : 20px
}
div:last-child{
	margin-bottom:0;
}

📒 inline elements vs block elements

inline

• margin: 상하 안생김, 좌우 생김.
  why? 단순 text같은 content의 경우 html에서 띄어쓰기가 하나밖에 적용안됨.
  이를 해결하기 위해 css에서 좌우에만 margin적용이 가능.
• margin 중첩 현상 X
• padding : text내용이 길 경우, 줄 바꿈시 이상하게 적용되고 부모 영역을 넘어감. (border도 비슷하게 적용)
• width, height : 적용 X (길이 개념이므로)
• 가로 정렬 : text-align : center;
  
  

inline-block

• margin: 상하좌우 다 생김
• margin 중첩 현상 X
• baseline 기준 : text
• padding : 부모 영역 벗어나지않음
• width, height : 적용 O
• 가로 정렬 : text-align : center;
  
  

block

• margin: 상하좌우 다 생김
• margin 중첩 현상 O
• padding : 부모 영역 벗어나지않음
• width, height : 적용 O
• 가로 정렬 : margin : 0 auto;