CSS_헷갈리는 개념(2)

width, height 의 크기를 변경하는 방법중 100%와 vh의 개념을 정리하고자 한다.

일단, inline요소의 항목은 넓이, 높이를 지정할 수 없다. 만약 크기를 조절하고 싶다면 display속성을 block으로 변경해줘야한다.

width,heigth100%

• width=100%; 는 부모요소의 크기를 기준함 (->height도 마찬가지)

div에 width:100%;를 설정하면 아무반응이 일어나지 않는다. 왜냐, %는 부모요소의 영향을 받는 단위이기 때문에 div의 부모인 body에 값을 설정해줘야 작동한다.

• width=auto;는 자식요소의 내용을 기준으로 크기가 조절된다.
  (->height도 마찬가지)

width,heigth auto

• auto는 부모요소의 영향을 받지 않아서 따로 부모요소에 크기를 지정해주지 않아도 됨

heigth vh

• 높이단위인 vh를 사용하면, 전체화면으로 배경이 꽉 찰 수 있게 함.