ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 블록 레벨 ( Block level ) 요소와 인라인 ( Inline ) 요소에 대하여
      Knowledge/HTML & CSS 2019. 12. 10. 16:14
      반응형

       

      HTML 요소들은 모두 블록 레벨 ( Block level ) 요소와 인라인 ( Inline ) 요소로 분류할 수 있습니다 

       

      - 블록 레벨 요소 ( Block Level Elements )

       

      • 특징
      1. 새로운 줄에서 시작합니다.
      2. 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다.
      3. 다른 블록 레벨 요소와 인라인 요소들을 포함할 수 있습니다.
      4. 블록 레벨 요소 자체를 text-align을 활용해 가운데 정렬할 수 없습니다.
      5. 블록 레벨 요소 자체를 Vertical-align을 활용해 수직 정렬할 수 없습니다.
      • 블록 레벨 요소인 요소들
      1
      2
      3
      <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> 
      <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> 
      <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

       

      ( 혹시나 해서 사족을 달자면 위의 태그들을 암기하듯 외우는 건 무의미하다고 생각합니다. 어차피 쓰다보면 체화되거든요. )

       

      - 인라인 요소 ( Inline Elements )

       

      • 특징
      1. 새로운 줄을 만들지 않습니다.
      2. 필요한 너비만 차지합니다.
      3. 다른 인라인 요소를 포함할 수 있습니다. ( 인라인 요소가 블록 레벨 요소를 포함하는 건 웹 표준에 어긋납니다 )
      4. height가 적용되지 않습니다.
      5. width가 적용되지 않습니다
      • 인라인 요소인 요소들
      1
      2
      3
      <a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> 
      <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script>
      <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

       

      ( 위에도 적었지만 이거 억지로 외우지 마세요. 저도 복붙한 겁니다 )

       

      - 요소 레벨 변경

       

      이러한 HTML 요소들은 CSS의 display 속성을 활용해 변경할 수 있습니다.

       

      예를 들어

       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <title>블록 레벨 요소 / 인라인 요소</title>
          <style>
              div {
                  background: #3498db;
              }
              span {
                  background: #f1c40f;
                  width: 500px;
              }
          </style>
      </head>
      <body>
          <div>
              block
          </div>
          <span>
              inline
          </span>
      </body>
      </html>

       

      이런 코드가 있으면

       

      위와 같이 블록 레벨 요소인 div는 전체 범위를 차지하고 있고 인라인 요소인 span은 width 값을 500이나 줬음에도 불구하고 적용되지 않아 글자만큼의 범위만 가지고 있는 것을 볼 수 있지만 

       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <title>블록 레벨 요소 / 인라인 요소</title>
          <style>
              div {
                  background: #3498db;
                  display: inline;
              }
              span {
                  background: #f1c40f;
                  width: 500px;
                  display: block;
              }
          </style>
      </head>
      <body>
          <div>
              block
          </div>
          <span>
              inline
          </span>
      </body>
      </html>

       

      display 속성을 활용해 div를 inline요소로 span을 block-level 요소로 바꾸면

       

      두 요소의 성질이 뒤바뀌는 것을 확인할 수 있습니다.

      참조

       

      W3School - HTML Block and Inline Elements

      MDN - 블록 레벨 요소 와 인라인 요소

      트루먼 - HTML5 태그의 블록 요소와 인라인 요소

       

       

       

      반응형

      'Knowledge > HTML & CSS' 카테고리의 다른 글

      <script> 태그는 어디에 위치해야 할까요?  (0) 2023.07.04
      overflow와 clear 속성을 활용해 float을 해제하는 방법  (0) 2019.12.10
      CSS 클래스명을 정돈해보자 BEM ( Block, Element, Modifier ) 방법론  (0) 2019.11.14
      반응형 웹 기초 뷰포트(View port) 와 미디어 쿼리(Media Queries)  (0) 2019.11.13
      HTML 문서의 기본구조 ( DOCTYPE, html, head , meta, title, body )  (0) 2019.10.08

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바