HTML & CSS
[FrontEnd1] 4월 다섯째주 한페이지 개념 정리
보라해바라기
2022. 5. 1. 14:53
SMALL
안녕하세요~ 보라해바라기 입니다:)
벌써 5월이 다가왔군요 ㅎㅎ
4월 개념은 4월 안에 다 정리하고 싶었지만... 5월이 되었네요...?ㅎㅎ
그래도 늦은 만큼 더 열심히 복습했답니다.
1. html
<!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>Review(220501)</title>
<link rel="stylesheet" href="./css/review(220501).css">
</head>
<body>
<h1>4월 5째주 개념 정리</h1>
<div id="wrap">
<div id="r1">
<div id="c1">
<h4>margin과 padding + border-radius (시계방향 순, padding도 동일)</h4>
<div id="left">
<div id="margin1">
margin: 20px
<br>(전체 margin이 20px)
</div>
<div id="margin2">
margin: 20px 40px
<br>(위, 아래: 20 <br>좌, 우: 40)
</div>
</div>
<div id="right">
<div id="margin3">
margin: 20px 40px 60px
<br>(위: 20, 좌, 우: 40, <br>아래: 60)
</div>
<div id="margin4">
margin: 20px 40px 60px 80px
<br>(위: 20, 우: 40, <br>아래: 60, 좌:80)
</div>
</div>
</div>
<div id="c2">
<h4>relative (div 가로)</h4>
<div id="div1">
1
</div>
<div id="div2">
relative
<br>(top, left 30)
</div>
<div id="div3">
3
</div>
</div>
<div id="c3">
<h4>relative (div 세로)</h4>
<div id="div1">
1
</div>
<div id="div2">
relative
<br>(top, left 30)
</div>
<div id="div3">
3
</div>
</div>
</div>
<div id="r2">
<div id="c1">
<h4>absolute (부모 요소 기준점 X)</h4>
<div id="div1">
div1
</div>
<div id="div2">
<b>body</b>를 기준으로 정렬됨.
<br>(top 300, left 20)
</div>
<div id="div3">
div3
</div>
</div>
<div id="c2">
<h4>absolute (부모 요소 기준점 O)</h4>
<div id="div1">
div1
</div>
<div id="div2">
<b>c2(부모요소)</b>를 기준으로 정렬됨.
<br>(top 70, left 70)
<br>c2에 position:relative
</div>
<div id="div3">
div3
</div>
</div>
<div id="c3">
<h4>폰트(ttf파일, link, import)</h4>
<div id="ttf">
보라해바라기
</div>
<div>
link, import는 html head에서 가능
</div>
</div>
</div>
<div id="r3">
<div id="c1">
<h4>팝업창 (relative)</h4>
<div id="contents">
<div id="popup">
popup
</div>
<div id="notice">
<p>안녕하세요. 저는 보라해바라기입니다.</p>
<p>제가 이 글을 쓰는 이유는 스크롤이 넘어가도록 하기 위해서입니다.</p>
<p>제가 보여드리고 싶은 것은 팝업창을 relative로 설정했을 때,
팝업창이 고정되지 않고 움직이는 모습입니다.</p>
</div>
</div>
</div>
<div id="c2">
<h4>팝업창 (fixed)</h4>
<div id="contents">
<div id="popup">
popup
</div>
<div id="notice">
<p>안녕하세요. 저는 보라해바라기입니다.</p>
<p>제가 이 글을 쓰는 이유는 스크롤이 넘어가도록 하기 위해서입니다.</p>
<p>제가 보여드리고 싶은 것은 팝업창을 fixed로 설정했을 때,
팝업창이 고정된 모습입니다.</p>
</div>
</div>
</div>
<div id="c3">
<h4>이미지 스프라이트</h4>
<div id="search"></div>
<br>
<div id="lock"></div>
<br>
<div id="gmarket-logo"></div>
</div>
</div>
</div>
</body>
</html>2. css
@charset "utf-8";
@font-face{
src: url(../fonts/GmarketSansTTFLight.ttf);
font-family: 'gmarket-font';
}
*{
margin: 0;
padding: 0;
}
h1{
text-align: center;
margin-bottom: 10px;
}
h4{
text-align: center;
}
#wrap{
width: 1500px;
height: 750px;
background-color: aliceblue;
}
#wrap>#r1{
width: 1500px;
height: 250px;
background-color: aliceblue;
}
#wrap>#r1>#c1{
width: 500px;
height: 250px;
background-color: aliceblue;
float: left;
}
#wrap>#r1>#c1>#left{
width: 250px;
height: 200px;
background-color: lightpink;
float: left;
font-size: 10px;
}
#wrap>#r1>#c1>#left>#margin1{
width: 100px;
height: 50px;
background-color: aqua;
margin: 20px;
border-radius: 10px;
}
#wrap>#r1>#c1>#left>#margin2{
width: 100px;
height: 50px;
background-color: aqua;
margin: 20px 40px;
border-radius: 10px;
}
#wrap>#r1>#c1>#right{
width: 250px;
height: 200px;
background-color: lightgreen;
float: left;
font-size: 10px;
}
#wrap>#r1>#c1>#right>#margin3{
width: 100px;
height: 50px;
background-color: aqua;
margin: 20px 40px 60px;
border-radius: 10px;
}
#wrap>#r1>#c1>#right>#margin4{
width: 100px;
height: 50px;
background-color: aqua;
margin: 20px 40px 60px 80px;
border-radius: 10px;
}
#wrap>#r1>#c2{
width: 500px;
height: 250px;
background-color: aliceblue;
float: left;
}
#wrap>#r1>#c2>div{
width: 100px;
height: 100px;
background-color: blueviolet;
float: left;
}
#wrap>#r1>#c2>#div2{
background-color: greenyellow;
position: relative;
top: 30px;
left: 30px;
}
#wrap>#r1>#c3{
width: 500px;
height: 250px;
background-color: aliceblue;
float: left;
}
#wrap>#r1>#c3>div{
width: 100px;
height: 50px;
background-color: blueviolet;
}
#wrap>#r1>#c3>#div2{
background-color: greenyellow;
position: relative;
top: 30px;
left: 30px;
}
#wrap>#r2{
width: 1500px;
height: 250px;
background-color: aliceblue;
}
#wrap>#r2>#c1{
width: 500px;
height: 250px;
background-color: aliceblue;
float: left;
}
#wrap>#r2>#c1>div{
width: 100px;
height: 100px;
background-color: blueviolet;
float: left;
}
#wrap>#r2>#c1>#div2{
background-color: greenyellow;
position: absolute;
top: 300px;
left: 20px;
font-size: 12px;
}
#wrap>#r2>#c2{
width: 500px;
height: 250px;
background-color: aliceblue;
float: left;
position: relative;
}
#wrap>#r2>#c2>div{
width: 100px;
height: 100px;
background-color: blueviolet;
float: left;
}
#wrap>#r2>#c2>#div2{
position: absolute;
top: 70px;
left: 70px;
background-color: greenyellow;
font-size: 12px;
}
#wrap>#r2>#c3{
width: 500px;
height: 250px;
background-color: aliceblue;
float: left;
}
#wrap>#r2>#c3>div{
width: 150px;
height: 50px;
background-color: cadetblue;
margin: 10px;
color: antiquewhite;
}
#wrap>#r2>#c3>#ttf{
font-family: 'gmarket-font';
font-size: 20px;
padding-top: 15px;
padding-left: 15px;
box-sizing: border-box;
}
#wrap>#r3{
width: 1500px;
height: 250px;
background-color: aliceblue;
}
#wrap>#r3>#c1{
width: 500px;
height: 250px;
background-color: aliceblue;
float: left;
}
#wrap>#r3>#c1>#contents{
width: 450px;
height: 200px;
overflow: scroll;
}
#wrap>#r3>#c1>#contents>#popup{
width: 70px;
height: 70px;
background-color: chocolate;
margin: 20px;
float: left;
position: relative;
}
#wrap>#r3>#c1>#contents>#notice{
width: 300px;
height: 1000px;
background-color: bisque;
float: left;
}
#wrap>#r3>#c2{
width: 500px;
height: 250px;
background-color: aliceblue;
float: left;
}
#wrap>#r3>#c2>#contents{
width: 450px;
height: 200px;
overflow: scroll;
}
#wrap>#r3>#c2>#contents>#popup{
width: 70px;
height: 70px;
background-color: chocolate;
margin: 20px;
float: left;
position: fixed;
}
#wrap>#r3>#c2>#contents>#notice{
width: 300px;
height: 1000px;
background-color: bisque;
float: left;
}
#wrap>#r3>#c3{
width: 500px;
height: 250px;
background-color: aliceblue;
float: left;
}
#wrap>#r3>#c3>#search{
width: 35px;
height: 40px;
background: url(../images/icon_set1.png) -82px -420px;
}
#wrap>#r3>#c3>#lock{
width: 25px;
height: 25px;
background: url(../images/icon_set1.png) -197px -141px;
}
#wrap>#r3>#c3>#gmarket-logo{
width: 350px;
height: 100px;
background: url(../images/sprite__common.png) 0px -560px;
}3. 결과
728x90