DevSSOM

display 이전에, HTML 태그는 크게 두 가지의 성격을 가지고 있다고 했음. Block과 Inline. 근데, 간혹가다 태그를 가지고 공간에 대한 크기를 입력해주고 싶다. 태그가 공간에 대한 크기를 갖고 있지 않으면 좋겠다. 하고 원래 태그가 갖고 있는 성격을 바꾸고 싶은 거야. 그럴 땐 display라고 하는 CSS 속성을 사용하게 되면, 태그를 inline으로 바꿀 때 속성값으로 inline을 주면 됨. display : Block과 Inline 요소가 가지고 있는 원래의 성격을 바꾸고 싶을 때 사용. 속성값으로 inline-block을 적용하면 두 요소의 성격을 모두 가짐. x축 정렬이면서 공간에 대한 크기를 만들고 상하 배치 작업까지 하고 싶다고 할 땐 inline-block. inline..

형제간의 마진 병합 Hello World Hello World /* style.css 문서 */ .box1 { margin-bottom: 150px; } .box2 { margin-top: 100px; } 한 쪽은 150px이라고 하는 margin-bottom이고, 한 쪽은 100px margin-top이니까 box1과 box2영역의 마진 부분이 겹쳐. 공통된 부분을 두 개의 영역이 공유하게 되면, 이 공간의 크기는 250px이 되는게 아니라 150이 됨. 항상 큰 값에 우선순위가 있어서 큰 값이 작은 값을 병합시켜버리는 것. 부모-자식간의 마진 병합 /* style.css 문서 */ article { width: 200px; height: 200px; margin-top: 100px; } main이라고..

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