DAY_006_HTML

2023. 12. 14. 16:09ㆍFull Stack Course 풀스택과정/HTML_CSS_JAVASCRIPT

728x90

 

 

 

 

 

CodeHows  DAY_006_HTML

 

 

이번에 사용된 기능 :  

HTML  커지고 작아지는 사진

HTML 고급 꾸미기

HTML 버튼 이벤트

HTML nav , section 나누기

HTML 상품 목록만들기 

HTML 커서 이벤트

HTML keyframes 사용예시

HTML scale 스케일 사용

 

 

 

 

 

 

이번에 눈들여야하는거는 Section에 있는 3개예요 1개는 커서올리면 아래에서 글 올라오기

2번째는 클릭하면 색바꾸기

3번째는 눈물젖은 초코파이 먹는 꿀벌 

 

 

 

 

 

 

한번실행시켜보고 싶으신분들은 아래쪽에 있는 코드를 복사해서 

아래링크에 들어간뒤 노트북 저장방법으로 해보시면되요 

https://sarimus.tistory.com/2

 

DAY_001_HTML

CodeHows DAY_001_HTML 이번에 사용된 기능 : 움직이는 글자 전광판 만들기 HTML 꾸미기 HTML 이미지 삽입 HTML 연결링크 만들기 HTML 회원가입 페이지 만들기 HTML 동영상 넣기 HTML 유튜브 넣기 HTML 사진 넣어

sarimus.tistory.com

 

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>HTML Layouts</title>
    <style>
        .header {
            background-color: palegoldenrod;
            color: white;
            width: 100%;
            height: 150px;
        }

        .nav {
            background-color: lightskyblue;
            color: white;
            width: 15%;
            height: 1000px;
            float: left;
        }

        .section {
            background-color: lightgreen;
            color: white;
            width: 85%;
            height: 1000px;
            float: left;
        }

        .footer {
            background-color: plum;
            color: white;
            width: 100%;
            height: 100px;
            clear: both;
        }

        .div_Header {
            background-color: lightgreen;

        }

        .nav_H_align {
            display: inline-block;
            padding: 20px;
            margin-left: 40px;
            width: 100px;
            border: 1px solid black;
            border-radius: 10px 10px;
        }

        .nav_V_align {
            display: inline-block;
            padding: 20px;
            margin-left: 10px;
            margin-top: 20px;
            margin-bottom: 10px;
            border: 1px solid black;
            border-radius: 10px 10px;
            width: 100px;
        }

        .section_div {
            display: inline-block;
            padding: 20px;
            margin-left: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
            border: 1px solid black;
            border-radius: 10px 10px;
            width: 120px;
            height: 10px;

        }

        .prod-list {
            list-style: none;
            padding: 0;
        }

        .prod-list li {
            float: left;
            padding: 0;
            margin: 10px;
            overflow: hidden;
            position: relative;
            width: 300px;
            height: 200px;

        }

        .prod-list img {
            margin: 0;
            padding: 0;
            float: left;
            z-index: 5;
        }

        .prod-list .caption {
            position: absolute;
            top: 200px;
            width: 300px;
            height: 200px;
            padding-top: 20px;
            background: rgba(0, 0, 0, 0.6);
            opacity: 0;
            transition: all 0.6s ease-in-out;
            z-index: 10;
        }

        .prod-list li:hover .caption {
            opacity: 1;
            transform: translateY(-200px);
        }

        .prod-list .caption h2,
        .prod-list .caption p {
            color: #fff;
            text-align: center;
        }

        #container {
            width: 1000px;
            margin: 20px auto;
        }

        h1 {
            text-align: center;
        }

        .prod-list {
            list-style: none;
            padding: 0;
        }

        .prod-list li {
            float: left;
            padding: 0;
            margin: 10px;
            overflow: hidden;
        }

        .prod-list img {
            margin: 0;
            padding: 0;
            float: left;
            z-index: 5;
        }

        .button:hover {
            padding: 2px 4px;
            margin: 0 10px;
            border-radius: 2px;
            background: #f00;
            color: #fff;
            animation: slowlyChange 0.5s ease-in infinite;
        }

        @keyframes slowlyChange {

            0% {
                background-color: rgb(243, 236, 236);
            }

            100% {
                background-color: rgb(255, 38, 0);
            }
        }

        @keyframes scaleAnimation {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(2);
            }

            100% {
                transform: scale(1);
            }
        }

        .card {
            width: 20%;
            height: 20%;
            transform-style: preserve-3d;
            animation: scaleAnimation 3s infinite;
            /* 추가된 부분 */
        }


        .card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: 1px solid #ccc;
            border-radius: 50%;
            margin-left: 100px;
        }

        @keyframes flip-scale-2-hor-top {
            0% {
                transform: translateY(0) rotateX(0) scale(1);
                transform-origin: 50% 0
            }

            50% {
                transform: translateY(-50%) rotateX(-90deg) scale(2);
                transform-origin: 50% 50%
            }

            100% {
                transform: translateY(0) rotateX(0) scale(1);
                transform-origin: 50% 0
            }
        }

        @media (max-width: 800px) {
            .small-tomato {
                background-color: tomato;
            }
        }

        .box {
            padding: 5px 45px;
            margin: 5px;
            width: 80px;
            background-color: #222;
        }

        #opt1 {
            flex-direction: row;
            /* 왼쪽에서 오른쪽으로 */
        }

        #opt2 {
            flex-direction: row-reverse;
            /* 오른쪽에서 왼쪽으로 */
        }

        #opt3 {
            flex-direction: column;
            /* 위에서 아래로 */
        }

        #opt4 {
            flex-direction: column-reverse;
            /* 아래에서 위로 */
        }

        p {
            color: #fff;
            text-align: center;
        }

        .container2 {
            width: 700px;
            display: flex;
            /* 플렉스 컨테이너 지정 */
            background-color: #eee;
            border: 1px solid #222;
            margin-bottom: 30px;
        }
    </style>
