# 2. Back to the Basics: 프레임워크보다 기본기 (1)

###### tags: `지호`, `프론트엔드 Back to the Basics`

---

## 0.
- 정확한 용어
- 기술 선택의 근거

<br/>

## 1. Browser 웹 페이지를 표현하는 방법

<br/>


<br/>


<br/>


<br/>


<br/>


<br/>

읽어보면 좋은 글: https://developer.chrome.com/blog/inside-browser-part1/

<br/>

## 2. HTML5는 어떤 의미인가

### Semantic HTML
- HTML4에서 모두 div로만 작성되던 태그들이 각각 고유의 의미를 지니게 되었다.
- HTML 엘리먼트와 속성, 속성값은 특정한 의미를 지니도록 정의되었다.
- 내가 작성하고 있는 **태그에 어떤 의미를 담고 있는지** 주의해서 개발한다.

좋은 사례: header, main, aside, footer, nav... ex) 레진코믹스
나쁜 사례: 전부 div... ex) 청와대

<br/>

### HTML의 변화

## 3. 브라우저 지원
모든 브라우저에서 모든 기능을 동일하게 동작할 필요는 없다!

<br/>

## 4. CSS의 변화

### CSS의 변화

https://chromestatus.com/metrics/css/popularity 에서 상위 개념 위주로 공부

<br/>

## 5. 레이아웃

### CSS Box Model
- CSS 레이아웃의 기본이 되는 원리
- 엘리먼트의 크기를 정하는 표준

<br/>

### Flexbox
- 부모/자식/자식들 사이의 관계를 직관적으로 정의
- IE도 10부터 제한적 지원

<br/>

### Grid Layout
- 2차원적인 구성에 유용
**따로 공부하기**

<br/>

## 6. 논리적 프로퍼티와 값

### 특징
- 물리적인 프로퍼티나 값이 아닌 논리적인 프로퍼티와 값으로 레이아웃을 다룰 수 있게 하는 표준
- 다국어 서비스를 지원할 때 필수

### 종류
- **inline**: 텍스트 쓰기 방향
- **block**: 텍스트 쓰기 방향에 수직
- **size**: width or height
- **start**: 텍스트 흐름의 시작 위치
- **end**: 텍스트 흐름의 끝 위치
- 쓰기 방향에 따라 달라지는 논리적인 프로퍼티들
- [속성종류]-[방향]-[시작]

<br/>

## 7. 선택자

### CSS의 구조

### CSS Selector
**document tree**의 element를 찾는 패턴의 표준

<br/>

## 7. Specificity (특정성)

- 선택자가 얼마나 구체적인지 나타내는 정도
- 더 구체적일수록 우선 순위가 높다


<br/>

## 8. 마진 병합

- 인접한 형제 노드의 수직 마진은 병합된다.
- 부모와 자식 사이에 다른 컨텐츠가 없으면 수직 마직은 병합된다.