---
# System prepended metadata

title: '2. Back to the Basics: 프레임워크보다 기본기 (1)'
tags: [지호, 프론트엔드 Back to the Basics]

---

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

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

---

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

<br/>

## 1. Browser 웹 페이지를 표현하는 방법
![그림1](https://user-images.githubusercontent.com/24283401/159427879-10867e3e-50de-4654-ae63-3b2a765c5b7a.png)

<br/>

![그림2](https://user-images.githubusercontent.com/24283401/159427888-b0f3e859-3d94-4b04-baad-c94de5cd8cba.png)

<br/>

![그림3](https://user-images.githubusercontent.com/24283401/159427890-65d9b4a6-ad89-4896-9f86-b6c9fab734a2.png)

<br/>

![그림4](https://user-images.githubusercontent.com/24283401/159427893-b6c95743-8e5e-4a42-8710-dc44a8d41879.png)

<br/>

![그림5](https://user-images.githubusercontent.com/24283401/159427894-f44c58d3-0ce1-48bb-a0e3-f6e58f6d45ca.png)

<br/>

![그림6](https://user-images.githubusercontent.com/24283401/159427895-d421019d-85c4-44a8-a94c-3ad0464a0615.png)

<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의 변화
![그림7](https://user-images.githubusercontent.com/24283401/159433010-233da157-de3e-400c-a10a-9ab3fcb7e669.png)

## 3. 브라우저 지원
모든 브라우저에서 모든 기능을 동일하게 동작할 필요는 없다!
![그림8](https://user-images.githubusercontent.com/24283401/159433094-20719cfa-07b7-48a9-a065-646caaf2707e.png)

<br/>

## 4. CSS의 변화

### CSS의 변화
![image](https://user-images.githubusercontent.com/24283401/159434566-589cdc60-b795-4aca-979a-81dd1344d89a.png)

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

<br/>

## 5. 레이아웃

### CSS Box Model 
- CSS 레이아웃의 기본이 되는 원리
- 엘리먼트의 크기를 정하는 표준
![그림11](https://user-images.githubusercontent.com/24283401/159606001-188c4dd0-fca5-4b16-9e17-9f054d30e549.png)

<br/>

### Flexbox
- 부모/자식/자식들 사이의 관계를 직관적으로 정의
- IE도 10부터 제한적 지원
![그림12](https://user-images.githubusercontent.com/24283401/159606457-f0c25c15-2389-4559-abd6-231c7feeef3f.png)

<br/>


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

<br/>

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

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

### 종류
- **inline**: 텍스트 쓰기 방향
- **block**: 텍스트 쓰기 방향에 수직
- **size**: width or height
- **start**: 텍스트 흐름의 시작 위치 
- **end**: 텍스트 흐름의 끝 위치
- 쓰기 방향에 따라 달라지는 논리적인 프로퍼티들
![그림13](https://user-images.githubusercontent.com/24283401/159610854-41233070-b082-46d7-bca4-f1e35cfb54ab.png)
- [속성종류]-[방향]-[시작]
![그림14](https://user-images.githubusercontent.com/24283401/159611365-134d91b2-5f54-4f68-bfc3-3650be0d5bf2.png)

<br/>

## 7. 선택자

### CSS의 구조
![그림15](https://user-images.githubusercontent.com/24283401/159612569-4916c7c5-8c71-4dc9-a5e5-100592439412.png)

### CSS Selector
**document tree**의 element를 찾는 패턴의 표준
![그림16](https://user-images.githubusercontent.com/24283401/159612565-a4d1daf8-4f27-4416-a62a-cc15a8e5509c.png)


<br/>


## 7. Specificity (특정성)

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

![그림17](https://user-images.githubusercontent.com/24283401/159613803-4ab8f677-adac-4d7a-83b2-cfeb6cac85eb.png)
![그림18](https://user-images.githubusercontent.com/24283401/159613796-5247f723-26ec-4589-bf0a-feba0998cb94.png)

<br/>


## 8. 마진 병합

- 인접한 형제 노드의 수직 마진은 병합된다.
- 부모와 자식 사이에 다른 컨텐츠가 없으면 수직 마직은 병합된다.
![그림19](https://user-images.githubusercontent.com/24283401/159623132-62fb6687-42ff-4075-9bd1-428351782a17.png)