Css 기초(media) - AWS 풀스택 과정 13일차

Front-end/Css

Css 기초(media) - AWS 풀스택 과정 13일차

awspspgh 2024. 7. 31. 18:48

오늘은 실습을 해보고, media에 대해서 배워보도록 하겠습니다

목차
1.	실습
2.	media
3.	예제 문제
4.	느낀 점

1. 실습

▣ 배민

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Dongle&family=Kalnia+Glaze:wght@100..700&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Dongle&family=Kalnia+Glaze:wght@100..700&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <style>
        body{
            background-color: #00C4BD;
        }
        .font1{
        font-family: "Dongle", sans-serif;
        font-size: 100px;
        font-weight: 400;
        font-style: normal;
        text-align: center;
        color: white;
        text-shadow: 1px 1px 1px black;
        }  
        .font2 {
        font-family: "Nanum Pen Script", cursive;
        font-weight: 400;
        font-style: normal;
        text-align: center;
        margin-top: 30px;
        }
        .pay>a{
            text-decoration: none;
        }
        .fixed{
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background-color: #027a76;
            border-radius: 50px;
            text-align: center;
        }
        .bi-arrow-up-circle{
            color:white;
            width: 30px;
            height: 30px;
            margin-top: 10px;
        }
        .menu1{
            position: absolute;
            width: 400px;
            background-color: white;
            border-radius: 10px;
            left: 50%;
            transform: translate(-50%);
            margin-top: 30px;
        }
        .menu2{
            position: absolute;
            width: 400px;
            background-color: white;
            border-radius: 10px;
            left: 50%;
            top: 105%;
            transform: translate(-50%);
            margin-top: 30px;
        }
        .menu3{
            position: absolute;
            width: 400px;
            background-color: white;
            border-radius: 10px;
            left: 50%;
            top: 175%;
            transform: translate(-50%);
            margin-top: 30px;
        }
        .menu4{
            position: absolute;
            width: 400px;
            background-color: white;
            border-radius: 10px;
            left: 50%;
            top: 267%;
            transform: translate(-50%);
            margin-top: 30px;
        }
        .menu5{
            position: absolute;
            width: 400px;
            background-color: white;
            border-radius: 10px;
            left: 50%;
            top: 339%;
            transform: translate(-50%);
            margin-top: 30px;
        }
        .image>img{
            width: 100%;
            border-radius: 10px;
        }
        .image>img:hover{
            width: 150%;
            transform: translate(-18%);
            transition: 1s;
            border-radius: 10px;
        }
        .box{
            position: absolute;
            width: 100%;
            height: 1px;
            top: 410%;
            background-color: #00C4BD;
        }
    </style>
</head>
<body>
    <header id="top">
        <div class="fixed">
            <a href="#top"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"/>
            </svg></a>
        </div>
    <div class="font1">
        <div>배달의 민족</div>
        <div>대한민국 1등 배달앱</div>
    </div>
</header>
    <!-- 여기서부터 메뉴 시작 -->
    <div class="menu1">
        <div class="image"><img src="../image/초밥.jpg"></div>
        <div class="font2">
            <h1 style="margin: 40px;">맛있는 초밥</h1>
            <p style="margin: 30px;">주머니가 가벼운 당신의 마음까지 생각한 착한 가격!!</p>
            <p style="color: red;"><del>25,000원</del> <b>20,000원</b></p>
            <p class="pay" style="margin: 20px;"><a href="">바로 결제</a></p>
        </div>
    </div>
    <div class="menu2">
        <div class="image"><img src="../image/뿌링클.jpg"></div>
        <div class="font2">
            <h1 style="margin: 40px;">맛있는 치킨</h1>
            <p style="margin: 30px;">주머니가 가벼운 당신의 마음까지 생각한 착한 가격!!</p>
            <p style="color: red;"><del>20,000원</del> <b>18,000원</b></p>
            <p class="pay" style="margin: 20px;"><a href="">바로 결제</a></p>
        </div>
    </div>
    <div class="menu3">
        <div class="image"><img src="../image/도미노_블랙타이거_슈림프_피자.jpg"></div>
        <div class="font2">
            <h1 style="margin: 40px;">맛있는 피자</h1>
            <p style="margin: 30px;">주머니가 가벼운 당신의 마음까지 생각한 착한 가격!!</p>
            <p style="color: red;"><del>36,900원</del> <b>18,450원</b></p>
            <p class="pay" style="margin: 20px;"><a href="">바로 결제</a></p>
        </div>
    </div>
    <div class="menu4">
        <div class="image"><img src="../image/돈까스.jpg"></div>
        <div class="font2">
            <h1 style="margin: 40px;">맛있는 돈까스</h1>
            <p style="margin: 30px;">주머니가 가벼운 당신의 마음까지 생각한 착한 가격!!</p>
            <p style="color: red;"><del>9,000원</del> <b>8,000원</b></p>
            <p class="pay" style="margin: 20px;"><a href="">바로 결제</a></p>
        </div>
    </div>
    <div class="menu5">
        <div class="image"><img src="../image/엽기떡볶이.jpg"></div>
        <div class="font2">
            <h1 style="margin: 40px;">맛있는 떡볶이</h1>
            <p style="margin: 30px;">주머니가 가벼운 당신의 마음까지 생각한 착한 가격!!</p>
            <p style="color: red;"><del>14,000원</del> <b>10,000원</b></p>
            <p class="pay" style="margin: 20px;"><a href="">바로 결제</a></p>
        </div>
    </div>
    <div class="box"></div>
