단위 : auto(기본),
px : 어떤 단위를 쓰든 컴퓨터는 px로 변환되서 적용된다.
% : 자주 사용, 부모대비
vh, vw : 뷰포트(화면크기) 대비 크기 (세로, 가로) (%처럼 쓰면 됨)
-
레이아웃을 잡기 굉장히 까다롭기 때문에 주로 사용하지 않음.
-
★vw, vh는 부모와 상관없이 동작 (부모대비X !! 뷰포트대비O !!)
-
vh : 스크롤을 포함한 사이즈
-> width = 50vh -> 가능- 반응형만들 때 높이는 50vw하면 된다. 그러면 같이 줄어듬.
-
% : 스크롤을 제외한 사용가능한 사이즈
-> %를 써서 값을 줄 때 가로인지 세로인지 정확히 명시하지 않으면 기본적으로 가로 %를 잡는다.
width : 가로
height : 세로
- 세로는 단독으로 % 사용 못 함
max-width : 가로 한계 지정 (반응형 때 사용)
min-width
max-height : 세로 한계 지정 (반응형 때 사용)
min-height
주의
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer{
width: 500px;
}
.box{
width: 100%;
height: 50%;
border: 1px solid;
}
</style>
</head>
<body>
<div class="outer">
<div class="box"></div>
</div>
</body>
</html>위와같이 코드를 짜면 box영역의 부모인 outer의 height는 크기를 주지 않았으니 box가 보이지 않는다.
height = 0px -> 50% -> 0px
border은 바깥쪽에 붙는 거다.
부모 width의 100%하고 border을 주면
위와같이 옆쪽이 튀어나와있다.
하지만 width를 지정하지 않으면 테두리까지해서 부모의 width안에 들어간다.
(블록레벨 : 가능한 끝에서 끝까지 차지)
혹은
★뚱뚱이 방지(여백을 가지고 안으로 가지고 들어옴)
: box-sizing : border-box
위 내용 쓰면 된다.
margin: 50px 30px;
margin-bottom: 10px;위와같이 하면 top-50, right-30, bottom-10, left-30 적용이 잘 된다.
margin-bottom: 10px;
margin: 50px 30px;그러나 위와같이 하면 top-50, right-30, bottom-50, left-30 으로 된다.
순서가 중요하기 때문. margin값으로 덮어쓰였기 때문이다.
body는 block레벨이다.
body에 값을 넣지 않으면 height는 없다.
그래서 body자식인 div에 height 50%넣으면 height값이 없다.
하지만 백그라운드 칼라는 전체 화면사이즈만큼 칠해진다.
잘 읽었습니다. 좋은 정보 감사드립니다.