[생활코딩] inline block

은돌1113 2022. 1. 29. 17:29

728x90

HTML의 태그들은 태그의 성격에 따라서 화면 전체를 쓰는 태그와 자기 자신의 크기만큼만 사용하는 태그로 나뉩니다.

이것들을 inline 방식, block-level-tag(block-level-element) 방식이라고 칭합니다.

어떤 element가 block이고, 어떤 element가 inline인 지 보도록 하겠습니다!

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      h1,
      a {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
    안녕 <a href="https://naver.com">세상아</a>
  </body>
</html>

a 태그처럼 자신과 자신을 둘러싸고 있는 다른 텍스트, 정보와 하나의 같은 줄에 위치하는 형태의 태그(element)를 inline 태그라고 합니다.
h1 태그처럼 자기 혼자 화면 전체를 다 쓰는 태그를 block-level-elements이라고 합니다.

+ inline이던 block이던 간에 언제든 지 inline → block / block → inline으로 바꿀 수 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      h1,
      a {
        border: 1px solid red;
      }

      h1 {
        display: inline;
      }

      a {
        display: block;
      }
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
    안녕 <a href="https://naver.com">세상아</a>
  </body>
</html>

728x90