display의 값

• 기본 값: block, inline, inline-block, none

• 이 외: list-item, table 등 전체 목록 링크

block 요소

• 대부분의 HTML element(이하 요소)가 해당

• 의미

  이 요소 바로 옆(좌우측)에 다른 요소 안됨.

• 새 줄에서 시작해 좌우로 최대한 늘어남

• 대표적: p, form

  추가 : header, footer, section

• block 엘리먼트 정중앙에 위치 시키기.

  1. width 설정
  2. 좌우 마진 auto로 설정

  • 유일한 문제

    브라우저 창이 엘리먼트 너비보다 좁을 때

    → 해결 1 : 브라우저에서 스크롤 바 생성

    → 해결 2 : width 대신 max-width로 설정

    • 브라우저의 작은 창 처리 방식 개선
    • 사이트를 모바일 환경에서도 사용 가능 하게 만들 때 중요

inline 요소

• 요소 옆에 위치할 수 있음 (block 요소 반대)

  ex. span, a, img 태그 등

inline-block 요소

• inline과 비슷 + 너비, 높이 지정 가능

• 브라우저 너비를 채우고 알맞게 줄바꿈되는 박스 그리드 제작하는 쉬운 방법 (clear안 써도 됨.

  (↔ float(어려운 방법. clear써야 함.))

• 레이아웃을 잡기 위해 사용 가능

  • 염두 할 점
    • vertical-align 프로퍼티의 영향 받음(아마 이 프로퍼티는 top으로 설정하고 싶을 것)
    • 각 칼럼의 너비를 설정할 필요 有
    • HTML의 각 칼럼 사이에 공백이 있으면 칼럼 간에 틈이 발생

none 요소

• 특별한 엘리먼트(script 등)에서는 none이 기본 값

• JS에서 엘리먼트를 실제로 삭제하고 재생성하지 않고도 엘리먼트를 보이고 감추는 데 사용

• visibility 와 다르다

  display: none; ⇒ 엘리먼트가 마치 존재하지 않는 것처럼 페이지가 렌더링

  visibility: hidden; ⇒ 보이지 않게 되더라도 여전히 공간을 차지
  

CSS property( inline/block 성질을 갖도록 하는 )

• 대부분 inline, block 성질에 의해 태그가 결정되지만, 아무 태그나 사용해도 결국은 CSS를 통해 얼마든지 성질을 바꿀 수 있습니다.

• display

  값:
  block ( block으로 만듦 )
  inline-block ( inline 으로 만듦 )
  none ( 안 보이게 만듦 )

• float

        # inline 성질로 변하게 하는 CSS

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

        # block 성질로 변하게 하는 CSS

        .block-span {
          display: block;
        }