[아티클 프로젝트 047] 취준생이 반드시 알아야 할 프론트엔드 지식들 -CSS

취준생이 반드시 알아야 할 프론트엔드 지식들 -CSS 

 

 

Box Model

box model

• Content Area

• Padding Area

• Border Area

• Margin Area

 

box-sizing

• content-box : 컨텐츠 영역 기준

• border-box : 테두리 영역 기준

 

---

 

Float 해제

1. 부모에 float 적용

   • 자식크기만큼 크기가 줄어듬

   • 부모가 여러개일 경우 float를 또 써야하거나 clear해야함

2. 부모에 overflow 적용

   • 옵션에 따라 스크롤바가 생기거나 컨텐츠가 잘릴 수 있음

3. 부모가 끝나기 전 빈 엘리먼트 추가 후 clear 적용

   • 의미 없는 엘리먼트가 추가되므로 권장하지 않음

4. 부모에 display:inline-block 적용

   • 부모엘리먼트와 다음에 오는 엘리먼트 사이에 여백이 생김

   • 자식크기만큼 크기가 줄어듬

5. 가상요소로 clear 적용

   • 권장

 

---

 

마진겹침 현상 (Margin-Collpasing)

• 블록 레벨 엘리먼트(Block-level element)에 한해 발생

• 수직방향으로 발생

• 2개의 마진이 겹칠 때 큰 마진으로 덮여지는 현상

• 하나의 마진이 음수일 경우 더하는 방식을 취함

조건

1. 인접한 엘리먼트 발생

2. 부모와 처음/마지막 자식 사이에서 발생

   • inline, border, padding 등을 통해 해결

3. 빈 엘리먼트에서 발생

   • 빈 엘리먼트에 height, min-height, padding, border, inline 등을 통해 해결

position:absolute, float:left, display:flex등 마진겹침현상이 발생하지 않는 예외적인 경우도 있다.

(새로운 BFC(Block Formatting Context)를 생성하는 조건이 마진겹침을 발생시키지 않는다.)

 

 

---

 

BFC(Block Formatting Context)

블록레벨요소를 렌더링하는데 사용되는 CSS 비주얼 서식 모델 중 하나

 

조건

• root

• root를 포함하는 요소

• float가 none이 아니며 clear되지 않은 요소

• position이 absolute나 fixed인 요소

• display가 inline-block, inline-flex, flex, table-cell, table-caption인 요소

• overflow가 visible이 아닌 요소

 

---

 

z-index

쌓임 맥락(Stacking Context)

동작방식을 이해하기 위해서는 사용자가 바라보는 기준으로 가상의 z축을 생성하여 3차원 개념으로 보이는 맥락을 이해해야한다.

이 요소들에 우선순의를 z-index가 정하게 되는 원리.

 

특징

• 동일한 성격이라면 마크업 순서대로 쌓임이 결정됨

• 쌓임 맥락은 다른 쌓임 맥락을 포함할 수 있음

• 쌓임을 고려하는것은 오직 자식요소들에 대해서만..

조건

• position가 relative, absolute이며 z-index가 auto가 아닌 요소

• position가 fixed, sticky인 요소

• opacity가 1보다 작은 요소

• transoform이 none이 아닌 요소

 

---

Reset.css VS Normalize.css

• 기본 브라우저 내장 스타일을 초기화하는 기법

 

Reset.css

• 모든 브라우저 내장 스타일을 제거하는 기법

• 제로 베이스에서 시작(각 태그에 적용된 모든 스타일이 초기화)

• Eric Mayer의 Reset.css가 가장 유명

 

Normalize.css

• 모든 브라우저 스타일을 동일하게 하는 기법

• 기존 스타일은 유지하되 브라우저마다 다른 스타일을 동일하게 고치는 방식

• Necolas의 nomalize.css가 가장 유명하며 주석을 보면 각 브라우저에 따라 추가된 이유를 설명하고 있다.

 

차이점

Reset.css의 경우 브라우저 버그를 고치는 부분이 아니고 모든것을 초기화하는 것이기 때문에 버그 발생 가능성이 있다.

하지만 아예 초기화하는 부분이기때문에 Reset.css 소스에 대한 업데이트가 필요없다.

 

Nomalize.cs는 브라우저 업데이트의 경우 영향이 있을 수 있기 때문에 업데이트가 필요하고 초기화하여 스타일링을 시작하는 것이 아니기때문에 작업 시 크로스브라우징에 신경써야한다.

하지만 브라우저 버그를 고치는 부분이기에 버그 발생 가능성이 낮다.

 

뭐가 좋고 나쁘다고 할 수는 없고 상황에 따라 사용하길..

 

 

---

 

 

그리드 시스템 (Grid System)

• 레이아웃을 구현하기 위해 설계한 시스템

• 열(Column) 개수에 따라 12단/16단/24단 그리드라고 부르기도 한다.

 

Float grid system

• float 속성으로 구현한 그리드

• float된 높이를 잡기 위해 clearfix 핵을 사용해야한다.

• 각 너비를 열/행에 맞게 계산해줘야한다.

 

Flexbox grid system

• float와 거의 동일하되 clearfix핵을 없애고 flex를 적용

 

Grid layout grid system

• grid를 사용한 것으로 flat/flexbox와 완전히다르다.

• 너비계산도 필요없고 row, column을 따로 지정하지 안흔다.

• 단순히 grid 관련된 속성을 사용해서 열/행의 너비 및 높이와 각 항목의 비율을 지정한다.

 

---

 

<img> 하단 공백

하단 공백이 생기는 이유는 img가 인라인 레벨 요소이기 때문이다.

따라서 vertical-align:baseline이 default값이며 텍스트와 동일하게 baseline기준으로 정렬된다.

이미지 출처 https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image/34952703#34952703

이미지 출처 https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image/34952703#34952703

인라인 레벨 요소는 알파벳의 y,j,p,g,q등과 같은 하강문자(descender)를 위해 아래쪽에 더 공간이 있어야하기때문에 img의 아래에 공백이 생긴다.

 

해결방법

• img 요소에 display:block

• img 요소에 vertical-align:middle/top/botto (권장)

• 요소의 컨테이너에 line-height:0; (컨테이너 요소에 다른 컨텐츠가 있을 경우 문제가 될 수 있음, 권장하지 않음)

 

---

 

취준생이 반드시 알아야 할 프론트엔드 지식들 - CSS

https://github.com/baeharam/Must-Know-About-Frontend