CSS 디스플레이 속성 정리

2021. 12. 29. 13:30·HTML | CSS

HTML 요소들은 기본적으로 블록 또는 인라인 디스플레이 속성을 갖습니다. 크게 네 가지의 디스플레이 속성이 존재합니다.

  • block
  • inline
  • inline-block
  • none

block

디스플레이 속성 값이 블록(block)인 요소의 너비는 가로 전체에 해당하며, 새로운 라인에 표시됩니다.

대표적인 태그로는 <div>, <h>, <p>가 있으며, width, height, margin 등의 속성을 적용할 수 있습니다.

 

See the Pen display: block; by 11292021 (@11292021) on CodePen.

inline

디스플레이 속성 값이 인라인(inline)인 요소의 너비는 해당 요소의 내용에 해당하며, 새로운 라인에서 시작되지 않습니다.

대표적인 태그로는 <span>, <a>, <em>등이 있으며, 너비나 높이는 지정할 수 없습니다. 마진과 패딩의 경우에는 상하의 값은 무시되고 좌우의 값만 적용됩니다.

 

See the Pen display: inline; by 11292021 (@11292021) on CodePen.

inline-block

디스플레이 속성 값이 인라인블록(inline-block)인 경우 해당 요소는 인라인 요소처럼 기능하며, 요소 내부에서는 블록처럼 작동합니다.

배치는 inline 속성을 따라 되지만 block 요소에서처럼 너비와 높이, 마진과 패딩을 적용할 수 있습니다.

 

See the Pen display: inline-block; by 11292021 (@11292021) on CodePen.

none

디스플레이 속성에 none이 적용된 요소는 웹페이지에서 보이지 않는 동시에 레이아웃에서도 사라집니다.

디스플레이 속성 값은 태그에 따라 기본적으로 부여되지만 CSS를 통해 변경할 수도 있습니다. 다음은 block 요소에 none 속성을 적용하는 예시입니다.

 

See the Pen display: none; by 11292021 (@11292021) on CodePen.

반응형

'HTML | CSS' 카테고리의 다른 글

HTML 새 탭에서 열기 방법과 탭내빙 공격  (0) 2022.04.09
CSS 요소 크기 설정: 절대적, 상대적 지정 방법  (0) 2022.04.09
CSS 포지션 속성 정리  (0) 2021.12.29
'HTML | CSS' 카테고리의 다른 글
  • HTML 새 탭에서 열기 방법과 탭내빙 공격
  • CSS 요소 크기 설정: 절대적, 상대적 지정 방법
  • CSS 포지션 속성 정리
휘 Hwi
휘 Hwi
개발자 성장 로그
  • 휘 Hwi
    개발자 로그: 변화를 위한 공간
    휘 Hwi
  • 전체
    오늘
    어제
    • 분류 전체보기 (61)
      • 101 (1)
      • Web | Internet (4)
      • HTML | CSS (4)
      • Python (9)
      • Django (20)
      • Javascript (0)
      • Node.js (0)
      • React (0)
      • React Native (0)
      • Database (1)
      • Git (1)
      • Terminal | Vim (1)
      • Auth | Security (4)
      • AWS (0)
      • Docker (0)
      • Kubernetest (1)
      • Deployment (1)
      • Project (2)
      • TIL (12)
  • 블로그 메뉴

    • 홈
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    정규 표현식
    JWT 인코딩
    HTTP GET 요청
    깃 ssh
    장고 프로젝트
    프로젝트 회고
    깃 에러 해결
    깃 퍼블릭 키 등록
    JWT 디코딩
    장고 Views
    css
    장고 URL
    target="_blank"
    장고
    깃
    JWT
    깃 오류
    HTTP POST 요청
    파이썬
    요소 상대 크기
    요소 크기 설정
    html
    배포
    TIL
    HTTP
    파라미터
    요소 절대 크기
    새 탭에서 열기
    탭내빙
    함수
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
휘 Hwi
CSS 디스플레이 속성 정리
상단으로

티스토리툴바