[TIL] inline, inline-block, block

min00young·2020년 10월 21일
0

목표

  • HTML 엘리먼트의 기본속성인 inline, block에 대해서 알아봅니다.

block

HTML 엘리먼트가 가지고 있는 기본속성중에서 block은 자신옆에는 다른엘리먼트가 위치하지 못하고, 자신이 화면의 한줄 자체를 차지하는 경우입니다. 아래의 태그들이 block요소를 가지고있는 태그들입니다.

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

inline

inline 속성을 가진 태그들은 웹브라우저에서 보여지는 페이지에서 자신의 옆에 다른태그가 위치할수있으며, 한줄에 여러태그가 위치할수있습니다. 대표적인 태그들은 아래와 같습니다.

<span>, <a>, <img>

기본속성이 바뀌는 경우 (inline-block)

HTML태그들이 기본적으로 가지고 있는 속성이 있지만, 설정을 통해서 반대되는 속성으로 바꾸는것이 가능합니다.

  • block -> inline
display: inline-block;
  • inline -> block
display: block;

안보이게 만들기(none)

HTML 엘리먼트의 속성 변경을 display를 통해서 하는데, display값중에서 none을 통해서, 해당 태그 요소를 안보이게 할수 있습니다. 단순히 안보이게 하는것이 목적이 아니라, 자바스크립트를 통해서 보여지고 있는 엘리먼트를 안보이게, 안보였던 엘리먼트를 보이게 만드는 역할을 합니다.

profile
개발공부를 하면서 배우고 경험하고 앞으로 알아가야할것들에 대해서 정리하고 있습니다 🙂

0개의 댓글