728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
vw : viewport width (클라이언트 표시 영역 가로 크기의 백분율)전체 크기의 백분율
vh : viewport height (클라이언트 표시 영역 가로 크기의 백분율)전체 크기의 백분율
> 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 결정함
> 100vh, 100vw 는 전체 화면의 기준으로, 꽉 채우는 것을 의미함
> 만약 스크린 크기가 height=1000, width=800 이라면 1vh = 10px, 1vw = 8px
%랑 차이점?
> %는 창의 중심이 아닌, 부모 요소의 길이에 맞게 비율을 따짐
> %는 전체 창을 기준으로하는 것이 아니기 때문에 크기 계산 당시의 부모 요소에 맞게 됨
> vh, vw는 열려있는 전체 창을 기준으로 하기 떄문에 스크롤을 포함해서 전체 창 길이에 맞춰 계산
vmin, vmax > viewport의 길이 중 더 짧은 혹은 긴 길이를 기준으로 설정해줌
*/
body{
margin: 0;
padding: 0;
}
/* div{
width: 10vmin;
height: 10vmax;
background-color: cadetblue;
} */
ul {
list-style-type: none; /* 불릿 제거*/
margin: 30px;
}
li{
background-image: url(../Resource/book_image.png);
background-size: 30px;
background-repeat: no-repeat;
background-position: left center;
padding-left: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<!-- <div></div> -->
<h1>회사회사</h1>
<ul>
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>문의사항</li>
</ul>
</body>
</html>728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| CSS 연습 (0) | 2022.12.29 |
|---|---|
| background예제 2 (0) | 2022.12.28 |
| Position예제2 (0) | 2022.12.28 |
| Position예제 (0) | 2022.12.28 |
| float예제2 (0) | 2022.12.28 |