박스 모델

영역이 네 가지로 나뉜다.

1. Content: 텍스트나 이미지가 들어가는 실제 내용 영역
2. Padding: 내용과 테두리 사이의 내부 여백
3. Border: 테두리, 요소의 경계를 나타냄
4. Margin: 요소 외부의 여백, 다른 요소와의 간격

위의 영역 값을 조절하며 박스에 적용 되는 모습 확인

https://blog.naver.com/unfair___/223797144237

CSS 우선순위

아래 순서대로 우선적이다.
id > .class > 태그 (p ,h1 등)

여기서 !important를 사용하면 무조건 우선 순위
(태그에도 사용시 무조건 우선순위)

CSS 단위

1. 고정 단위: px (픽셀) - 화면의 고정된 크기를 의미
2. 상대 단위:
   • em, rem - 글꼴 크기에 상대적인 단위
   • % - 부모 요소 크기에 상대적인 백분율
   • vw, vh - 뷰포트(화면) 크기에 비례하는 단위

위의 내 개인 블로그에 적용 영상 업로드하였다.

실습과제

처음에 solid의 스펠링을 soild로 적은 실수가 있어서 박스에 파란색이 적용이 안됐었다. 오류 찾아내고 적용이 된 모습.

그리고 내가 이해한 것이 맞다면 순위를 지정하지 않은 h1 제목을 만들면 초록색 글씨로 적용이 될 것이다. 그래서 아이디나 클라스를 적용하지 않은 h1를 두가지 추가 해 봤다.

내가 이해했던 것이 잘 맞았다!!
그리고 오늘은 코딩 예시를 보지않고 글로만 적힌 지시사항을 내가 직접 코딩 적으면서 해봤다! 코딩은 한가지 스펠링 실수말고는 잘 짜였고 적용도 잘 되었을때의 쾌감이 너무 좋았다.