[TIL] CSS > inline, inline-block, block
HTML을 통해서 block요소와 inline 요소를 나눠 사용할 수 있다.
HTML의 거의 대부분 tag들은 block 요소이다. 항상 새 줄에서 시작하며 옆(좌우)에 다른 요소를 붙여넣을 수 없도록 자리를 차지한다.
inline 요소는 <span>
, <a>
, <img>
등인데 옆에 다른 것이 위치할 수 있다. 딱 어떤 영역만큼만 자리를 차지한다.
하지만 CSS를 통해서 block, inline요소의 성질을 얼마든지 바꿀 수 있다.
1.inline
h1 {
display: inline;
width: 100px > no effect
height: 100px > no effect
}
h1 {
display: inline;
width: 100px > no effect
height: 100px > no effect
}
block 요소인 h1에 display: inline
을 하면 옆에 다른 요소가 올 수 있게 된다.
특히 inline은 콘텐츠 자체만을 꾸며준 것이기 때문에, 높이나 너비를 지정하려고 해도 어떤 효과도 없게된다. (한 줄에 여러개가 들어가는 물건)
2. inline-block
h2 {
display: inline-block;
width: 100px > effect
height: 100px > effect
}
h2 {
display: inline-block;
width: 100px > effect
height: 100px > effect
}
inline과 거의 비슷하지만 단 한가지 차이가 있다. 상자로 변경되는 것이기 때문에 높이와 너비 값을 설정할 수 있다는 것이다. (한 줄에 여러개가 들어가는 상자)
3. block
span {
display: block
}
span {
display: block
}
inline 태그인 span
, a
, img
등에 css로 block을 지정해주면 한 줄을 차지하게된다. (한 줄에 하나만 들어가는 상자)
참고 사이트: https://www.samanthaming.com/pictorials/css-inline-vs-inlineblock-vs-block/
Author And Source
이 문제에 관하여([TIL] CSS > inline, inline-block, block), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lnhyen43/TIL-CSS-inline-inline-block-block저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)