Box Model3 css3 박스 모델의 통찰(css3 box model insight) 이전까지 태그는 box element 이거나 inline element임을 공부하였다. 두 종류의 css 속성 값에 대한 정리를 하면 다음과 같다. block element: width, height, padding, margin, border를 가질 수 있다. inline element: width, height을 적어도 적용되지 않음. padding, margin은 적어도 좌우만 적용됨. border는 가질 수 있음. 실제로 inline element에다가 5가지 속성 값을 변경해가면서 적용해보고 인접 박스와 어떻게 배치가 되는지 보면 쉽게 이해할 수 있다. a태그와 같은 경우 클릭을 할 수 있는 공간을 크게 하기 위해 상하 패딩이나, 마진을 주고 싶은 경우가 생긴다. 이 때는 inline-block.. 2020. 5. 4. 박스 모델 박스 모델은 아래 그림으로 표현할 수 있다. 왼쪽에 있는 박스를 박스1, 오른쪽에 있는 박스를 박스2라고 하겠다. 박스에 대한 설명 1. 빨간색 부분이 content가 들어갈 부분이다. width, height는 빨간색 사각형의 가로 세로 길이이다. 2. 주황색 선은 content와 border의 중간에 위치한다. {border: 1px solid}와 같이 적용하면 보이는 것이 박스의 가장 외측에 있는 테두리선(border)이다. 주황색 선은 빨간색 영역과 테두리선 사이의 여유 공간이며 padding이라고 부른다. border를 100px로 설정하여도 빨간색 부분은 바뀌지 않는다. 노란색 선에 대한 설명 노란색 선은 박스와 박스 사이에 위치한 선이다. 이것이 바로 margin이다. 박스1의 margin이.. 2020. 5. 3. Inline element vs Block element 비교 요소는 기본값으로 display속성이 inline 아니면 block 이다. 이는 css3의 display 속성인데 default로 inline아니면 block으로 설정되어있다. 기능적인 관점이나 종류 별로 볼 수도 있지만 레이아웃 배치에서 중요한 것은 사용하려는 요소가 인라인/블락 중 어디에 속하는지 파악하는 것이다. 다만, css의 dispaly 속성을 변경하여 inline, block을 전환할 수 있다. 인라인은 가로로 배치가 되며 해당 태그가 사용하는 부분만큼만 공간을 차지한다. 그래서인지 margin, padding과 같은 값들이 수직으로는 사용이 안된다. 또한, width, height를 지정할 수 없다. width, height 모두 사용하는 만큼만 차지한다. 블락은 세로로 배치가 되며 사용하.. 2020. 5. 2. 이전 1 다음
