웹 사이트 레이아웃에 영향을 미치는 요소 1 - 박스 모델

오늘 새벽 5시에는 일어나려고 했으나 너무 졸려서 1시간 정도 더 자고 일어나본다. 수업 가기 전까지 2시간 정도 공부할 시간이 있어 어제 공부하려고 했던 CSS를 학습해보기로 했다.

책에서 학습한 내용을 좀더 깊이있게 학습해보자.

---

 

 

 

 

이론 1 - 박스 모델

 

 

 

 

 

 

 

border는 눈에 보이지는 않지만 존재하는 영역이다.

 

 

 

 

 

---

 

 

 

 

실습 1 - 박스 모델

---

 

 

기본 학습 실습해보기

 

레이아웃 구성하기

 

---

 

 

 

마진과 패딩 넣어보기

 

border를 기준으로 100px 만큼 공백이 생겼는데 여기가 마진이다. 텍스트 안쪽에도 100px 들여쓰여졌는데 여기는 패딩이 적용된 곳이다.

 

 

 

 

 

원래는 300px이었으나 패딩이 들어가는 순간 100px만큼의 공간이 더 생겼음을 생각해야 한다.

 

 

 

margin 한줄로 작성하기

 

---

 

 

 

본 문제 풀어보기

 

 

---

 

 

 

 

퀴즈 1 - 박스 모델

 

 

 

---

 

 

 

학습을 마치고

이렇게 해서 어제 배웠던 내용을 복습해보니 정말 좋았다. 이제 박스 모델은 확실히 기억하고 적용할 수 있게 되었다. 다음은 블록과 인라인 요소에 대한 학습을 진행해볼 것이다.