[5월 스터디 9DAY-1] HTML(inline, block)

J._NA 개발일지·2023년 5월 19일

HTML 의 inline 요소와 block 요소의 차이점을 설명해주세요. 예시도 들어주세요

  • 블럭요소(block element)와 인라인요소(inline element)란?

블럭요소: 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소들입니다.
인라인요소: 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들임. 행 안의 일부분이라고 보시면 됩니다. 텍스트 레벨 요소라고도 합니다.


- 블럭요소와 인라인요소의 종류
블럭요소: <div>, <table>, <h1>~<h6>, <p>, <from>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <pre>, <blockquote>
인라인요소: <span>, <a>, <br>, <em>, <strong>, <input>, <label>, <img>
  • 특징 및 주의점
    블럭요소는 내부에 블럭요소와 인라인 요소를 포함할 수 있습니다.
    인라인 요소는 내부에 블럭요소를 포함할 수 없습니다.
    블럭요소들 중에서도 인라인요소만 포함할 수 있는 것들이 있습니다.
    인라인요소를 css로 블럭화하여 내부에 블럭요소를 포함시킬 수도 있습니다.
    브라우저에 보여지는데는 아무런 문제가 없지만 유효성에 어긋납니다.
profile
아밥 & 프론트엔드 개발자

0개의 댓글