보다 쉬운 이해를 위한 사전 설명
- 아래의 비유를 통해 미리 감을 잡으세요. 🙂
💻 JSFiddle 열기
| inline | block | inline-block | |
|---|---|---|---|
| 기본 너비 | 컨텐츠만큼 | 부모의 너비만큼 | 컨텐츠만큼 |
width, height 속성 |
무시 | 적용 | 적용 |
| 가로공간 차지 | 공유 | 독점 | 공유 |
margin 속성 ( 바깥쪽 여백 ) |
가로만 적용 | 모두 적용 ( 상하 상쇄 ) | 모두 적용 |
padding 속성 ( 안쪽 여백 ) |
가로만 적용, 세로는 배경색만 | 모두 적용 | 모두 적용 |
👉 인라인 요소들 목록 보기
👉 블록 요소들 목록 보기
인라인 vs. 블록 요소의 구분의 의미
CSS의 display 속성은 기본적으로 inline 값을 갖지만, 브라우저는 기본적으로 div 등
블록 요소로 구분되는 요소들의 display 속성값을 block으로 지정합니다.
섹션 4(CSS 심화)의 상속 관련 강에서 보다 자세히 배우게 됩니다.
ul>li{홈}+li{회사소개}+li{제품소개}+li{고객센터}+li{커뮤니티}
/* display 속성을 추가해서 */
/* 이 목록을 상단바 메뉴 모습으로 바꿔보세요! */
ul > li {
margin-right: 2em;
}
display 속성의 list-item 값은 블록의 특성을 갖습니다.
<h1>뽀로로 엔딩송</h1>
<p>
개구쟁이 뽀로로 장난꾸러기 크롱 <br>
우람한 포비 조그만 해리도 <br>
사이 좋은 친구죠
</p>
<p>
영리한 에디 우직한 로디 <br>
수줍은 루피 발랄한 패티도 <br>
사이 좋은 친구죠
</p>
<p>
생긴 건 다르고 성격이 달라도 <br>
우리들은 친구죠 때로는 다투고 <br>
때로는 토라져도
</p>
<p>
언제나 돕고 언제나 이해하는 <br>
우리들은 친구죠 <br>
사이 좋은 친구죠
</p>
<p>
언제나 돕고 언제나 이해하는 <br>
우리들은 친구죠 <br>
사이 좋은 친구죠 사이 좋은 친구죠
</p>
p {
margin: 8px;
/* display: */
}