HTML, CSS

(64)CSS_미디어 쿼리2

빠스무 2023. 4. 3. 17:24
728x90
 

(56)CSS_레이아웃 기본 문법

다단 레이아웃 텍스트를 column 속성으로 다단을 생성 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 column-count: 단의 갯수를 설정 column-rule: 단과 단사이의 구분선, 구분의 모양,

jm-rograming.tistory.com

<!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>Document</title>
    <link rel="stylesheet" href="media.css">
</head>
<body>
    <div id="container">
        <header>
            <nav>
                <ul>
                    <li>인스타그램</li>
                    <li>유튜브</li>
                    <li>페이스북</li>
                    <li>트위터</li>
                </ul>
            </nav>
        </header>
    </div>
    <div id="contents">
        <section id="intro">
            <img src="images/in.png" alt="인스타그램">
            <img src="images/yo.png" alt="유튜브">
            <img src="images/fa.png" alt="페이스북">
            <img src="images/tw.png" alt="트위터">
        </section>
        <section id="desc" class="text">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, facere. Voluptates deserunt, fuga perspiciatis ratione dolores iure porro tenetur, quia, consequuntur explicabo sunt quasi voluptas earum nihil quod quam sequi?Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, facere. Voluptates deserunt, fuga perspiciatis ratione dolores iure porro tenetur, quia, consequuntur explicabo sunt quasi voluptas earum nihil quod quam sequi?Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, facere. Voluptates deserunt, fuga perspiciatis ratione dolores iure porro tenetur, quia, consequuntur explicabo sunt quasi voluptas earum nihil quod quam sequi?</p>
        </section>
    </div>
    <footer>
        <p>
            copyright 2023 by JM
        </p>
    </footer>
</body>
</html>

 

  • 외부 css 스타일
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#container {
    width: 100%;
}
header {
    width: 100%;
    background-color: black;
    margin-bottom: 20px;
}
nav > ul {
    height: 50px;
    margin: 0;
    list-style: none;
    color: gold;
    font-size: 12px;
}
nav > ul > li {
    float: left;
    padding: 10px;
    margin: 5px 5px;
}
/*
    구형폰: 320px
    일반폰: 360px ~
*/
nav, #contents {
    width: 320px;
    margin: 0 auto;
}
#intro {
    width: 100%;
    margin-bottom: 20px;
}
#intro > img {
    width: 100%;
    padding: 10px;
}
#desc {
    width: 100%;
    padding: 10px;
    line-height: 1.5;
    font-size: 16px;
}
footer {
    width: 100%;
    height: 50px;
    padding: 20px;
    background-color: black;
    color: white;
}
footer > p {
    text-align: center;
    font-size: 15px;
    line-height: 12px;
}

/*테블릿: 768px ~*/

@media screen and (min-width:768px) {
    nav > ul{
        font-size: 18px;
        height: 80px;
    }

    nav > ul > li{
        margin-top: 20px 5px;
    }

     nav, #contents{
        width: 750px;
        margin: 0 auto;
     }

     #intro{
        width: 100%;
     }
     
     #intro > img{
        width: 24%;
        padding: 10px;
     }

     #desc{
        width: 100%;
        padding: 10px;
        margin: 10px auto;
     }

     footer{
        height: 70px;
        padding: 30px;
     }

     footer > p {
        font-size: 18px;
     }
}

/*데스크탑: 1024px ~*/
@media screen and (min-width:1024px) {
    nav,#contents{
        width: 1000px;
        margin: 0 auto;
    }
    #intro > img{
        width: 10%;
        padding: 10px;
        float: left;
    }
    #desc{
        display: inline-block;
        width: 400px;
        height: auto;
        padding: 10px;
        font-size: 20px;
       
    }

    footer{
        clear: both;
    }
}



  • 핸드폰 크기일때

  • 패드 사이즈 크기일때

  • 컴퓨터 화면 사이즈 일 때