[html, css 응용] 5. css - block, inline

이번 강의에서는 block element, inline element를 배워보자.

 

html 요소중에는 크게 block 요소와 inline 요소가 있다. block 요소에는 p, h1 등이 있고 inline 요소에는 img, a 등이 있다. block요소는 특징은 full line, new line 이고 inline요소는 둘 다 해당되지 않는다.

full line 이란 하나의 요소가 한 줄을 모두 사용하는 것을 뜻하고 new line은 여러 block요소들이 있으면 그만큼의 new line을 요구하는 것을 뜻한다.

 

예시) p가 차지하는 영역 vs a가 차지하는 영역 ( 파란 박스 )

 

 

inline의 주요 특징

1. top, bottom에 margin 속성이 적용되지 않는다.

2. padding을 적용하였을 경우 다른 요소를 밀어내지 않는다. ( block 요소는 밀어냄 ) - 1번 때문인거 같긴한데...

 

1, 2번 특징의 결과로

이런 상황이 발생될 수 있다. 이 때 display를 이용하여 inline -> block으로 변경할 수 있다.

 

소스코드

a{
    padding: 12px 48px  ;
    background-color: rgb(167, 1, 78);
    color: white;
    border: 1px solid rgb(167, 1, 78);
    border-radius: 4px;
    font-size: 24px;
    display: block;
}

 

실행결과

 

+ disply -> inline-block으로 inline속성 + 마진가능(=다른요소 밀어내기 가능)

 

 

소스코드

a{
    padding: 12px 48px;
    background-color: rgb(167, 1, 78);
    color: white;
    border: 1px solid rgb(167, 1, 78);
    border-radius: 4px;
    font-size: 24px;
    display: inline-block;
    margin: 10px;
}

실행결과