[ HTML ] box-sizing 및 웹개발 종합반 강의 정리

오늘 한 것

---

팀 프로젝트 CSS 고치기

영화사이트 만들기 리뷰

 

 

회고

---

내가 맡은 부분을 만들고 push를 한다고 끝이 아니다. 팀원들이 만든 부분과 내가 만든 부분을 합쳤을 때 내가 만든 부분이 다른 분들보다 넓이가 길었다. 딱히 넓이를 지정해준 것도 아니고 오히려 width:100%로 설정을 해뒀는데 왜 넘어가는지 몰랐었다. 이 문제를 해결하기 위해 여러 가지 바꿔 보며 깨달았다. box-sizing: border-box를 설정하지 않아 padding의 값 때문에 width가 넓어졌다. box-sizing: border-box를 설정해줌으로써 바로 문제가 해결되었다.

 

그리고 내 화면에서는 이쁘게 보이지만 다른 화면의 사이즈도 생각해봐야한다. 팀원 중 한 분이 화명이 넓어서 내가 구현한 카톡 느낌의 구조가 깨져버린 것이다. width가 좁을 경우에는 column으로 배열되게 설정을 해주었지만 max-width를 설정해주지 않았기 때문이다. max-width를 설정해줌으로써 문제를 바로 해결할 수 있었다.

 

영화 사이트 만든거는 이미 저번 주에 강의를 보면서 한번 만든걸 다시 만들어보고 있다. 그때는 이해되고 만들 수 있을 것 같았지만 막상 혼자 만들면서 나의 약했던 부분을 깨닫게 되었다. 덕분에 더 깊게 이해하고 성장할 수 있는 시간이 된 것 같다.

 

 

오늘 공부한 것 정리

---

[ 스파르타 / Web ] 웹개발 종합반 1주차_#4 (영화 후기 사이트)

[ 스파르타 / Web ] 웹개발 종합반 2주차_#1 (영화 후기 사이트)

[ 스파르타 / Web ] 웹개발 종합반 2주차_#2 (jQuery)

[ 스파르타 / Web ] 웹개발 종합반 2주차_#3

[ 스파르타 / SQL ] DBeaver 설치 방법 & SQL절 예제