[CSS] 높이와 너비 (width, height)

CSS 높이 너비 값

height: 200px;
width: 200px;

 

width와 height 프로퍼티는 각각 너비와 높이값을 정할 수 있다.

값은 px단위 혹은 % 단위로 줄 수 있다.

 

200px값을 준 출력값이다.

화면의 가로세로 200px씩 차지한다.

 

width값에 50%를 주었다.

언뜻 보면 같아 보이지만 % 값을 주면 출력 화면에서 값 비율만큼 화면을 차지한다.

 

 

그래서 화면을 늘려보면 값을 바꾸지 않아도

늘린 화면만큼 출력된 박스가 함께 크기가 변한다

 

특정 요소 안에 요소 하나를 더 집어넣어보자(부모-자식요소)

 

 

자식 요소에 % 값을 주면 부모 요소를 기준으로 자리를 차지하게 된다.

 

이 때 부모값을 바꾸면 %로 설정한 자식의 출력물도 함께 변경됨

 

크기 설정값에는 auto값도 들어갈 수 있다.

auto값 설정시

width : 부모요소 width의 100% 설정

height : 자식요소 height의 100% 설정