</body>
</html>

▷ 출력

2. media

◈ width

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
    width : 가로 너비
    모니터 / 탭북 / 폰
    max-width
    - 엘리먼츠가 가질 수 있는 최대 크기의 값
    - 화면의 크기가 커지더라도 엘리먼츠는 지정된 크기보다 더 커질 수 없음.
    - 레이아웃의 크기를 적절히 유지시키고 싶을 때 사용
    min-width
    - 엘리먼츠가 가질 수 있는 최소 크기의 값
    - 화면의 크기가 작아지더라도 엘리먼츠의 크기가 지정된 크기 이상 줄어들지 않음.
    - 컨텐츠의 손상을 막기 위해 사용

    반응형 화면이 예상될 때 사용
    보여질 레이아웃과 컨텐츠의 모양이 적절하게 조절되게 위해 사용
    -->
    <style>
        .mw{
            border: 1px solid black;
            max-width: 800px;
        }
        .nx{
            border: 1px solid black;
            min-width: 800px;
        }
    </style>
</head>
<body>
    <div class="mw">
        max-width
        - 엘리먼츠가 가질 수 있는 최대 크기의 값
        - 화면의 크기가 커지더라도 엘리먼츠는 지정된 크기보다 더 커질 수 없음.
        - 레이아웃의 크기를 적절히 유지시키고 싶을 때 사용
    </div>
    <div class="nw">
        min-width
        - 엘리먼츠가 가질 수 있는 최소 크기의 값
        - 화면의 크기가 작아지더라도 엘리먼츠의 크기가 지정된 크기 이상 줄어들지 않음.
        - 컨텐츠의 손상을 막기 위해 사용
    </div>
</body>
</html>

▷ 출력

