CSS | Display

katej927·2020년 12월 17일
0

HTML/CSS

목록 보기
6/8
post-thumbnail

display의 값

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;
        }
profile
°˖✧ Dreams come true ✧˖°

0개의 댓글