더보기
- vw, vh : view width, view height의 약자
- 브라우저의 화면 가로와 세로의 길이를 100으로 본다
- 브라우저 화면의 가로 길이는 100vw 로 표현 가능, 브라우저 화면 세로길이는 100vh
(%와는 다름, %는 부모의 길이를 기준으로 가로/세로의 길이를 따지지만, vw,vh는 브라우저 화면을 기준으로 길이를 따짐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>단위 예제</title>
<style>
/*
브라우저 전체에 배경색을 입히기
가로 400px, 세로 400px 사각형을 브라우저 가운데 배치하도록 작성하기
*/
.body{margin: 0;}
.box{width: 100vw; height: 100vh; background-color: lightsteelblue;}
.center{width: 400px; height: 400px; background-color: mediumpurple;
position: fixed; top:calc(50vh - 200px); left:calc(50vw - 200px)}
</style>
</head>
<body class="body">
<div class="box">
<div class="center"></div>
</div>
</body>
</html>'괴발개발 > Html+CSS' 카테고리의 다른 글
| CSS_네이버 검색창 만들기 (0) | 2021.06.13 |
|---|---|
| CSS_문단관련 속성 (0) | 2021.06.13 |
| CSS_input태그 꾸미기 (0) | 2021.06.13 |
| CSS_table로 게시판 만들기 (0) | 2021.06.13 |
| CSS_table셀합치기(colspan, rowspan) (0) | 2021.06.13 |