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

2. display : inline-block;특징

 

lnline-block의 특징에 대해서 알아보겠습니다.

저번 장에서 input 태그가 display : inline-block 인 것을 알았는대요, 그래서

 

다음과 같은 스타일을 적용한 input 태그 2개를 코딩한 화면 과 소스를 보겠습니다.

 

 

위에 이미지를 보시면 display : inline-block 의 특징을 알 수 있는대요,

 

제일 먼저 확인 할 수 있는 특징은 display : block 이랑 다르게 display : inline-block 은 태그 끼리 옆으로 붙는 것을 볼 수 있습니다. (저번장에서 display: block은 태그 순서대로 위, 아래로 쌓는 모습으로 화면에 나타 나는 것을 확인 하엿습니다.) 

그리고 그다음 특징은 display : block 과 마찬가지 로 width, height, padding 이 적용 되는 것을 확인 할 수있습니다.(display: block도 패딩이 적용 되는대요 저번장에서 패딩이 적용된 모습은 생략 하였습니다.;;) 

 

위에 이미지에 보라색 박스 안에 222 X 52  라고 보이는데 크롬 요소 검사 창에서 input 태그를 클릭하면 클릭한 

input 태그의 width와 height를 보여줍니다.

 

width가 222px인 이유는 위에 이미지의 css 내용을 보면 width : 200px 그리고 왼쪽, 오른쪽에 각각 padding : 10px , 그리고 왼쪽, 오른쪽에 각각 1px 씩  border를  적용 하였는대요, 이 숫자들을 다 더하면 200 + 10 + 10 + 1 + 1 이렇게 해서 222px 이 되었습니다. (height도 마찬가지로 이런식으로 계산 합니다. )

 

브라우저 요소 검사 창에서 222 X 52 이렇게 나왔다는 것은 width , height , padding , border 가 다 적용 되었다는 것을 알 수 있습니다.

 

포스팅에서 는 margin이 적용된 test 이미지는 생략 하였지만 margin도 적용이 됩니다. (display: block 도 margin이 적용 됩니다.) 

 

또 다른 특징은 inline-block 태그 끼리 열 맞춤이 가능 합니다. (열맞춤에 대해서는 display : lnline 할 때 더 자세히 설명 하겠습니다.)

 

vertical-align 이라는 css 속성 으로 top 정렬, middle 정렬, bottom 정렬을 할 수있는대요, 아래 이미를 참고 부탁드립니다.

 

vertical-align : top;

 

vertical-align : middle;

 

 

vertical-align : bottom;

 

추가 설명을 하자면  vertical-align 속성은 태그가 2개 이상 있을때 옆에 있는 태그들을 비교하여 정렬을 할 수 있습니다.  그리고 display : block 속성을 갖는 태그들은 적용 되지 않습니다.

 

display : inline-block 속성인 태그들은 input 외에 어떤 태그들이 있는지 w3schools 에 정리가 되어 있는것을 찾지 못하였는대요, 아래에 이미지를 보시면 알겠지만

 

input, textarea, select,  button 가  display : inline-block 으로 기본 설정 되어 있는 것을 알 수 있습니다. 

 

 

display : inline-block 의 특징에 대해서는 이상으로 마치고 다음 장엔 display : inline 에 대해서 설명하겠습니다.

 

그밖의 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속성들 정리' 카테고리의 글 목록