</head>

<body>
    <div class="header">
        <h2>Header </h2>
        <nav>
            <a href="#" class="nav_H_align" style="width: 50px; margin-right: 50px;">= </a>
            <a href="#" class="nav_H_align">메뉴 1</a>
            <a href="#" class="nav_H_align">메뉴 2</a>
        </nav>
    </div>

    <div class="nav">
        <h2>Nav </h2>
        <nav>
            <a href="../04/Newwork.html" class="nav_V_align"> 왼쪽 메뉴 1</a>
            <a href="../04/Newwork2.html" class="nav_V_align"> 왼쪽 메뉴 2</a>
            <a href="#" class="nav_V_align" style="color: red;"> 현재 메뉴 3</a>
            <a href="../04/NewworkTest.html" class="nav_V_align"> 왼쪽 메뉴 4</a>
            <a href="#" class="nav_V_align"> 왼쪽 메뉴 5</a>
            <a href="#" class="nav_V_align"> 왼쪽 메뉴 6</a>
        </nav>
    </div>


    <!-- /sssssssssssssssssssssssssssssssssssss -->
    <!-- /sssssssssssssssssssssssssssssssssssss -->
    <!-- /sssssssssssssssssssssssssssssssssssss -->
    <!-- /sssssssssssssssssssssssssssssssssssss -->
    <!-- /sssssssssssssssssssssssssssssssssssss -->

    <div class="section">
        <h2>Section </h2>

        <div id="container">
            <h1>신상품 목록</h1>
            <ul class="prod-list">
                <li>
                    <img
                    <div class="caption">
                        <h2>상품 1</h2>
                        <p>상품 1 설명 텍스트</p>
                        <p>가격 : 12,345원</p>
                    </div>
                </li>
                <li>
                    <img
                    <div class="caption">
                        <h2>상품 2</h2>
                        <p>상품 2 설명 텍스트</p>
                        <p>가격 : 12,345원</p>
                    </div>
                </li>
                <li>
                    <img
                    <div class="caption">
                        <h2>상품 3</h2>
                        <p>상품 3 설명 텍스트</p>
                        <p>가격 : 12,345원</p>
                    </div>
                </li>
            </ul>
        </div>
        <div id="container">
            <button class="button" style="width: 300px;
                                         height: 100px;
                                         margin: 0 10px;
                                        font-size: 30px;
                                         color:black " onclick="changeColor()" id="colorButton"> 클 릭 </button>




        </div>


        <div id="container">
            <div class="card">
                    alt="3D Image">
            </div>
        </div>

    </div>


    <div class="container2" id="opt1">
        <div class="box">
            <p>1</p>
        </div>
        <div class="box">
            <p>2</p>
        </div>
        <div class="box">
            <p>3</p>
        </div>
    </div>
    <div class="container2" id="opt2">
        <div class="box">
            <p>1</p>
        </div>
        <div class="box">
            <p>2</p>
        </div>
        <div class="box">
            <p>3</p>
        </div>
    </div>
    <div class="container2" id="opt3">
        <div class="box">
            <p>1</p>
        </div>
        <div class="box">
            <p>2</p>
        </div>
        <div class="box">
            <p>3</p>
        </div>
    </div>
    <div class="container2" id="opt4">
        <div class="box">
            <p>1</p>
        </div>
        <div class="box">
            <p>2</p>
        </div>
        <div class="box">
            <p>3</p>
        </div>
    </div>

    </div>

    <div class="footer">
        <h2>Footer </h2>
    </div>

    <div class="small-tomato">좁은 화면에서는 배경색이 토마토 색이 됩니다.</div>
</body>
<script>

    function changeColor() {
        // 버튼 색상을 랜덤하게 생성
        var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);

        // 버튼의 배경색을 변경
        document.getElementById('colorButton').style.backgroundColor = randomColor;
    }
</script>

</html>

 

 

 

 

HTML Layouts

Header

Nav

Section

신상품 목록

  • 상품 1

    상품 1 설명 텍스트

    가격 : 12,345원

  • 상품 2

    상품 2 설명 텍스트

    가격 : 12,345원

  • 상품 3

    상품 3 설명 텍스트

    가격 : 12,345원

3D Image

1

2

3

1

2

3

1

2

3

1

2

3

Footer

좁은 화면에서는 배경색이 토마토 색이 됩니다.

 

728x90

'Full Stack Course 풀스택과정 > HTML_CSS_JAVASCRIPT' 카테고리의 다른 글

DAY_008_HTML  (0) 2023.12.15
DAY_007_HTML  (0) 2023.12.14
DAY_005_HTML  (0) 2023.12.14
DAY_004_HTML  (0) 2023.12.14
DAY_003_HTML  (0) 2023.12.14

관련글

티스토리툴바