[HTML] Block & Inline 요소

1. block 요소

    (1) div, h1, p 

    (2) 사용 할 수 있는 최대 가로 너비를 사용한다.

 

HTML

<div> 코딩하는 신학생 </div>

CSS

div{
	background:red;
}

사용 할 수 있는 최대 가로 너비를 사용한다.

 

    (3) 크기를 지정할 수 있다.

 

CSS

div{
    background:red;
    width:100px;
    height:50px;
}

block 요소는 크기를 지정 할 수 있다

   

(4) witdh:100% height:0% 로 시작

     정확히는 width:auto height:auto 로 들어가 있지만 block요소와 inline 요소의 auto 구현이 다른 것!

 

(5) 수직으로 쌓임

 

HTML

    <div>코딩하는 신학생</div>
    <div>코딩하는 신학생</div>
    <div>코딩하는 신학생</div>

 

 

    (6) margin, padding 위, 아래, 좌, 우 모두 사용 가능

HTML

<div>1</div>
<div>2</div>

CSS

div{
    background:red;
    width:50px;
    height:30px;
}

 

margin, padding 적용 x

 

CSS

div{
    background:red;
    width:50px;
    height:30px;
    margin:10px;
    padding:5px;
}

 

margin, padding이 위, 아래, 좌, 우 모두 적용

 

    (7) 레이아웃을 잡는 용도로 사용!

2. inline 요소

    (1) span, img

    (2) 필요한 만큼의 너비를 사용한다.

HTML

<span>코딩하는 신학생</span>

CSS

span{
	background:red;
}

inline 요소는 필요한 만큼의 너비를 사용한다.

    (3) 크기를 지정할 수 없다. (width, height 지정해도 적용 x)

CSS

span{
    background:red;
    width:100px;
    height:50px;
}

 

width와 height를 지정해도 적용되지 않는다.

    (4) witdh:0% height:0% 로 시작 

        정확히는 width:auto height:auto 로 들어가 있지만 block요소와 inline 요소의 auto 구현이 다른 것!

   

(5)수평으로 쌓임

HTML

<span>코딩하는 신학생</span><span>코딩하는 신학생</span><span>코딩하는 신학생</span>

inline 요소는 수평으로 쌓인다.

HTML

<span>코딩하는 신학생</span>
<span>코딩하는 신학생</span>
<span>코딩하는 신학생</span>

HTML 코드에서 줄바꿈을 하면 inline요소 사이에 여백이 들어간다.

 

    (6) margin, padding 좌, 우만 사용 가능 (위, 아래 사용 x)

HTML

<span>1</span> <span>2</span>

CSS

span{
	background:red;
}

margin, padding 적용  x

CSS

span{
    background:red;
    margin:10px;
    padding:5px;
}

margin, padding이 좌,우에만 적용됨

 

    (7) TEXT를 넣는 용도로 사용!