Front-End/css

css display(inline, block, inline-block, none), inline과 block 레벨

M9M9 2020. 10. 25. 17:17

html의 요소를 화면에 어떻게 보이게 할지를 정해주는 속성인 display에 대해 정리해보겠다.

 

 

 

 

 

 

inline과 block

속성을 정리하기 앞서 inline과 block 레벨의 차이점을 정리해보겠다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

    <section id="container">
      <div></div>
      <div></div>
      <div></div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      
    </section>

</body>
</html>
div{
  width:70px;
  height:70px;
  background:red;
  margin-bottom:20px;
}

span{
  background:black;
  width:20px;
  height:20px;
}

 

위의 html, css코드의 결과는 아래의 사진이다.

 

div가 block 레벨이고, span이 inline 레벨이다.

 

그런데 이 코드를 작성하며 알 수 있는 사실은

 

block레벨

첫째, 위에서 아래로 열을 기준으로 블록처럼 쌓인다.

둘째, 태그 안에 텍스트를 작성하지 않아도 화면에 표현할 수 있다.

셋째, width, height를 통해 화면에 보이는 크기를 조절할 수 있다.

 

 

inline레벨 

첫째, 왼쪽에서 오른쪽 행을 기준으로 쌓인다.

둘째, 태그 안에 꼭 텍스트를 적어야만 화면에 표현할 수 있다.

셋째, 크기를 width, height를 통해 설정할 수 없고, 작성한 내용의 크기에 맞춰 설정된다.

 

 

block과 inline은 이러한 차이점들이 있다.

 

 

 

 

display:block

block 속성은 위에서 설명한 대로 block 레벨로 보이게 하는 것이다.

이 속성을 적용하게 되면 inline으로 설정되어있는 태그도 block 속성처럼 표현할 수 있다.

 

 

 

div{
  width:70px;
  height:70px;
  background:red;
  margin-bottom:20px;
}

span{
  background:black;
  width:40px;
  height:40px;
  display:block;
    margin-bottom:20px;
}

 

 

 

 

검은색 박스는 span태그(inlie)로 만들었지만, display 속성을 block로 변경하면 위에서 아래로 block처럼 쌓이는 모습을 볼 수 있다.

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

    <section id="container">
      <div>1</div>
      <div>2</div>
      <div>323123131231231231231312</div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      
    </section>

</body>
</html>

 

 

div{
  width:70px;
  height:70px;
  background:red;
  margin-bottom:20px;
  display:inline;
}

span{
  background:black;
  width:40px;
  height:40px;
  display:block;
    margin-bottom:20px;
}

 

 

 

기존에 block 레벨을 갖고 있던 div태그를 inline 속성을 적용하니 inline 레벨처럼 보이게 된다.

그리고 div태그 안에 텍스트를 적어야만 화면에 보이게 되고,

width, hieght값도 무시하고 작성한 내용만큼 크기를 갖는다.

 

 

 

 

display: inline-block

inline-block 속성은 inline 속성과 block속성이 합쳐졌다고 볼 수 있다.

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

    <section id="container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      
    </section>

</body>
</html>
div{
  width:70px;
  height:70px;
  background:red;
  margin-bottom:20px;
  display:inline-block;
}

span{
  background:black;
  width:40px;
  height:40px;
  display:inline;
    margin-bottom:20px;
}

 

 

빨간색 박스를 inline-block으로 설정하면 왼쪽에서 오른쪽 행 방향으로 채워 진 후 브라우저의 공간이 부족하면 아래줄로 내려가 다시 행방 향으로 쌓이게 된다.

 

즉, inline과 block속성이 합쳐졌다고 볼 수 있다.

 

 

 

 

 

display:none

none을 적용하면 화면 상에 아무것도 출력되지 않는다.

저작자표시