DevSSOM

박스 모델 구조 박스 모델은 웹사이트 레이아웃을 구성할 때, 공간의 크기가 어떤 구조로 구성되어 있는지, 그 구성물들 자체를 통틀어 박스 모델이라고 얘기함. 박스 모델은 margin, border, padding, content 4가지 요소로 구성되어 있음. 박스 모델을 잘 이해해야 다른 웹사이트의 레이아웃 구조를 파악하기 쉽기 때문에 이 4가지는 반드시 기억하기. margin과 padding의 차이 margin과 padding은 border를 기준으로 생각하면 됨. 박스에 border가 있다고 가정했을 때(border를 사용하지 않았다면 border=0으로 생각), border의 바깥 쪽은 margin, 안쪽은 padding. margin-left, right, top, bottom : border 바..

width, height 특정 영역에 공간을 설정할 때 사용. 고정적인 공간을 만들고 싶을 때 px(픽셀) 단위로 표시. 고정값(px), 가변값(%). 공간을 꽉 채우고 싶다면 px 지정하는 대신에 100%를 입력하면 돼. 부모 영역 크기의 100%. width : 선택한 요소의 넓이를 설정. height : 선택한 요소의 높이를 설정. 프로그래밍을 배워봐요! .paragraph { width: 500px; height: 500px; } font font-size : 글자 크기를 바꿀 때 사용. 마찬가지로 고정된 크기를 표현할 때는 px(픽셀) 단위 입력. font-family : 서체를 지정할 때 사용. 브라우저마다 지원하는 폰트가 다름. 만약에, 특정 브라우저가 A라는 폰트를 지원하지 않는다면, B라..