[CSS] 블럭 요소 vs 인라인 요소

Haeun Noh·2023년 2월 7일
0

HTML/CSS_개념

목록 보기
5/5

0207

블럭 요소와 인라인 요소의 차이점에 대해 알아보자.


블럭 요소의 특징

블럭 요소는 다음과 같은 세 가지의 특징을 가진다.

  1. 한 줄에 하나씩 쌓인다.
  2. 가로와 세로 길이를 직접 명시할 수 있다.
  3. 화면 배치를 위해 사용한다.

1. 한 줄에 하나씩 쌓인다.

    <div></div>
    <div></div>
div {
    width: 10px;
    height: 10px;
    background-color: #006bc0;

    margin: 5px;
}

div가 두 줄에 걸쳐 나타나는 모습이다.


2. 가로와 세로 길이를 지정할 수 있다.

    <div></div>
    <div></div>
div {
    width: 10px;
    height: 10px;
    background-color: #006bc0;

    margin: 5px;
    padding: 10px;/* 부풀리기 */
}

padding
padding



인라인 요소의 특징

인라인 요소는 다음과 같은 세 가지의 특징을 가진다.

  1. 한 줄에 걸쳐 여러 요소가 나온다.
  2. 가로 세로 길이를 직접 명시할 수 없다. 내용물의 크기만큼 가로 세로를 가진다.
  3. 텍스트를 꾸밀 때 사용한다.

1. 한 줄에 걸쳐 여러 요소가 나온다.

   <span>1</span>
   <span>2</span>
   <span>3</span>
span {
    padding: 10px;
}


2. 가로 세로 길이를 직접 명시할 수 없다.

   <span>1</span>
   <span>22</span>
   <span>333</span>
span {
	width: 10px;
    height: 10px;
    background-color: pink;

    padding: 10px;
}

크기를 얼마나 지정하든지 내용물의 크기만큼 가로 세로가 지정되는 모습이다.



profile
Tistory로 옮기게 되었습니다. @haeunnohh

0개의 댓글