웹에서
가로 100px,
세로 100px
빨간색 네모를 그리는 방법입니다.
html 영역
<div class="wrap">
<div class="nemo"></div>
<div>
style 영역
html, body {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.wrap {
position: relative;
width: 100%;
height: 100%;
}
.wrap .nemo {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
background-color: #FF0000;
}
전체 코드 index.html
<!DOCTYPE html>
<html>
<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>Document</title>
<style>
html, body {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.wrap {
position: relative;
width: 100%;
height: 100%;
}
.nemo {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div class="wrap">
<div class="nemo"></div>
<div>
</body>
</html>
1. 위의 index.html 코드를 복사합니다.
2. 메모장에 붙여넣기 합니다.
3. 메뉴 - 다른 이름으로 저장 에서 바탕화면에 index.html 로 저장합니다.
4. 바탕화면에 생긴 index.html 을 열어보세요~
'web > vanilla javascript' 카테고리의 다른 글
| javascript로 css의 @keyframes 애니메이션 만들기 (0) | 2023.05.17 |
|---|---|
| javascript로 css의 가상요소 ::after ::before 바꾸기 (0) | 2023.05.15 |
| js로 notch 찾기 (0) | 2023.05.13 |
