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 : 루트에 지정된 폰트 사이즈에 따라 크기가 결정된다.
'코드스테이츠_경남 ABC_LAB_FE > [ABC-Lab FE] Section 1' 카테고리의 다른 글
| 7일차 2023-10-18 수요일 (1) | 2023.10.18 |
|---|---|
| 5일차 2023-10-16 월요일 (0) | 2023.10.16 |
| 4일차 2023-10-13 금요일 (0) | 2023.10.13 |
| 2일차 2023-10-11 수요일 (0) | 2023.10.11 |
| 1일차 2023-10-10 화요일 (0) | 2023.10.10 |