맹쑤의 FE 일기

3일차 요약

• CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다.
• id는 #, class는 . 으로 선택한다.
• 텍스트 꾸미는데 속성으로 color, font-size, font-family 등이 사용 된다.
• 절대 단위: px, pt등이 있고, 상대 단위: %, em, rem, ch, vw, vh등이 있다.
• 박스 모델 고유 영역 파악을 잘 해야 한다.
• 줄 바꿈이 되는 박스 (block) VS 옆으로 붙는 박스 (inline, inline-box) >> block은 한 줄에 하나인 상자, inline은 물건, inline-block은 한 줄에 여러 개 진열 가능한 상자라고 생각하자
• 박스를 구성하는 요소로 margin > border > padding > content
• 선택자는 많이 사용 해보면서 익히자
• https://flukeout.github.io/ 게임으로 경험하기
• Flexbox Froggy - CSS flexbox 속성 배우기 게임 내일 배울 flexbox에 관한 게임 미리 경험하기

오늘의 후기

     notion에 정리한것을 캡쳐해서 올렸다... 시간 절약 하면서 해야겠다. css를 얼마나 잘 사용하느냐에 따라 웹페이지가 달라진다는 것을 배웠다. 직관적이고 쉬운 UI 제작을 하는 프론트엔드 개발자가 되기로 해야겠다.

기초가 이정도인데 더 깊게 들어간다면 어떻게 될지 궁금하다. 기타 선택자 들어갈 때 어우 헷갈려 죽는 줄 알았다.

em : 부모의 폰트 사이즈를 곱한 값으로 계산된다.

rem : 루트에 지정된 폰트 사이즈에 따라 크기가 결정된다.