html display:inline 속성에 대하여

 

html  display:inline 속성에 대하여

오늘은 display:inline 속성에 대하여 알아보겠습니다.

 

쉽게 설명드리면 inline은 내용물의 크기 만큼 div태그의 가로,세로 크기를 주는 것입니다.

div 라인이 안의 내용물 크기만큼 변합니다.윗 글에서 div 태그는 block설정을 기본적으로 가지고 있다고 했습니다.

display:block이라는 설정은 따로 값을 넣어주지 않아도 기본으로 설정 되어 있고 inline 값을 줄려면 display:inline으로 값을 변경하면 되는 것입니다. 여기서 한가지 더 inline은 가로,세로 크기가 따로 지정이 되지 않기 때문에 크기를 자율스럽게 할려면 block이 낫겠죠?

block 설정은 예상이 되시죠? 쉽게 이야기 해서 가로 크기를 다 차지 한다고 보면 됩니다.위에 값을 줬습니

 
그리고,diplay 속성은 화면에서 보이지 않는 none 값을 줄 수 있습니다.그래서 div 안의 글자나 이미지등을 자바스크립트등으로 보였다 안보였다 할 수 있습니다.

그리고,크기를 지정할 때 픽셀 단위의 px 말고 %단위로 지정할 수 있습니다.부모겪인 바깥쪽을 감싸는 div태그의 높이를 100%로 하면 웹브라우저의 높이만큼 늘어나겠죠

그 다음 안쪽의 div 태그의 크기를 %로 화면 바로위 div의 크기의 %만큼 크기를 차지할 겁니다.이것은 한번 응용해 보시기 바랍니다.별로 어렵지는 않습니다.

이 외에는 div태그는 width(가로크기),max-width(가로크기 최대치),min-width(가로크기 최소치),padding(안쪽여백),margin(바깥쪽 여백),border(테두리 크기,색깔,형태),position(화면 위치의 방식) 등등의 많은 속성을 가지고 있습니다.

이 속성들이 다 유용해서  다음편에 더 할애해서 하겠습니다

부가적으로 설명드면
아시는 이야기이지만
높이는 height라고 사용하고 콜론(:)을 사용하고 값을 넣어줍니다.픽셀인 px를 사용하여 크기를 줍니다.

여기서도 세미콜론(;)을 사용해서 속성을 구분했습니다.div 이해를 돕기 위해서 착시를 줘봤습니다