[CSS] display 속성 : inline, inline-block

 

이전에는 display속성중의 기본인 block에 대해 설명 드렸습니다.

 

두번째로는 inline속성에 대해 설명 드릴게요.

 

inline 요소에 해당하는 태그들은  span, a, em 등이 존재합니다.

---

inline

inline속성은 block속성에서도 설명 드렸듯이 한줄로 나열되는 속성입니다.

 

다시, 한번 코드를 보며 설명드릴게요.

 

html코드는 block속성에 참고코드와 동일하니 참고 바랍니다.

 

.box{
    padding: 50px;
    display: inline; <!-- block->inline -->
}

.red{
    background-color: #e46e80;
}

.blue{
    background-color: #5195ee;
}

.green{
    background-color: #32b9c1;
}

.yellow{
    background-color: yellow;
}

 

css코드는 이렇게 변경되었습니다.

 

출력을 보시겠습니다.

---

 

보시는 이미지와 같이 가로로 정렬되는걸 아실 수 있습니다.

 

inline 속성은 width, height 속성을 지정해도 무시된다는점이 있습니다.

 

margin, padding으로 좌우 간격만 반영이 된다는 점 아시면 되겠습니다.

 

다음은 inline block입니다.

 

---

 inline-block

마지막으로 inline-block입니다.

inline 요소에 해당하는 태그들은  button,input,select 등이 존재합니다.

 

inline-block은 inline처럼 가로로 배치가 가능하지만

inline속성에서 사용하지 못했던 width,heighr,margin,padding을 자유롭게 사용가능합니다.

 

내부적으론 block의 규칙을 따르지만 외부적으론 inline의 규칙을 따르는것입니다.

 

예를 들어 보겠습니다.

 

.box{
    padding: 50px;
    display: inline-block;
}

.red{
    background-color: #e46e80;
    width: 30px;
    height: 30px;
    margin: 10px;

}

.blue{
    background-color: #5195ee;
    width: 25px;
    height: 25px;
    margin: 10px;
}

.green{
    background-color: #32b9c1;
    width: 20px;
    height: 20px;
    margin: 10px;
}

.yellow{
    background-color: yellow;
    width: 15px;
    height: 15px;
    margin: 10px;
}

 

inline속성과 다르게 width,height등 태그를 작성해주었습니다.

 

결과는

.

.

.

 

태그들이 적용된걸 확인할 수 있습니다.

 

이렇게 inline-block같은 경우는 앞서 배운 inline과 달리 자유로운 수정이 가능합니다.

 

테마나 틀을 짤때 유용하게 사용가능해 보입니다.

 

이상으로 css속성의 display를 알아보았습니다.

 

감사합니다.