# B2BS: 프레임워크보다 기본기(HTML, CSS)

###### tags: `냥하`, `강의`

## HTML5
: Semantic 태그(HTML5)를 사용하자, HTML은 의미를 포함해야한다.정보로써의 가치를 재고해보자

### HTML의 변화
1. 버전이 없는 living standard
2. 의미를 가진 태그들의 추가 | ex) `<section>`, `<header>`, `<footer>`, `<main>` `<article>`, `<nav>` 등
3. 의미를 기술하기 위한 Microdta도 표준에 포함됨(검색엔진등이 인식하기 편하도록)
4. 비주얼 요소를 의미하는 태그나 속성은 사라지거나 의미가 변함
- 사라짐: `<big>`, `<basefont>`, `<font>`, `<center>`,`<strike>`, background, align 속성
- 의미 변경: 굵은 글씨 -> 내용적으로 강조`<b>` , 기울림 -> 관용구에 사용`<i>`, 취소선 -> 적절/정확하지 않은 정보 표시`<s>`, 작은글씨 -> 중요하지 않은 내용`<small>`, underline -> 따로 표기가 필요한 내용`<u>`
5. 멀티미디어, 네트워크등 풍부하고 다양한 기능과 API 추가
- ex) flash를 대체`<canvas>`, `<video>`, `<figure>`, srcset등
- WebSocket, WebWorker, StorageAPI, History


### 점진적 향상 VS 우아한 성능 저하
: 두 방법은 상호보완적으로 함께 사용되는 사례가 많음
선택 기준: 정보 접근성, 브라우저 점유율, 기능 지원 등

1. 점진적 향상
: 성능이 부족한 환경을 기준으로 작성하고, 성능이 좋은 환경을 추가적으로 고려
기능이 없는 환경에서 출발해서 좋은 환경에서는 제공되는 더 좋은 기능을 사용할 수 있다.

2. 우아한 성능저하
ex) `<video>`태그를 지원하지 않는 브라우저에서의 호환성을 위해 하위호환성이 좋은 `<a>`태그를 활용하여 '이 비디오를 보세요' 등으로 컨텐츠를 표시하는 방법

## CSS3
1. **이제 CSS3는 없다.**
- 각 기능별 모듈만 존재할 뿐
2. **CSS 명세가 방대해졌다.**
- CSS만 533개
- https://chromestatus.com/metrics/css/popularity
- 뭐부터 공부해야할지 모르겠다면 우선순위를 참고할 것
- 레이아웃 중요 :star2:

### CSS 알아야할 개념
### Layout :: 많이 만들어보고 연습해보기
: 렌더 트리를 배치하는 layout 단계
1. **기본 개념 두 가지**
- 크기와 위치

2. **CSS Box Model**
- 모든 크기의 영역은 네모영역으로 가져감
- css 레이아웃의 기본이 되는 원리
- 엘리먼트의 크기를 정하는 표준
- box-sizing 속성으로 크기 계산 방식 변경 가능
- 
- padding은 content영역에 속해있지 않음
- border는 컨텐츠 크기에 영향을 미침
- **box-sizing: content-box** -> 지정한 CSS width 및 height를 컨텐츠 영역에만 적용
- **box-sizing: border-box** -> 지정한 CSS width 및 height를 전체 영역에 적용합니다. border, padding, margin을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 적어질 수 있습니다.

3. **flexbox**
- 편리한 레이아웃 작성 가능
- 부모/자식/자식들 사이의 관계를 직관적으로 정의
- IE도 제한적으로 지원
- 성배 레이아웃을 flexbox로 해결하는 방법
- 
- **flexbox관련 착각하기 쉬운 포인트**
1. flexbox에서 row와 colume은 글쓰기 방향을 기준으로 결정된다,
- row: 화면에서의 수평방향이 아닌 글쓰기 방향(논리적 의미)을 의미함.
- 따라서 다음과 같이(ex, 한자) 글쓰기 방향이 수직인 경우에는 row 이지만 수직방향으로 정렬된 것을 볼 수 있음
- 
- 다음 예시: 글쓰기 방향이 오->왼 으로 흐르는 경우
- 
- https://flexboxfroggy.com/#ko

4. **Grid 레이아웃**
- 1차원적 flexbox와 달리 2차원적 구성

5. **논리적 프로퍼티와 값**
1. CSS logical properties and values module
- 물리적인 프로퍼티나 값이 아닌 논리적인 프로퍼티와 값으로 레이아웃을 다룰 수 있게하는 표준
2. inline과 block
- inline: 텍스트 쓰기방향
- block: 텍스트 쓰기 방향에 수직
3. 용어의 변화
- size: width나 height 대신 사용
- start: 텍스트 흐름의 시작위치
- end : 텍스트 흐름의 끝 위치
- 기존같으면 상단 마진을 주기 위해서 `margin-top` 같은 방법을 썼을 것 같은데, 여러 언어의 호환성을 고려하기 위해서라면 다음과 같이 `start`속성을 사용한 css로 작성하는 것이 옳음.

참고: https://www.w3.org/TR/css-logical-1/

- 다국어 설정을 고려한다면 논리적 속성이 유용함.

6. **선택자**
1. css selector
- 문서 트리의 엘리먼트를 찾는 패턴 표준
2. 엘리먼트 선택자(Elemental selectors)
- 타입 선택자: HTML태그 이름
- 수도 엘리먼트: 문서 트리에 직접 존재하지는 않지만 엘리먼트처럼 취급
- 유니버셜 선택자: 모든 HTML태그를 선택
3. 속성 선택자(Attribute selectors)
- 아이디 선택자: 엘리먼트의 id 속성
- 클래스 선택자
- 수도 클래스: 특정 정보나 상황에 의해 적용
- 속성 선택자: 엘리먼트의 모든 속성
4. 특정성(Specificity)
: 선택자가 얼마나 구체적인지 나타내는 정도, 더 구체적일수록 우선 순위가 높다.
- 
- `!important` -> 생태계 파괴자,
user-agent 스타일 > 유저 정의 스타일 시트 > 브라우저 스타일 시트 순으로 적용이 되는데, 사이트마다 적용 되어야하는 모든 스타일을 적용할 때에만 `!important` 를 사용할 수 있음. 하지만 최대한 사용하지 않고, 제거한 후 어떻게든 특정성을 높이는 방식으로 개발을 진행해볼 것!

7. 마진 병합
1. 인접 형제 노드의 수직 마진은 병합된다.
- 나중에 나타난 엘리먼트가 clear되어야하는 경우 제외
2. 부모와 자식의 인접한 수직 마진은 병합된다.
- 단 마진 사이에 다른 컨텐츠가 없어야 함
3. 빈 블럭의 수직마진은 병합된다.
- 한 블럭의 margin-top과 margin-bottom도 병합된다.
- 두 마진을 분리할 높이, 패딩, 보더, 인라인 컨텐츠가 없을 때 발생

### 배운점

텍스트 흐름의 관점, 논리적 관점에서 바라보는 경우가 많음, 그리고 이는 다양한 언어와 글쓰기 방향을 고려하는 맥락과 같다.