레이아웃을 구성하는 CSS 박스 모델 6 - 수업 시간에 배운 내용 정리하기

며칠 전에 CSS 속성과 관련된 내용인줄 알고 정리했는데 CSS 박스 모델 관련 내용이었다. 이에 대한 학습을 진행하고 나서 다시 학습일지를 써보는 중이다. 어쩐지 무슨 말인지 하나도 모르겠더니..

---

 

 

1. 디스플레이

 

 

 

 

 

이 부분을 학습하지 않아서 다음날 추가해보았다. 인라인과 블럭 요소를 확인해볼 수 있는 실습이다.

---

 

 

 

2. 마진 실습

 

 

 

이걸 혼자서 만들어보라고 했을 때는 하지 못했다. 마진이 무엇인지 어떤 원리로 만들어지는지 알고 있어야 한다. 마진의 중첩 원리를 사용해 네모 박스를 만들어본 것이다.

---

 

 

 

 

3. 테두리 실습

 

이 부분은 radian 속성을 사용해 테두리를 깍어서 모양을 내보았다. 50%를 하면 네모가 원이 된다.

 

---

 

 

학습을 마치고

border에 이런 속성이 있다는 걸 알게 되었다. 지금은 마진도 테두리도 모두 학습한 내용이기 때문에 잘 알게 되었다. 이런 연습도 많이 해보면 재미있을 것 같다. 수업 시간에 배운 것들은 실습 위주로 하기 때문에 깊이있는 학습이 되지 못해서 많이 아쉬웠다.

이런 내용을 피드백에 쓰면 선생님들이 읽고 나만 안좋게 보는 등 인상만 더러워진다는 걸 알게 되었다. 전에는 솔직하게 표현하는 것들이 많고 활발하게 잘 웃고 그랬지만 언제부터인가 난 웃음이 사라졌고 말도 거의 하지 않게 되었다.

 

사람들도 내게 말을 거는 경우는 아주 아주 극히 드물었다. 1주일 내내 담임 선생님 외에는 그 누구와도 말도 하지 않고 인사도 안 한다. 사람들도 다 무시하고 지나가니 나도 딱히 바꾸고 싶은 마음이 없다. 그냥 난 내 일만 하면서 혼자서 내성을 기르는 시간이 되기로 했다.