개발자와 기획자가 꼭 알면 좋은 css - 3 display : inline

display: inline이 조금 내용이 많을 수 있는대요, 일단 대는대로 포스팅을 하겠습니다. (저도 어디까지 포스팅을 할지를 몰라서요;;;)

 

다음과 같이 background 색만 적용 시킨 2개의 sapan 태그가 있습니다.

 

 

 

초록 상자를 보시면 width와 height 가 240.7 , 21.6 이라고 나왔는대요,  

span 태그에 width: 220px; height: 200px; margin-top: 10px 을 적용 시켜 보겠습니다.

그러면 길이가 다른 2개의 span 태그의 width는 220px이고 height 는200px에 위에 간격이 10px 벌어진 span 태그의 모습이 예상이 될 겁니다.

 

띠로리~~~

하지만 예상한것과는 달리 녹색 박스와 빨간 박스를 보시면 알겠지만 분명 css는 들어갔는데, span 태그는 흰색 박스의 스타일을 적용하지 않았습니다.

 

왜 그런지에 대해서는 w3c 문서에 정의 되어 있는대요, 

제가 포스팅하는 주제는 display: inline이 화면에 이렇게 보여 주는구나 라는것을 포스팅 하는것이기 때문에 이유에 대해서는 넘어가겠습니다. 

lnline은 width 와 height가 적용되지 않는다고 명시 되어 있는것을 확인 하였는대요, 더 자세한 것을 알고 싶으신 분들은 여기서 확인 부탁드립니다. (https://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width)

 

위에 test로 width와 height와 margin-top은 화면에 적용이 되지 않는 것 을 알 수 있습니다.

나머지 margin-bottom, margin-left, margin-right, padding등이 적용되는지 테스트 해보겠습니다.

 

배경색이 tomato인 span 태그에게 margin-right, marign-left, margin-bottom 을 100px 추가하고 화면을 확인 해보겠습니다.

 

이미지를 확인하면 알겠지만 빨간 박스에 margin-bottom : 100px이 들어 갔지만 화면에서는 녹색 박스 영역이 변하지 않은 것을 알 수 있습니다.

 

display: inline 은 margin-right 와 marign-left 만 적용 되고  margin-top, margin-bottom은 적용이 안되는 것을 확인 할 수 있습니다.

 

이상태에서 배경색이 tomato인 span을 display: inline-block으로 수정 해서 확인 해 보겠습니다.

 

display: inline-block은 margin-bottom이 적용 된 것을 확인 할 수 있습니다.

 

2장에서 display display: inline-block은 margin이 다 적용 되는것을 확인 하였었습니다.

 

 

그밖의 display 속성 정리 포스팅 글

https://sh-sida.tistory.com/category/html%2C%20css/css-display%EC%86%8D%EC%84%B1%EB%93%A4%20%EC%A0%95%EB%A6%AC

'html, css/css-display속성들 정리' 카테고리의 글 목록