Block vs Inline

younghyun·2022년 2월 2일
0
  • display
    display는 CSS에서 레이아웃을 제어하기 위한 가장 중요한 프로퍼티입니다. 모든 엘리먼트에는 엘리먼트의 유형에 따라 기본 표시값 있음.

  • block element ( block-level )
    요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없음.
    태그를 사용해 요소를 삽입했을 때, 혼자 한 줄(너비100%)을 차지하는 요소. 다음 요소가 양 옆으로 붙을 공간이 없어서 자연스레 줄넘김 됨.

    <p>, <h1>~<h6>, <ul>, <ol>, 
    <div>, <blockquote>, <form>, 
    <hr>, <table>, <fieldset>, <address>
    • 상, 하, 좌, 우 외부/내부 여백 적용 가능
  • inline-block
    속성은 인라인처럼 컨텐츠 크기 만큼 표현하면서 margin, padding, width, height 속성을 정의하면 표현해줌.

    • 상, 하단 외부 여백 속성을 margin, line-height 두 가지 속성 모두를 통해 설정 가능.
  • inline element ( inline level )
    요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻
    줄을 차지 하지 않는 요소. 브라우저같은 화면에 표시되는 컨텐츠만큼 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음. 따라서 한 줄에 여러 개 인라인 레벨 요소를 표시하는 것이 가능

    • 상/하 내부, 외부 여백(margin, padding)속성을 정의해도 적용되지 않음. ( 좌, 우는 반영됨 )
    • 너비(width)와 높이(height) 속성이 적용되지 않음. 인라인 요소의 너비 및 높이는 태그가 품고 있는 내부 요소 부피에 맞춰짐.
      <a>, <img>, <object>, <br>, <sub>, <sup>,
      <span>, <input>, <textarea>, <label>, <button> 
  • 요소 성질 변경
    inline -> block
    inline 성질을 갖도록 하는 CSS property는 display 와 float 이 있음

    .inline-p {
      display: inline-block;
    }
    .float-left {
      float: left;
    }
    .float-right {
      float: right;
    }

    해당 property에 위와 같은 값을 부여하면, 요소 옆에 요소가 위치하는 inline 성질로 변하게 됨.

    float속성 : 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치 되어야 함을 지정.

    block -> inline

    .block-span {
      display: block;
    }
  • display : none
    해당 요소는 화면에서 보이지 않음. interactive한 웹을 구현할 수 있음. 엘리먼트가 존재하지 않는 것처럼 페이지가 렌더링됨. visibility: hidden;으로 설정하면 엘리먼트가 감춰질 테지만 해당 엘리먼트는 완전히 보이지 않게 되더라도 여전히 공간을 차지함.

profile
선명한 기억보다 흐릿한 메모

0개의 댓글