안녕하세요? 씨~즈! 입니다:)
지금은 장마 시작을 알리는 비가 내리고 있습니다. 비에 젖고 갬성에 젖네요..ㅋㅋ
저는 점심으로 순대국을 먹었더니 배가 든든해졌는데요! 여러분은 맛점하셨나요?
오늘은 CSS Display 속성) block, inline, inline-block에 대해 알아보겠습니다.
Go! go!
먼저 display 속성은 요소(elements)를 block과 inline 중 어느 쪽으로 처리할지 설정합니다.
바로 들어갑니다.
1. block
블록으로 처리된, 블록이 기본값으로 설정된 요소는 너비가 바디의 100%이기 때문에 화면 한줄 전체를 차지합니다. 그래서 자연스럽게 다음 요소는 다음줄에 위치하게 됩니다.
<div> 태그가 대표적인 블록 태그입니다. 2. inline
반면에 inline은 너비가 콘텐츠 크기만큼만 차지하기 때문에 줄바꿈 없이 다음 요소가 바로 옆에 올 수 있게 됩니다.
<span> 태그가 대표적인 인라인 태그입니다. 3. inline-block
inline-block은 block의 크기를 값으로 조절할 수 있고 그렇기 때문에 여러 개의 블록이 한줄에 올 수가 있습니다.
대부분의 html 태그들은 block 이지만 display 를 이용하여 inline으로 inline을 block으로 변경하여 사용도 가능합니다:)
설명으로 이해가 안되셨다면
추천검색어 : css display mdn
[CSS] Display: block, inline, inline-block 은 여기까지입니다:)
제 글이 조금이라도 도움이 되었으면 좋겠습니다.
읽어주셔서 감사합니다.
Seize the day!
Seize the day