[CSS] Block VS Inline

2023. 2. 14. 15:27·Web
반응형

CSS에서 가장 많이 사용하는 속성 중 하나로 display가 있다. 

display는 요소를 어떻게 배치할지를 나타내는데, 일반적으로 block, inline, inline-block이 있다. 

 

Block vs Inline 

block

block은 전체 라인을 모두 가지고 있다. 또한 width 값을 줘서 공간이 남더라도 나머지 공간에 다른 요소가 들어올 수 없다. 

inline

inline은 컨텐츠의 크기만큼의 영역을 가지고 있으며, 한 라인에 여러 요소가 배치될 수 있다. 

 

block의 대표적인 태그로 div가 있고, inline의 대표 태그로 span이 있다. 

여기서 하나의 특징이 더 나오는데, div 안에는 span을 넣을 수 있지만 span 안에는 div를 넣을 수 없다. 

 

즉, block 안에는 inline이 들어올 수 있지만 inline 안에는 block이 들어올 수 없다. 

그 외에도 몇가지 다른 점이 있는데, 정리하자면 

 

block 

▶ 줄 바꿈이 일어난다. 
    항상 새로운 라인에서 시작한다. 

▶ 부모의 전체 너비 ( width )를 차지한다. 

▶ width와 height 설정이 가능하다. 

▶ 상하 마진( margin-top, margin-bottom )을 가질 수 있다. 

▶ inline과 block을 자식 요소로 가지고 있을 수 있다. 

▶ div, p, h1 ~ h6, ul, ol 이 대표적인 block 속성을 가지고 있는 태그이다. 

 

inline 

▶ 줄 바꿈이 일어나지 않는다. 

    새로운 라인에서 시작하지 않으며, 어디서나 시작할 수 있다. 

▶ 컨텐츠의 너비만큼 차지한다. 

▶ width와 height을 설정할 수 없다. 

▶ 상하 마진을 가질 수 없다. 

▶ block을 자식 요소로 가지고 있을 수 없다. 

▶ span, a, small, big, strong이 대표적인 inline 속성을 가지고 있는 태그이다. 

 

inline-block 

inline과 block을 짬뽕시킨 것 같은 이름을 가진 속성 inline-block이 있다.

이것은 실제로 둘의 특징을 가지고 있는데, 

 

inline

▶ 줄 바꿈 없이 한 줄에 다른 요소들과 배치가 가능하다. 

 

block 

▶ width, height, margin-top, margin-bottom 설정이 가능하다. 

 

다음과 같은 특징을 가지고 있다. 

반응형
저작자표시 비영리 변경금지 (새창열림)

'Web' 카테고리의 다른 글

[CSS] 사파리 환경 input 스타일 초기화  (0) 2023.03.13
[HTML] 크롬 & 사파리 Video  (1) 2023.03.12
[CSS] Toggle 버튼  (0) 2023.02.18
[CSS] 가상 요소 vs 가상 클래스  (0) 2023.02.17
[CSS] user-select  (0) 2023.02.15
'Web' 카테고리의 다른 글
  • [HTML] 크롬 & 사파리 Video
  • [CSS] Toggle 버튼
  • [CSS] 가상 요소 vs 가상 클래스
  • [CSS] user-select
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    식물
    바질 키우기
    Babel
    타입스크립트
    react
    네이버 부스트캠프
    알고리즘
    영어독학
    CSS
    ChatGPT
    프로그래머스
    다이소
    덤프
    바질
    영어회화
    타일러영어
    CCNA
    ReactNative
    javascript
    Docker
    webpack
    리액트
    리얼학습일기
    typescript
    리얼클래스
    Node.js
    next.js
    네트워크
    자바스크립트
    redux
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
[CSS] Block VS Inline
상단으로

티스토리툴바