인라인 요소와 블럭 요소

heejung·2022년 2월 22일

inline 요소

<a> <b> <br> <button> <cite> <em> <i> <img> <input> <label> <script>
<select> <small> <span> <strong> <sub> <sup> <textarea>
  • 내용부의 크기가 요소의 크기를 결정(자체적 크기X)
    - 높이(height), 너비(width), 외부/내부 여백(padding, margin) 설정 불가
  • 줄바꿈 강제X, 한 줄에 여러가지 요소 들어감
  • 블럭 레벨 요소 포함 불가 (포함해도 에러는 안 나지만 잘못 사용하는 것)

block level 요소

<article> <aside> <blockquote> <div> <footer> <form> <h1>~<h6>
<header> <hr> <li> <nav> <ol> <p> <section> <ul>
  • 자체적인 크기, 여백을 가짐
  • 강제 줄바꿈O, 부모 요소의 한 줄을 독점
  • 인라인 요소, 블럭 레벨 요소 포함 가능

inline-block 요소

inline 요소와 block 요소의 특징을 혼합

  • 자체적인 크기, 여백을 가짐
  • 줄바꿈 강제X
profile
프론트엔드 공부 기록

0개의 댓글