◈ media

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
    media-query : 반응형 화면을 만들기 위한 태그
    max-width / min-width 사용하여 디스플레이 사이즈에 따라 화면 배치(layout)를 변경하는 태그
    폰 320px / pad 768px / screen 800px 1280px
    max-width : 화면의 최대 너비를 조건으로하여 미디어 쿼리를 작성
    - 가장 큰 화면 사이즈의 레이아웃을 기본으로 하고, 점차 축하는 형태로 css로 작성
    min-width : 화면의 최소 너비를 조건으로하여 미디어 쿼리를 작성
    - 가장 작은 화면 사이즈를 기본으로 하여 점차 확장되어가는 형태로 작성
    -->
    <style>
        .title{
            font-size: 40px;
        }
        @media screen and (max-width : 1024px){
            .title{
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="title">
        <h1>Hello, HTML World~!!</h1>
        <h3>font-size 변경</h3>
    </div>
</body>
</html>

※ screen and (min-width: px)

: and 앞뒤 띄어쓰기를 꼭 해야함(안 하면 적용이 안 됨)

▷ 출력

▣ mediaGrid

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
    }
    div{
        width: 100%;
    }
    .header{
        height: 100px;
        background-color: antiquewhite;
    }
    .main-img{
        height: 300px;
        background-color: orange;
    }
    .subject{
        height: 400px;
        background-color: aquamarine;
    }
    .content{
        height: 500px;
        background-color: pink;
    }
    .sub{
        height: 300px;
        background-color: brown;
    }
    .footer{
        height: 200px;
        background-color: cadetblue;
    }
    @media screen and (min-width: 800px) {
        .header{
            height: 60px;
        }
        .main-img{
            height: 500px;
        }
        .subject{
            height: 350px;
        }
        .content{
            width: 50%;
            height: 400px;
            float: left;
        }
        .sub{
            width: 50%;
            height: 400px;
            float: right;
        }
        .footer{
            height: 600px;
        }
    }
    @media screen and (min-width: 1024px) {
        .header{
            height: 60px;
        }
        .main-img{
            height: 500px;
        }
        .subject{
            width: 50%;
            height: 400px;
            float: left;
        }
        .content{
            width: 50%;
            height: 200px;
            float: right;
        }
        .sub{
            width: 50%;
            height: 200px;
            float: right;
        }
        .footer{
            height: 600px;
        }
    }
</style>
<body>
    <div class="header"></div>
    <div class="main-img"></div>
    <div class="subject"></div>
    <div class="content"></div>
    <div class="sub"></div>
    <div class="footer"></div>
</body>
</html>

▷ 출력

3. 예제 문제

◎ 문제

▶ 1번

▶ 2번

◎ 정답

▶ 1번

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100%;
        }
        .header{
            height: 60px;
            background-color: gray;
            font-size: 20px;
            font-weight: 700;
            padding-left: 50px;
            line-height: 60px;
        }
        /* media query 변경되는 내용 */
        .main-img{
            height: 300px;
            background-image: url(../image/호캉스1.jpg);
            background-position: center;
            background-size: cover;
        }
        .description{
            height: 300px;
            background-color: white;
            padding-left: 50px;
        }
        .description>p:first-child{
            font-size: 16px;
            font-weight: 700;
            color: gray;
            margin-top: 30px;
            margin-bottom: 40px;
        }
        .description>p:nth-child(2){
            font-size: 20px;
            font-weight: 700;
        }
        .description>p:last-child{
            font-size: 16px;
        }
        .sub-img1{
            height: 350px;
            background-image: url(../image/호캉스2.jpg);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        .sub-img2{
            height: 300px;
            background-image: url(../image/SASSY.jpg);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            text-align: center;
            line-height: 300px;
        }
        .sub-img2>a{
            border: 4px solid white;
            padding: 10px 40px;
            font-size: 16px;
            font-weight: 700;
            color: white;
            text-decoration: none;
        }
        .sub-img3{
            height: 300px;
            background-image: url(../image/호캉스3.jpg);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        @media screen and (min-width: 800px){
            .main-img{
                height: 300px;
                background-image: url(../image/호캉스1.jpg);
                background-position: center;
                background-size: cover;
            }
            .description{
                height: 300px;
                background-color: white;
                padding-left: 50px;
            }
            .description>p:first-child{
                font-size: 16px;
                font-weight: 700;
                color: gray;
                margin-top: 30px;
                margin-bottom: 40px;
            }
            .description>p:nth-child(2){
                font-size: 20px;
                font-weight: 700;
            }
            .description>p:last-child{
                font-size: 16px;
            }
            .sub-img1{
                width: 50%;
                height: 400px;
                background-image: url(../image/호캉스2.jpg);
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                float: left;
            }
            .sub-img2{
                width: 50%;
                height: 200px;
                background-image: url(../image/SASSY.jpg);
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                text-align: center;
                line-height: 200px;
                float: right;
            }
            .sub-img2>a{
                border: 4px solid white;
                padding: 10px 40px;
                font-size: 16px;
                font-weight: 700;
                color: white;
                text-decoration: none;
            }
            .sub-img3{
                width: 50%;
                height: 200px;
                background-image: url(../image/호캉스3.jpg);
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                float: right;
            }
        }
            @media screen and (min-width: 1024px){
                .main-img{
                    width: 50%;
                    height: 600px;
                    background-image: url(../image/호캉스1.jpg);
                    background-position: center;
                    background-size: cover;
                    float: left;
                }
                .description{
                    width: 50%;
                    height: 300px;
                    background-color: white;
                    padding-left: 50px;
                    float: right;
                    box-sizing: border-box;
                }
                .description>p:first-child{
                    font-size: 16px;
                    font-weight: 700;
                    color: gray;
                    margin-top: 30px;
                    margin-bottom: 40px;
                }
                .description>p:nth-child(2){
                    font-size: 20px;
                    font-weight: 700;
                }
                .description>p:last-child{
                    font-size: 16px;
                }
                .sub-img1{
                    width: 25%;
                    height: 300px;
                    background-image: url(../image/호캉스2.jpg);
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    float: left;
                }
                .sub-img2{
                    width: 25%;
                    height: 150px;
                    background-image: url(../image/SASSY.jpg);
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    text-align: center;
                    line-height: 200px;
                    float: right;
                }
                .sub-img2>a{
                    border: 4px solid white;
                    padding: 10px 40px;
                    font-size: 16px;
                    font-weight: 700;
                    color: white;
                    text-decoration: none;
                }
                .sub-img3{
                    width: 25%;
                    height: 150px;
                    background-image: url(../image/호캉스3.jpg);
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    float: right;
                }
            }
    </style>
</head>
<body>
    <div class="header">IN'O</div>
    <div class="main-img"></div>
    <div class="description">
        <p>PortFolio</p>
        <p>Make Hardware Soft</p>
        <p>The standard shuck of Lorem Ipsum used since the 1500s is reproduced below for those interested.</p>
    </div>
    <div class="sub-img1"></div>
    <div class="sub-img2">
        <a href="">VIEW MORE</a>
    </div>
    <div class="sub-img3"></div>
</body>
</html>

▶ 2번

- Home

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Link.css">
    <style>

    </style>
</head>
<body>
    <h1>Travel</h1>
    <ul>
        <li><a href="Home.html">Home</a></li>
        <li><a href="Seoul.html">Seoul</a></li>
        <li><a href="Tokyo.html">Tokyo</a></li>
        <li><a href="Paris.html">Paris</a></li>
    </ul>
    <img src="../image/비행기.jpg" alt="home image">
</body>
</html>

- Seoul

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Link.css">
    <style>

    </style>
</head>
<body>
    <h1>Travel</h1>
    <ul>
        <li><a href="Home.html">Home</a></li>
        <li><a href="Seoul.html">Seoul</a></li>
        <li><a href="Tokyo.html">Tokyo</a></li>
        <li><a href="Paris.html">Paris</a></li>
    </ul>
    <img src="../image/서울.jpg" alt="seoul image">
</body>
</html>

- Tokyo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Link.css">
    <style>

    </style>
</head>
<body>
    <h1>Travel</h1>
    <ul>
        <li><a href="Home.html">Home</a></li>
        <li><a href="Seoul.html">Seoul</a></li>
        <li><a href="Tokyo.html">Tokyo</a></li>
        <li><a href="Paris.html">Paris</a></li>
    </ul>
    <img src="../image/도쿄.jpg" alt="tokyo image">
</body>
</html>

- Paris

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Link.css">
    <style>

    </style>
</head>
<body>
    <h1>Travel</h1>
    <ul>
        <li><a href="Home.html">Home</a></li>
        <li><a href="Seoul.html">Seoul</a></li>
        <li><a href="Tokyo.html">Tokyo</a></li>
        <li><a href="Paris.html">Paris</a></li>
    </ul>
    <img src="../image/파리.jpg" alt="paris image">
</body>
</html>

- css

    body{
    text-align: center;
    }
    h1{
    border: 5px solid black;
    width: 300px;
    margin: 10px auto 30px;
    }
    ul{
    list-style: none;
    padding: 0;
    }
    ul>li{
    display: inline;
    margin: 10px;
    }
    ul>li>a{
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    }
    img{
    width: 70%;
    height: 500px;
    }

4. 느낀 점

화면 꾸미기 너무 어려웠다. 자바가 그리웠지만.. 더 열심히 공부해야겠다는 생각을 갖게 되었다.

'Front-end > Css' 카테고리의 다른 글

Css 기초(실습) - AWS 풀스택 과정 15일차 (0)	2024.08.02
Css 기초(flex) - AWS 풀스택 과정 14일차 (0)	2024.08.01
Css기초(z-index, animation) - AWS 풀스택 과정 12일차 (0)	2024.07.30
Css 기초(font, box, position) - AWS 풀스택 과정 11일차 (0)	2024.07.29
Html & Css 기초(div) - AWS 풀스택 과정 10일차 (0)	2024.07.26

현재글Css 기초(media) - AWS 풀스택 과정 13일차

awspspgh 님의 블로그

awspspgh 님의 블로그 입니다.

MySQL, Spring, jpa, Python, react, DB, JS, 자격증, 티스토리챌린지, final, Project, 풀스택, spring boot, CSS, html_css_js, sqld, java, 오블완, JSP, AWS,

Today :
Yesterday :

awspspgh 님의 블로그

Css 기초(media) - AWS 풀스택 과정 13일차

1. 실습

▣ 배민

▷ 출력

2. media

◈ width

▷ 출력

◈ media

※ screen and (min-width: px)

: and 앞뒤 띄어쓰기를 꼭 해야함(안 하면 적용이 안 됨)

▷ 출력

▣ mediaGrid

▷ 출력

3. 예제 문제

◎ 문제

▶ 1번

▶ 2번

◎ 정답

▶ 1번

▶ 2번

4. 느낀 점

'Front-end > Css' 카테고리의 다른 글

'Front-end/Css'의 다른글

티스토리툴바

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Css 기초(media) - AWS 풀스택 과정 13일차

1. 실습

▣ 배민

▷ 출력

2. media

◈ width

▷ 출력

◈ media

※ screen and (min-width: px)

: and 앞뒤 띄어쓰기를 꼭 해야함(안 하면 적용이 안 됨)

▷ 출력

▣ mediaGrid

▷ 출력

3. 예제 문제

◎ 문제

▶ 1번

▶ 2번

◎ 정답

▶ 1번

▶ 2번

4. 느낀 점

'Front-end > Css' 카테고리의 다른 글

'Front-end/Css'의 다른글

관련글

티스토리툴바