HTML element

Yeonn·2023년 4월 9일
0

HTML+CSS

목록 보기
3/8
post-thumbnail

01 HTML element

01-1 block element

대부분의 element(요소)는 block 요소이다.

block요소는 해당 요소의 전체 가로 넓이를 모두 포함해,
따로 스타일을 적용하지 않으면 이 요소 옆에 다른 요소를 붙여 넣을 수 없다.
다음은 block요소에 해당하는 태그들이다.

<div>, <li>, <p>, <h1>, <table>

01-2 inline element

반대의 성격을 가진 inline요소도 있다.
inline 요소는 해당 요소의 넓이만큼만 영역을 갖기 때문에
글자처럼 나열되는 성격을 가지고 있다.
다음은 inline요소에 해당하는 태그들이다.

  <span>, <a>, <img>

02 Display

02-1 display: block; / inline;

위에서 언급한 것과 같이 html 요소들에는 각각의 성격이 정해져 있다. 하지만 작업을 하다보면 block 요소를 가진 객체들을 나열해야 할 상황도 있고, inline 요소를 쌓아서 표현하고자 할 때도 있다.

이럴 때 사용되는 태그가 display 이다.

    selector{display: block;}

위와 같이 작성하면 해당 요소는 block요소로 변경된다.
span 이나 img 같은 inline 요소의 태그들을 block 요소로 변경 할 때 사용된다.

    selector{display: inline;}

반대로 위와 같이 작성하면 해당 요소는 inline요소로 변경된다.
li, div, p 와 같은 block요소의 태그들을 inline요소로 변경할 때 사용된다.

02-2 display: inline-block;

inline으로 지정하면 한줄로 나열이 가능하지만 width, height, margin을 지정할 수 없다.
block으로 지정하면 앞에서 말한 값을 지정할 수 있는 대신 한줄로 나열할 수 없다.

이런 특성을 결합하여 쓰고자 할 때 사용 되는 것이 inline-block이다.

<div class="box">block01</div>
<div class="box">block02</div>
<div class="box">block03</div>
.box{display: inline-block;}

위의 박스 들은 divblock요소였지만, display: inline-block속성을 부여해 inline요소의 성격도 가지게 되었다.

그래서 각각 width, height, margin 값 등을 가지면서 한 줄로 나열될 수 있게 되었다!

02-3 display: none;

해당 요소와 그 요소에게 부여된 공간 모두 표시하지 않는다.
visibility:hidden과 비슷한 속성이지만 화면에서 공간까지 사라진다는 점에서 다르다. 반응형 웹을 만들고자 할 때 사용된다.

0개의 댓글