[3일차 회고] CSS

오늘은 어제와 대비되어 꽤나 힘든 날이다. 저번주 금요일부터 월요일까지 가족사정으로 전국을 여기저기 돌아다니다보니 피곤함이 누적이 됬는데, 하필 이번주 월요일부터 부트캠프가 시작되어 전혀 몸에게 휴식을 주지 못했다...
심한 두통과 함께 칼칼한 목 통증이 아침부터 계속 있어서 공부에 집중을 잘 하지 못했으나, 최대한 나름의 정리를 해서 참 다행이다.

DOM, Rendering, viewport, meta, Doctype

내가 개발을 처음 시작했을 때부터 항상 봤던 친구들이지만 정확히 무엇을 의미하는 단어인지는 잘 몰랐다. 오늘 학습 내용 중간중간 시간이 나는 김에 조금씩 정보를 찾아보았고 viewport, meta, Doctype은 아주 단순한 친구들이여서 금방 이해할 수 있었다.

DOM, Rendering... 너무 헷갈린다...

기본적으로 웹 브라우저가 화면에 출력을 해주는 과정에서 이 두 단어는 뺄래야 뺄 수가 없다. 왜냐하면 모든 화면은 렌더링을 통해 출력이 되는 것이고, 그 렌더링의 시작점에는 DOM이 있기 때문이다.
헷갈리는 가장 큰 이유는 봐야할 내용이 좀 많다. 렌더링의 정보를 찾아보니 DOM, CSSOM, CRP, Render Tree, 토크 등... 처음보는 단어들이 즐비하다보니 선뜻 손이 더 가지 않는 것 같다. 그래도 명색이 내가 프론트엔드 개발자 준비생인데 내가 쓰는 브라우저 내의 모든 내용은 다 알아야하지 않겠는가.
앞으로 꾸준히 DOM 설명 글을 수정할 계획이다. DOM에 대한 사진, 예시, 추가적인 내용들을 지속적으로 업그레이드 한 뒤, 나머지 정리할 부분들도 천천히 정리를 시작해야겠다.

3일차의 정리 내용

두번째 과제 결과물

부족했거나 몰랐던 부분

1. background, background-color: 너무 당연하게도 background는 배경에 대한 전반적인 스타일을 담당하고 color는 색상만 담당한다는 사실을 인지하지 않고 사용하고 있었다.
2. meta: head내에서 viewport나 charset 등 무언가를 설정하는 것만 알았지 무엇을 나타내는건지는 전혀 몰랐다.
3. doctype: 마찬가지로 html을 표현하는구나만 알고 뭘 뜻하는 것인지 몰랐다.
4. DOM: 렌더링을 공부하다가 알게 되었는데 아직 잘 모르겠다.
5. 컴포넌트: 전체 코드에서 특정 기능을 구현하는 코드를 캡슐화 및 분리하여 재사용성이나 커스텀을 할 수 있게 만들어진 코드
6. viewport: 브라우저의 전체 크기를 의미