HTML & CSS
[FrontEnd1] 4월 넷째주 한 페이지 개념 정리
보라해바라기
2022. 4. 24. 13:03
SMALL
안녕하세요:) 보라해바라기입니다!
오늘도 한 주동안 배운 개념을 정리한 "한페이지 개념 정리" 게시글이 돌아왔습니다~
뭔가 신박한 시리즈 제목이 없을까요...
뭔가 한페이지 개념 정리! 이건 너무 직관적이라...ㅎㅎ
1. review.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(220424)</title>
<link rel="stylesheet" href="./css/review.css">
</head>
<body>
<h1 id="title">4월 넷째주 개념</h1>
<div id="wrap">
<div id="r1">
<div id="cont1">
<h3>div와 span</h3>
<div id="div1">
보라해바라기
</div>
<span id="span">
보라해바라기
</span>
</div>
<div id="cont2">
<h3>menu 만들기</h3>
<ul id="gnb">
<li><a href="#">보라</a></li>
<li><a href="#">해바</a></li>
<li><a href="#">라기</a></li>
</ul>
</div>
<div id="cont3">
<h3>input, form, label 이용한 로그인 창</h3>
<form action="checkLogin.jsp" method="get">
<label for="id">ID:</label>
<input type="text" placeholder="아이디를 입력해주세요" id="id">
<br>
<label for="pw">PW:</label>
<input type="password" placeholder="비밀번호를 입력해주세요" id="pw">
<br>
<input type="submit" value="로그인">
</form>
</div>
</div>
<div id="r2">
<div id="cont1">
<h3>table</h3>
<table border="1"> <!--경계선-->
<tr>
<th></th>
<th>이름(가명)</th>
<th>성별</th>
<th>직업</th>
</tr>
<tr>
<td>프론트엔드</td>
<td>보라해바라기</td>
<td>여</td>
<td>대학생</td>
</tr>
<tr>
<td></td>
<td>홍길동</td>
<td>남</td>
<td>직장인</td>
</tr>
</table>
</div>
<div id="cont2">
<h3>div 이용한 원 만들기</h3>
<div id="signal-light">
<div id="red">
멈춤
</div>
<div id="yellow">
대기
</div>
<div id="green">
출발
</div>
</div>
</div>
<div id="cont3">
<h3>audio, video, embed</h3>
<audio src="./audio/piano.mp3" controls></audio>
<br>
<video src="./video/mov_bbb.mp4" controls width="150px" height="75px"></video>
<embed src="./video/swiss (convert-video-online.com).mp4" controls width="150px" height="75px">
</div>
</div>
<div id="r3">
<div id="cont1">
<h3>embed 이용해 유튜브 삽입</h3>
<embed src="https://www.youtube.com/embed/5ch94AaPZRQ" type="video/mp4">
</div>
<div id="cont2">
<h3>embed 이용해 유튜브 삽입 (조건 주기)</h3>
<embed src="https://www.youtube.com/v/ImapK-6lOvA&autoplay=1&start=60" type="video/mp4">
<p>조건: 자동 재생, 60초부터 영상 시작</p>
</div>
<div id="cont3">
<h3>iframe 사용해 유튜브 삽입</h3>
<iframe width="320" height="180"
src="https://www.youtube.com/embed/t0hpHa670mc"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<!--allowfullsceen: 전체화면 가능-->
</div>
</div>
</div>
</body>
</html>2. review.css
@charset "utf-8"; /*인코딩 방식 설정*/
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
#title{
text-align: center;
}
h3{
text-align: center;
}
#wrap{
width: 1200px;
height: 700px;
background-color: aliceblue;
}
#r1{
width: 1200px;
height: 150px;
background-color: aliceblue;
}
#r1>#cont1{
width: 400px;
height: 150px;
background-color: aliceblue;
float: left;
}
#r1>#cont1>#div1{
width: 100px;
height: 100px;
background-color: lightcoral;
display: inline-block;
}
#r1>#cont1>#span{
width: 100px;
height: 100px;
background-color: lightskyblue;
}
#r1>#cont2{
width: 400px;
height: 150px;
background-color: aliceblue;
float: left;
}
#r1>#cont2>#gnb>li{
float: left;
}
#r1>#cont2>#gnb>li>a{
display: block;
width: 100px;
height: 50px;
background-color: lightgreen;
text-align: center;
padding-top: 15px;
margin-right: 5px;
box-sizing: border-box;
}
#r1>#cont3{
width: 400px;
height: 150px;
background-color: aliceblue;
float: left;
}
#r2{
width: 1200px;
height: 200px;
background-color: aliceblue;
}
#r2>#cont1{
width: 400px;
height: 200px;
background-color: aliceblue;
float: left;
}
#r2>#cont2{
width: 400px;
height: 200px;
background-color: aliceblue;
float: left;
}
#r2>#cont2>#signal-light{
width: 350px;
height: 130px;
background-color: lightgray;
padding-top: 15px;
padding-left: 15px;
box-sizing: border-box;
}
#r2>#cont2>#signal-light>#red{
width: 100px;
height: 100px;
border-radius: 100%;
background-color: red;
float: left;
margin-right: 10px;
text-align: center;
padding-top: 40px;
box-sizing: border-box;
}
#r2>#cont2>#signal-light>#yellow{
width: 100px;
height: 100px;
border-radius: 100%;
background-color: yellow;
float: left;
margin-right: 10px;
text-align: center;
padding-top: 40px;
box-sizing: border-box;
}
#r2>#cont2>#signal-light>#green{
width: 100px;
height: 100px;
border-radius: 100%;
background-color: green;
float: left;
text-align: center;
padding-top: 40px;
box-sizing: border-box;
}
#r2>#cont3{
width: 400px;
height: 200px;
background-color: aliceblue;
float: left;
}
#r3{
width: 1200px;
height: 350px;
background-color: aliceblue;
}
#r3>#cont1{
width: 400px;
height: 350px;
background-color: aliceblue;
float: left;
}
#r3>#cont2{
width: 400px;
height: 350px;
background-color: aliceblue;
float: left;
}
#r3>#cont3{
width: 400px;
height: 350px;
background-color: aliceblue;
float: left;
}3. 한페이지 요약
728x90