본문 바로가기
코리아 IT아카데미/grid·flex·mySql·jsp

6일차 | 그리드 예제 최종, 자바스크립트 round1~5

by Sharon kim 2021. 11. 22.

code_grid3>grid_11_1

늘렸을 때 250px 고정

줄였을 때도 250px 고정

<!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>grid_11_1</title>
    <!--minmax(200px, auto)-->
    <style>
        .parent {
            border: 5px solid #333;
            display: grid;
            background-color: #a29bfe;
            /* grid-template-columns: repeat(3, 1fr); */
            grid-template-columns: 1fr minmax(200px, auto) 1fr;
        }

        .parent div {
            border-radius: 5px;
            margin: 10px;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>

</html>

code_grid3>grid_11_2

<!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>grid_11_2</title>
    <!--auto-fill, auto-fit이란 -->
    <style>
        .parent {
            border: 1px solid #333;
            width: 700px;
            background-color: #a29bfe;
            display: grid;
            /* grid-template-columns: repeat(3, minmax(250px, 1fr)); */
            /* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 10px;
        }

        .parent div {
            border-radius: 5px;
            margin: 10px;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>

</html>

code_grid3>grid_11_3

auto-fit
auto-fill

<!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>grid_11_3</title>
    <!--auto-fill, auto-fit  차이-->
    <style>
        .parent {
            border: 1px solid #333;
            width: 700px;
            background-color: #a29bfe;
            display: grid;
            /* grid-template-columns: repeat(3, minmax(250px, 1fr)); */
            /* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
            /* autp-fill :최소값 100씩 만들고 자신의 크기 유지 */
            /* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
            /* autp-fit :부모의 크기만큼 채워줌 */
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        }

        .parent div {
            border-radius: 5px;
            margin: 10px;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

</html>

project 1 폴더

결과 : 화면창 크기에 따라 이미지 크기 변화

index.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>미디어 쿼리 없는 반응형 이미지 갤러리</title>
    <link rel="stylesheet" href="style.css">
    <style>

    </style>
</head>

<body>
    <div class="face-gallery">
        <img src="images/client-01.jpg" alt="face1">
        <img src="images/client-02.jpg" alt="face2">
        <img src="images/client-03.jpg" alt="face3">
        <img src="images/client-04.jpg" alt="face4">
        <img src="images/client-05.jpg" alt="face5">
        <img src="images/client-06.jpg" alt="face6">
    </div>
</body>

</html>

style.css

body{
    margin: 0;
    font-family: arial;
}    
.face-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 5px;

}

.face-gallery img {
    min-width: 100%;
}

project 2 폴더

index.html                                     

mobile

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>베스트 상품 project2 index</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <section class="best-seller">
            <h4 class="best-header">Best Sellers</h4>

            <div class="items-inner">
                <div class="item">
                    <img src="images/best-item-01.png" alt="상품1">
                    <div class="name">
                        Best Home Application 01
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <img src="images/best-item-02.png" alt="상품2">
                    <div class="name">
                        Best Home Application 02
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <img src="images/best-item-03.png" alt="상품3">
                    <div class="name">
                        Best Home Application 03
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <img src="images/best-item-04.png" alt="상품4">
                    <div class="name">
                        Best Home Application 04
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <img src="images/best-item-05.png" alt="상품5">
                    <div class="name">
                        Best Home Application 05
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <img src="images/best-item-06.png" alt="상품6">
                    <div class="name">
                        Best Home Application 06
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <img src="images/best-item-07.png" alt="상품7">
                    <div class="name">
                        Best Home Application 07
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <img src="images/best-item-08.png" alt="상품8">
                    <div class="name">
                        Best Home Application 08
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <img src="images/best-item-09.png" alt="상품9">
                    <div class="name">
                        Best Home Application 09
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <img src="images/best-item-10.png" alt="상품10">
                    <div class="name">
                        Best Home Application 10
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <img src="images/best-item-11.png" alt="상품11">
                    <div class="name">
                        Best Home Application 11
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <img src="images/best-item-12.png" alt="상품12">
                    <div class="name">
                        Best Home Application 12
                        <span>10만원</span>
                    </div>
                </div>

            </div>

        </section>
    </div>
</body>

</html>

style.css

body{
    margin: 0;   
    color: #222;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Best Seller */
.container{
    height: 100vh;
    display: grid;
    justify-items: center;
    align-items: center;
}
.best-seller{
    width: 1230px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    box-sizing: border-box;
    padding: 30px 30px;
}
.best-header{
    font-size: 22px;
    padding-left: 0px;

}
.items-inner{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 15px;
    cursor: pointer;
}
.name span{
    display: block;
    color: royalblue;
}

.item:hover .name{
    color: red;
}
/* Tablet */
@media (min-width: 768px) and (max-width:1024px) {
    .container{
        align-items: start;
    }
    .best-seller{
        width: 100%;
        box-shadow: none;
        border-radius: 0;
    }
    .items-inner{
        grid-template-columns: 1fr 1fr;
    }
}
/* Mobile */
@media (max-width:767px) {
    /* 한줄로 변경 */
    .container{
        align-items: start;
    }
    .best-seller{
        width: 100%;
        box-shadow: none;
        border-radius: 0;
    }
    .items-inner{
        grid-template-columns: 1fr;
    }
}

project 2 ex 폴더 (remind)

이미지 하나로 원하는 아이콘 나타내기

images>num.jpg                                          index.html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>베스트 상품 project2 index</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <section class="best-seller">
            <h4 class="best-header">Best Sellers</h4>

            <div class="items-inner">
                <div class="item">
                    <div class="bg one">
                        <a href="#"></a>
                    </div>
                    <div class="name">
                        Best Home Application 01
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <div class="bg two">
                        <a href="#"></a>
                    </div>
                    <div class="name">
                        Best Home Application 02
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <div class="bg three">
                        <a href="#"></a>
                    </div>
                    <div class="name">
                        Best Home Application 03
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <div class="bg four">
                        <a href="#"></a>
                    </div>
                    <div class="name">
                        Best Home Application 04
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <div class="bg five">
                        <a href="#"></a>
                    </div>
                    <div class="name">
                        Best Home Application 05
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <div class="bg six">
                        <a href="#"></a>
                    </div>
                    <div class="name">
                        Best Home Application 06
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <div class="bg seven">
                        <a href="#"></a>
                    </div>
                    <div class="name">
                        Best Home Application 07
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <div class="bg eight">
                        <a href="#"></a>
                    </div>
                    <div class="name">
                        Best Home Application 08
                        <span>10만원</span>
                    </div>
                </div>
                <div class="item">
                    <div class="bg nine">
                        <a href="#"></a>
                    </div>
                    <div class="name">
                        Best Home Application 09
                        <span>10만원</span>
                    </div>
                </div>

            </div>

        </section>
    </div>
</body>

</html>

 style.css

body{
    margin: 0;   
    color: #222;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Best Seller */
.container{
    height: 100vh;
    display: grid;
    justify-items: center;
    align-items: center;
}
.best-seller{
    width: 1230px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    box-sizing: border-box;
    padding: 30px 30px;
}
.best-header{
    font-size: 22px;
    padding-left: 0px;

}
.items-inner{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.bg {
    width:60px;
    height:100px;
}
.bg>a{
    display: block;
    background: url(./images/num.jpg);
    width: 100%;
    height: 100%;
    text-indent:-9999px; 
}
.one>a{
    background-position: -50px 0; 
}
.two>a{
    background-position: -115px 0; 
}
.three>a{
    background-position: -173px 0; 
}
.four>a{
    background-position: -235px 0; 
}
.five>a{
    background-position: -290px -120px; 
}
.six>a{
    background-position: -350px -120px;
}
.seven>a{
    background-position: -110px -120px;
}
.eight>a{
    background-position: -169px -120px;
}
.nine>a{
    background-position: -230px -120px;
}
.name span{
    display: block;
    color: royalblue;
}

.item:hover .name{
    color: red;
}
/* Tablet */
@media (min-width: 768px) and (max-width:1024px) {
    .container{
        align-items: start;
    }
    .best-seller{
        width: 100%;
        box-shadow: none;
        border-radius: 0;
    }
    .items-inner{
        grid-template-columns: 1fr 1fr;
    }
}
/* Mobile */
@media (max-width:767px) {
    /* 한줄로 변경 */
    .container{
        align-items: start;
    }
    .best-seller{
        width: 100%;
        box-shadow: none;
        border-radius: 0;
    }
    .items-inner{
        grid-template-columns: 1fr;
    }
}

project 3 폴더 

<!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="style.css">
</head>
<style>
    body {
        margin: 0;
        height: 100vh;
        background-color: #eee;
    }

    .container {
        display: grid;
        align-content: center;
        margin: 20px 20px;
        /* height: 100vh; */
    }

    .heading {
        font-style: 42px;
        font-weight: 600px;
        text-align: center;
        padding-bottom: 40px;
        margin-bottom: 60px;
    }

    section div img {
        width: 100%;
        border-radius: 10px;
    }

    .focus {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 1fr 1fr;
        grid-template-areas:
            'item1 item1 item2 item3 item4 item5'
            'item1 item1 item6 item7 item8 item9';
        gap: 15px;
    }

    .item1 {
        grid-area: item1;
    }

    .item2 {
        grid-area: item2;
    }

    .item3 {
        grid-area: item3;
    }

    .item4 {
        grid-area: item4;
    }

    .item5 {
        grid-area: item5;
    }

    .item6 {
        grid-area: item6;
    }

    .item7 {
        grid-area: item7;
    }

    .item8 {
        grid-area: item8;
    }

    .item9 {
        grid-area: item9;
    }

    /* tablet */
    @media (min-width:768px) and (max-width:1024px) {
        .container {
            align-content: start;
        }

        .focus {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-areas:
                'item1 item1 item2'
                'item1 item1 item3'
                'item4 item5 item6'
                'item7 item8 item9';
            padding-bottom: 20px;

        }
    }

    /* mobile */
    @media (max-width:767px) {
        .container {
            align-content: start;
        }

        .focus {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: 1fr;
            grid-template-areas:
                'item1 item1'
                'item1 item1'
                'item2 item3'
                'item4 item5'
                'item6 item7'
                'item8 item9';
            padding-bottom: 20px;
        }
    }
</style>

<body>
    <div class="container">
        <h1 class="heading">Grid Gallery</h1>
        <section class="focus">
            <div class="item1"><img src="images/blog-post-01.jpg" alt=""></div>
            <div class="item2"><img src="images/blog-post-02.jpg" alt=""></div>
            <div class="item3"><img src="images/blog-post-03.jpg" alt=""></div>
            <div class="item4"><img src="images/blog-post-04.jpg" alt=""></div>
            <div class="item5"><img src="images/blog-post-05.jpg" alt=""></div>
            <div class="item6"><img src="images/blog-post-06.jpg" alt=""></div>
            <div class="item7"><img src="images/blog-post-07.jpg" alt=""></div>
            <div class="item8"><img src="images/blog-post-08.jpg" alt=""></div>
            <div class="item9"><img src="images/blog-post-09.jpg" alt=""></div>
        </section>
    </div>
</body>

</html>

git

$ cd .. : 상위 폴더 이동

$ cd (하위폴더명) : 하위 폴더 이동 

$ ls : 디렉토리의 내용을 알고 싶을 때 사용하는 리눅스 명령어

$ ls -al : 디렉토리의 숨겨진 내용까지 알고 싶을 때 사용


<!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>자바스크립트 round_01.html</title>
    <script>
        /*
            자바스크립트 주석 처리와 내부 스크립트 선언(.js)
        */

        document.write("Hello java script<br>")

    </script>
</head>

<body>
    자바스크립트 예제입니다.
</body>

</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>자바스크립트 round_02.html</title>
    <script>
        function aaa() {
            document.write("Hello java script")
        }
    </script>
</head>

<body>
    <div>
        <h2>java script ex2</h2>
    </div>
    <script>
        aaa();
    </script>
</body>

</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>자바스크립트 round_03.html</title>
    <script>
        //함수 설계
        function aaa() {
            var a = 5;
            var b = a + 5;
            var c = b + 5;
            document.write("b= " + b + "<br>");
            document.write("c= " + c + "<br>")
        }
    </script>
</head>

<body>
    <div>
        <h2>java script ex3</h2>
    </div>
    <script>
        //함수 호출
        aaa();
    </script>
</body>

</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>자바스크립트 round_04.html</title> -->
    <script>
        let d;

        var a = 5, b, c;//전역변수
        //a는 선언과 동시에 초기화 b,c는 선언만 
        //var b;
        //var c;
        //함수 설계
        function aaa() {
            var test;//안에 쓰여도 전역변수로 쓰이기 때문에 요즘은 let을 씀
            b = a + 5;
            document.write("b = " + b + "<br>");
        }
        function bbb() {
            c = b + 5;
            document.write("c = " + c + "<br>")
        }
    </script>
</head>

<body>
    <div>
        <h2>java script 전역 변수와 함수</h2>
    </div>
    <script>
        //함수 호출
        aaa();
        bbb();
    </script>
</body>

</html>

확인 누르면 아래 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>자바스크립트 round_05.html</title>
    <script>
        /*
            script란 기생언어이다.

            shell script란 운영체제에 기생 언어이다(터미널 같은)
            자바스크립트 언어는 스크립트 언어라서 브라우저가 있어야
            실행할 수 있다.(html)

            //자바스크립트도 브라우저 없이 실행 할 수 없을 까
            해서 나온게 node.js이다.
            (자바로 치면 jvm 실행 환경 같은 거라고 보면 된다.)
        */
        function randomValue() {

            let date = new Date();
            let currentSeconds = date.getSeconds();
            let number = (currentSeconds % 5) + 1;
            alert("발생된 난수 = " + number);
        }
    </script>

</head>

<body>
    <div>
        <h2>자바스크립트 ex5 </h2>
    </div>
    <script>
        randomValue();
    </script>
</body>

</html>