레이아웃을 구성하는 CSS 박스 모델 8 - position과 포함관계 실습해보기

수업 시간에 배운 건데 한 가지 더 정리할 게 있어서 기록해보기로 했다. 지난 번에 수업을 들을 때는 하나도 이해하지 못했던 부분인데 요즘 CSS를 혼자서 공부하면서 정말 많은 것들을 배우게 되었다.

수업 영상을 다시 볼 시간은 없으니 실습 자료들을 보면서 한번 정리해보기로 했다.

---

 

 

 

 

1. position 실습

 

 

스크롤 막대를 내리면 왼쪽에 네모는 계속해서 내려가지만 오른쪽에 초록색 네모는 그 위치에 항상 고정되어 있다. 초록색 네모를 fixed로 고정했기 때문이다. absolute는 사용한 상위 요소를 기준으로 위치를 지정하는 것이다. 이 부분도 중요하니 꼭 숙지하고 넘어가기로 하자.

---

 

 

 

 

2. 부모 자식 포함 관계 실습

 

 

 

childDiv가 parentDiv에 포함되어 그 안으로 들어간 형태로 만들어졌다.

---

 

 

 

학습을 마치고

이렇게 수업 시간에 배운 내용을 정리해보는 건 정말 중요하다는 걸 알게 되었다. 그때는 뭘 배웠는지 잘 모르지만 공부를 한 후에 다시 보면 수업 때 배운 것들이 다시 생각난다.

그래서 공부는 반복이 중요하다. 마치 콩나물에 물을 주는 것과 같다. 모두 빠져나가고 남는 게 하나도 없는 것같지만 계속해서 반복하고 반복하다 보면 어느새 알게 되고 성장하게 되었음을 알게 된다. 이제 9장에서 배운 내용들을 정리하며 문제를 풀어보려고 한다~