---
# System prepended metadata

title: 'B2BS: 프레임워크보다 기본기(HTML, CSS)'
tags: [강의, 냥하]

---

# 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

![image](https://user-images.githubusercontent.com/48500209/159596714-39bc4233-ba5e-45fc-9187-dfec239ded41.png)

### 점진적 향상 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 속성으로 크기 계산 방식 변경 가능
    - ![image](https://user-images.githubusercontent.com/48500209/159598262-358a30e9-212e-49bc-86eb-a8c20719443c.png)
    - padding은 content영역에 속해있지 않음
    - border는 컨텐츠 크기에 영향을 미침
        - **box-sizing: content-box** -> 지정한 CSS width 및 height를 컨텐츠 영역에만 적용
        - **box-sizing: border-box** -> 지정한 CSS width 및 height를 전체 영역에 적용합니다. border, padding, margin을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 적어질 수 있습니다.

3. **flexbox**
    - 편리한 레이아웃 작성 가능
    - 부모/자식/자식들 사이의 관계를 직관적으로 정의
    - IE도 제한적으로 지원
    - 성배 레이아웃을 flexbox로 해결하는 방법
    - ![image](https://user-images.githubusercontent.com/48500209/159599957-8d5144c0-5465-4626-b25b-c71f93c9f8d6.png)
    - **flexbox관련 착각하기 쉬운 포인트**
        1. flexbox에서 row와 colume은 글쓰기 방향을 기준으로 결정된다,
            - row: 화면에서의 수평방향이 아닌 글쓰기 방향(논리적 의미)을 의미함.
            - 따라서 다음과 같이(ex, 한자) 글쓰기 방향이 수직인 경우에는 row 이지만 수직방향으로 정렬된 것을 볼 수 있음 
                - ![image](https://user-images.githubusercontent.com/48500209/159600198-2bda1d25-6fbc-4dff-b0ae-1ef000c9cd7a.png)
            - 다음 예시: 글쓰기 방향이 오->왼 으로 흐르는 경우
                - ![image](https://user-images.githubusercontent.com/48500209/159600575-32b6416d-0497-493f-a6c3-e17ab5d71f4e.png)
- 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 : 텍스트 흐름의 끝 위치
![image](https://user-images.githubusercontent.com/48500209/159602173-cd00c234-f78e-4ef3-9fbc-23b49b5fc121.png)
        - 기존같으면 상단 마진을 주기 위해서 `margin-top` 같은 방법을 썼을 것 같은데, 여러 언어의 호환성을 고려하기 위해서라면 다음과 같이 `start`속성을 사용한 css로 작성하는 것이 옳음.
![image](https://user-images.githubusercontent.com/48500209/159602410-f4c1f7d6-b997-4cf1-92a7-b3ce24e746cf.png)

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

        - 다국어 설정을 고려한다면 논리적 속성이 유용함.![image](https://user-images.githubusercontent.com/48500209/159602710-054afd1a-c259-4aeb-860c-1eef1e708522.png)



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

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








### 배운점

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