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 이해를 돕기 위해서 착시를 줘봤습니다
|
|
|
'홈페이지제작 > HTML' 카테고리의 다른 글
| [html] 태그 div 이해하기, style 이해활용 (0) | 2018.03.23 |
|---|---|
| [HTML기초] 표만들기 (0) | 2018.03.09 |
| iframe 태그 사용법과 유튜브 동영상 삽입하기 (0) | 2018.03.07 |
| HTML5 기본 이해하기 (0) | 2018.03.02 |
| [HTML] 홈페이지에 오디오 삽입 방법 (0) | 2018.02.06 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.
