content(내용) + padding(안쪽여백) + border(테두리) + margin (바깥여백) 웹 페이지에서 요소의 크기와 간격 웹사이트에서 박스모델 확인하기 개발자도구 [F12] + 또는 ctrl + shift + C 웹페이지 요소 검사 (개발자도구에서 요소 하나만 선택) Dock side 개발자도구 창의 위치 조절 content(내용) box-sizing: content-box; padding, border 추가했을 때 차이 box-sizing: border-box; width: 100px; height: 100px; background-color: lightblue; padding: 20px; border: 5px solid deepskyblue; - box-sizing : content-box content(width) + padding + border = ??? 너비 지정한 것에서 padding, border 지정한 것만큼 width, height 가 더 커짐...
![[css 6.] 박스모델 - content, padding, border, margin](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MjBfNTkg/MDAxNzEzNTQyMDg5MDQ1.aOENkvcn3qtoG_BNGyL9C-dHrxUgLQLeWc8usukwH1wg.AbAfdsKeMal48g4Fak6_HFWT7VXBGSlY1tWcj821NoMg.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-016_%281%29.jpg?type=w2)
#
border
#
개발자도구
#
padding
#
margin가운데정렬
#
margin
#
ctrlshiftc
#
css박스모델
#
css모서리둥글게
#
content
#
테두리모서리각각적용
![[공유] HTML 정리](https://mblogthumb-phinf.pstatic.net/MjAyNDAzMjNfMjAz/MDAxNzExMjAyMjI5MzYy.7np2Po9XtQkA7Pd46l4-5YMmG0ChgkkDf7Ukc-8zTXcg.2TAjbTeAtCeyJMsR79V6LWuxrcN2ov1F8pQ9U88OI-Ig.JPEG/html.jpg?type=w2)
![[css 3.] 다양한 단위 설정하기 - px, %, em, rem, vw, vh](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MThfOTUg/MDAxNzEzNDI4NDI2MDc4.eKpFilioRYbNx4lRwO4-b4aVgbshr_00aYYGT0eKi7Ig.9afpVPQKkuQTUcHMVqONA_X0vvraNxdur27kQVCfv3wg.JPEG/013.jpg?type=w2)
![[jQuery 4.] jquery 효과(effects)](https://mblogthumb-phinf.pstatic.net/MjAyNDA1MTVfMjY5/MDAxNzE1NzQyOTA1NTcw.Md9yVfjpLRdIzv2j5mcJSCHoks-U9dChDD5pCqh_iW8g.7SePsrTZarFCWCca5UEh5N9pWmppDJ82kRdNAlCdlewg.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB_%281%29-008.jpg?type=w2)
![[GTQ 일러스트] 1급 자격증 시험 핵심정리(+ 단축키)](https://mblogthumb-phinf.pstatic.net/MjAyNDA1MjZfNzAg/MDAxNzE2NzE5ODA1MDY2.DRkRB6UHheVpSLcK6d0vu47EdIPKzLQBlw3IRrWcE5Ag.6mW0kztz0YBwt0-1fig5ZWMgPngrmgqtcVwCLnjs1-Qg.JPEG/%C1%A6%B8%F1%C0%BB-%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-_1_-008.jpg?type=w2)
![[javascript 5.] 자바스크립트 자료형 변환](https://mblogthumb-phinf.pstatic.net/MjAyNDA2MTFfMjc1/MDAxNzE4MDM3MTQ1MDM4.MDwBX11gv_UWbQix0-Bkma_QvV_c4LX-gNN8_JpCBOog.9c4gghmhb2ciUITcG3mFDmbSZDNaJbYnAlBvqhqhUV4g.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB_%281%29-005.jpg?type=w2)
![[javascript 9.] 자바스크립트 함수 선언, 작성법](https://mblogthumb-phinf.pstatic.net/MjAyNDA2MTdfMjkz/MDAxNzE4NTk1MTQ1MzMz.2j1B6I7n9d7LThkTKbgCaOEDaVEjkV5DkEVYl60GSeYg.2KWLqDhUlNF-WJmG5xY7T544pzIs3VfHlexqICm_GsAg.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB_%281%29-009_%281%29.jpg?type=w2)