대부분의 HTML element(이하 요소)는 block 요소와 inline 요소로 나눌 수 있다.
아래의 태그들은 block요소에 해당한다.
<header>, <footer>, <p>, <li>, <table>, <div>, <h1> 등
⭐️ block요소는 옆에 다른 요소를 붙여넣을 수 없다
아래의 태그들은 inline요소에 해당한다.
<span>, <a>, <img>
⭐️ inline 요소끼리는 서로 한 줄에, 바로 옆에 위치할 수 있다.
아래의 코드를 통해,
1.block 요소와inline 요소를 확실히 파악해보고
2css를 통해block 요소를inline 요소로 바꿔줄 수 있고 그 반대 또한 가능하다는 것을 확인해보자.
(위코드에서 제공한 스터디 자료를 내 이해를 돕기 위해 조금 코드를 바꿔서 짜보았다😋)
<body>
<p>나는 p 태그이고 블록 요소에 해당돼, 내 옆으로는 아무도 못와!</p>
<span>
난 span 태그이고 인라인 요소야, 나와 같은 인라인 요소는 옆에 올수 있지
</span>
<a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/a">
난 a 태그고 보다시피 인라인이라 span 옆에 붙을 수 있어.
</a>
<br /><br />
<p class="inlineP">block 요소인 p 태그를 inline 요소로 변경 완료 :)</p>
<br />
<span>span은 원래 inline 요소인데</span>
<span class="blockSpan">block으로 변경 완료 :)</span>
<p class="floatLeft">왼쪽 float</p>
<p class="floatRight">오른쪽 float</p>
</body>.inlineP {
display: inline-block;
}
p {
background-color: yellow;
}
span {
background-color: greenyellow;
}
a {
background-color: darkorange;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.blockSpan {
display: block;
}
[CSS] display property
display 속성은 요소를 어떻게 보여줄지를 결정한다.
주로 아래 4가지의 속성값이 쓰이는데, 태그마다 기본값이 다르다.
none : 보이지 않음
block : 블록 박스
inline : 인라인 박스
inline-block : block과 inline의 중간 형태로, 줄 바꿈이 되지 않지만 크기를 지정할 수 있다.
inline-block은 좀 더 이해를 돕기 위해 아래 예제를 참고하자!
.inline-block1{
display: inline-block;
background: #09c;
height: 45px;
/* 원래 inline 요소의 높이는 글자(폰트)의 높이를 바탕으로 설정되지만,
inline-block을 이용하면 임의로 높이 또한 설정을 할 수 있습니다. */
}
.inline-block2{
display: inline-block;
width: 200px; /* 이 값은 이제 정상 작동합니다 */
border: 3px solid #999;
}<p>
Lorem ipsum dolor sit amet, <span class="inline-block1">consectetur adipiscing elit</span>,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in <span class="inline-block2">reprehenderit</span>
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
출처: https://ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1 (inline-block예제)
