inline element2 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. 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 다음
