ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 개발자와 기획자가 꼭 알면 좋은 css - 2. display : inline-block
    html, css/display 2018. 7. 14. 18:12

    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 태그의 widthheight보여줍니다.


    width222px이유는 위에 이미지의 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, selectbutton   display : inline-block 으로 기본 설정 되어 있는 것을 알 수 있습니다. 



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










     








    댓글 2

Designed by Tistory.