[FrontEnd1] 4월 넷째주 한 페이지 개념 정리

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

저작자표시

'HTML & CSS' 카테고리의 다른 글

[FrontEnd1] 토이스토리 페이지 보강 (로고 삽입, 메뉴 설정, 폰트 설정, 검색창 만들기) (0)	2022.05.01
[FrontEnd1] 4월 다섯째주 한페이지 개념 정리 (0)	2022.05.01
[FrontEnd1] 토이스토리 페이지 보강(로그인창, 오피셜 트레일러 삽입, 노래 삽입, 메뉴창) (0)	2022.04.23
[FrontEnd1] 4월 3째주 한 페이지 개념 정리 (0)	2022.04.19
[FrontEnd1] 여러 태그 (a, img 응용, br, div, ul, ol, li, style)과 내부 속성(style 속성) / 토이스토리 게시판 형태 만들기 (0)	2022.04.15