풀스택 개발자 과정 55일차

너구·2026년 7월 27일

풀스택 성장과정

목록 보기
58/79

CSS Grid Layout 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Layour</title>
    <style>
        #wrapper {
            width: 600px;
            display: grid;
            /* 그리드 컨테이너 지정 */
            grid-template-columns: 
            /* 1fr 1fr 1fr; 200px 200px 200px */
                repeat(3, 1fr);
            /* 너비 200px 칼럼 3개 */
            /* fr 상대적 크기 1fr은 width 기준으로 나눠 진다. */
            grid-template-rows: 
            /* 100px; 줄 높이 100px */
            minmax(100px, auto)
        }

        .items {
            padding: 100px;
            background-color: #eee;
        }

        .items:nth-child(odd) {
            background-color: #fff;
        }
    </style>
</head>
<body>
  <div id="wrapper">
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, 
        reprehenderit.Lorem ipsum dolor, sit amet consectetur adipisicing elit. </div>
    <div class="items">Lorem ipsum dolor, sit amet consectetur adipisicing elit.Lorem ipsum dolor, 
        sit amet consectetur adipisicing elit</div>
    <div class="items">Lorem ipsum dolor sit amet.Lorem ipsum dolor, sit amet consectetur adipisicing</div>
    <div class="items">Lorem ipsum dolor sit.Lorem ipsum dolor, sit amet consectetur adipisicing elit</div>
    <div class="items">Lorem, ipsum dolor.</div>
  </div>
</body>
</html>

CSS Grid Layout 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Layout</title>
    <style>
        #wrapper1 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            /* 화면을 꽉 채울만큼 칼럼 너비를 늘려서 표시 */
            margin-bottom: 20px;
        }

        #wrapper2 {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            /* 칼럼 최소 너비만큼 채워서 표시 */
        }

        h1 {
            font-size: 24px;
        }

        .items {
            padding: 15px;
            background-color: #eee;
        }

        .items:nth-child(odd) {
            background-color: #bbb;
        }
    </style>
</head>
<body>
  <h1>auto-fit일 때</h1>
  <div id="wrapper1">            
    <div class="items">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Soluta nesciunt magni voluptatem.</div>
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="items">Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        Eius nulla corrupti porro!</div>
    <div class="items">Lorem ipsum dolor sit.</div>
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, quos!</div>
    <div class="items">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro odit quam sit.</div>
  </div>
  <h1>auto-fill일 때</h1>
  <div id="wrapper2">            
    <div class="items">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Soluta nesciunt magni voluptatem.</div>
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="items">Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        Eius nulla corrupti porro!</div>
    <div class="items">Lorem ipsum dolor sit.</div>
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, quos!</div>
    <div class="items">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro odit quam sit.</div>
  </div>
</body>
</html>

CSS Grid Layout 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Layout</title>
    <style>
        #wrapper {
            display: grid;
            grid-template-columns: repeat(3, 200px);
            /* 너비 200px인 칼럼 3개 */
            grid-template-rows: minmax(100px, auto);
            grid-gap: 20px 30px;
            /* 칼럼 간격 30px, 줄 간격 20px */
            /* 또는 아래와 같이 사용 */
            /* grid-column-gap:30px; */
            /* grid-row-gap: 20px; */
        }

        .items {
            padding: 15px;
            background-color: #eee;
        }

        .items:nth-child(odd) {
            background-color: #bbb;
        }
    </style>
</head>
<body>
  <div id="wrapper">
    <div class="items">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Soluta nesciunt magni voluptatem.</div>
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="items">Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        Eius nulla corrupti porro!</div>
    <div class="items">Lorem ipsum dolor sit.</div>
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, quos!</div>
    <div class="items">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro odit quam sit.</div>
  </div>
</body>
</html>

CSS Grid Layout 4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Layour</title>
    <style>
        #wrapper {
            width: 700px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 100px);
        }

        .box {
            padding: 15px;
            color: #fff;
            font-weight: bold;
            text-align: center;
        }

        .box1 {
            background-color: #3689ff;
            grid-column: 1/4;
        }

        .box2 {
            background-color: #00cf12;
            grid-row: 2/4;
        }

        .box3 {
            background-color: #ff9010;
            grid-column: 2/4;
            grid-row-start: 2;
            /* 시작과 끝을 같이 지정 grid-row: 2/3; */
        }

        .box4 {
            background-color: #ffd000;
            grid-column-start: 3;
            /* 시작과 끝을 같이 지정 grid-column: 3/4; */
            grid-row-start: 3;
            /* 시작과 끝을 같이 지정 grid-row: 3/4; */
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
        <div class="box box4">box4</div>
    </div>
</body>
</html>

CSS Grid Layout 5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Layour</title>
    <style>
        #wrapper {
            width: 700px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 100px);
            grid-template-areas: 
                "box1 box1 box1"
                "box2 box3 box3"
                "box2 . box4";
        }

        .box {
            padding: 15px;
            color: #fff;
            font-weight: bold;
            text-align: center;
        }

        .box1 {
            background-color: #3689ff;
            grid-area: box1;
        }

        .box2 {
            background-color: #00cf12;
            grid-area: box2;
        }

        .box3 {
            background-color: #ff9019;
            grid-area: box3;
        }

        .box4 {
            background-color: #ffd000;
            grid-area: box4;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
    </div>
</body>
</html>

CSS Grid Layout 6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Layout</title>
    <style>
        .gallery {
            width: 700px;
            margin: 20px auto;
            display: grid;
            grid-template-areas: 
                "photo1 photo1 photo2"
                "photo1 photo1 photo3"
                "photo4 photo5 photo6";
            gap: 5px;
        }

        .gallery img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            object-fit: cover;
        }

        .photo1 {
            grid-area: photo1;
        }

        .photo2 {
            grid-area: photo2;
        }

        .photo3 {
            grid-area: photo3;
        }

        .photo4 {
            grid-area: photo4;
        }

        .photo5 {
            grid-area: photo5;
        }

        .photo6 {
            grid-area: photo6;
        }
    </style>
</head>
<body>
    <div class="gallery">
        <img class="photo1" src="images/photo-1.jpg" alt="따듯한 차가 있는 겨울 풍경">
        <img class="photo2" src="images/photo-2.jpg" alt="남극 펭귄">
        <img class="photo3" src="images/photo-3.jpg" alt="눈이 가득 쌓인 시골 풍경">
        <img class="photo4" src="images/photo-4.jpg" alt="오로라가 보이는 밤풍경">
        <img class="photo5" src="images/photo-5.jpg" alt="눈 쌓인 배경">
        <img class="photo6" src="images/photo-6.jpg" alt="나뭇가지에 앉아있는 빨간 새">
    </div>
</body>
</html>

Q1

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q1</title>

    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            /* 가로 가운데 */
            align-items: flex-start;
            /* 위쪽 정렬 */
            min-height: 100vh;
            padding-top: 30px;
        }

        .container {
            width: 700px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .item {
            height: 150px;
            text-align: center;
            padding-top: 10px;
            box-sizing: border-box;
        }

        .item:nth-child(odd) {
            background-color: lightpink;
        }

        .item:nth-child(even) {
            background-color: rgb(232, 79, 105);
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>

</body>

</html>

Q2

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q2</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: black;
            /* 배경색 */
            margin: 0;
        }

        .container {
            width: 600px;
            height: 500px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            /* 4개의 동일한 크기의 열 */
            grid-template-rows: repeat(3, 1fr);
            /* 3개의 동일한 크기의 행 */
            gap: 20px;
            /* 그리드 아이템 사이의 간격 */
        }

        .grid-item {
            background-color: yellow;
            padding: 20px;
            text-align: center;
            font-size: 1.5em;
        }

        .item1 {
            grid-column: 1/3;
            grid-row: 1/3;
        }

        .item2 {
            grid-column: 3/5;
            grid-row: 1/2;
        }

        .item3 {
            grid-column: 3/4;
            grid-row: 2/4;
        }

        .item4 {
            grid-column: 4/5;
            grid-row: 2/4;
        }

        .item5 {
            grid-column: 1/3;
            grid-row: 3/4;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="grid-item item1">item1</div>
        <div class="grid-item item2">item2</div>
        <div class="grid-item item3">item3</div>
        <div class="grid-item item4">item4</div>
        <div class="grid-item item5">item5</div>
    </div>
</body>

</html>

Javascript

글자색 바꾸기

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글자색 바꾸기</title>
    <style>
        body {
            text-align: center;
        }

        #heading {
            color: blue;
        }

        #text {
            color: gray;
            font-size: 15px;
        }
    </style>
    <script>
        function changeColor() {
            var heading = document.querySelector('#heading');

            if (heading.style.color == "red") {
                heading.style.color = "blue";
            } else {
                heading.style.color = "red"
            }
        }
    </script>
</head>

<body>
    <h1 id="heading" onclick="changeColor()">자바스크립트</h1>
    <p id="text">위 텍스트를 클릭해보세요</p>
    
</body>

</html>

alert 문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>alert문</title>
</head>
<body>
    <script>
        alert("안녕하세요");
        var reply = confirm("정말 배경 이미지를 바꾸겠습니까?");
        alert(reply);
        document.write("<h1>" + reply + "</h1>");
    </script>
</body>
</html>

Welcome

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome</title>
</head>
<body>
    <h1>어서오세요</h1>
    <script>
        var name = prompt("이름을 입력하세요.");
        console.log(name);
        document.write("<b><big>" + name + "</big></b>님, 환영합니다.");
        // <b><big>홍길동</big></b>님, 환영합니다.
    </script>
</body>
</html>

나이 계산하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나이 계산하기</title>
</head>
<body>
    <script>
        var currentYear = 2026;
        var birthYear;
        var age;

        birthYear = prompt("태어난 연도를 입력하세요. (YYYY)", "나이");
        console.log(typeof (birthYear))
        age = currentYear - birthYear + 1;
        document.write(currentYear + "년 현재<br>");
        document.write(birthYear + "년에 태어난 사람의 나이는 " + age + "세입니다.")
    </script>
</body>
</html>

조건문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>조건문</title>
</head>
<body>
    <script>
        var userNumber = prompt("숫자를 입력하세요.");

        if (userNumber % 3 === 0)
            alert("3의 배수입니다.");
        else
            alert("3의 배수가 아닙니다.")
    </script>
</body>
</html>

세션 선택 - switch문

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>세션 선택 - Switch문</title>
    <style>
        body {
            background-color: #0c3268;
            color: rgb(243, 243, 243);
        }

        p {
            margin-top: 80px;
            font-size: 2em;
            font-weight: 700;
            text-align: center;
            text-shadow: 1px 2px 1px #000;
        }

        p strong {
            font-size: 2.2em;
            color: yellow;
        }
    </style>
</head>

<body>
    <script>
        var session = prompt("관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인");

        switch (session) {
            case "1":
                document.write("<p>마케팅 세션은 <strong>201호</strong>에서 진행됩니다.</p>");
                break;
            case "2":
                document.write("<p>개발 세션은 <strong>203호</strong>에서 진행됩니다.</p>");
                break;
            case "3":
                document.write("<p>디자인 세션은 <strong>205호</strong>에서 진행됩니다.</p>");
                break;
            default:
                alert("잘못 입력했습니다.")
        }
    </script>
</body>

</html>

구구단

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>구구단 - for문</title>
</head>
<body>
    <h1>구구단</h1>
    <script>
        var i, j;

        for(i = 2; i <= 9; i++) {
            document.write("<h3>" + i + "단</h3>");
            for(j = 1; j <= 9; j++) {
                document.write(i + " X " + j + " = " + i*j + "<br>");
            }
        }
    </script>
</body>
</html>

팩토리얼 계산하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>팩토리얼 계산하기</title>
    <style>
        body {
            padding-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>while문을 사용한 팩토리얼 계산</h1>
    <script>
        var n = prompt("숫자를 입력하세요.");
        var msg = "";

        if (n !== null) { // 취소 버튼을 주르지 않았는지 체크
            var nFact = 1; // 결과값
            var i = 1; // 카운터

            while (i <= n) {
                nFact *= i;
                i++;
            }
            msg = n + "! =" + nFact; // 결과 값을 표시할 문자열
        } else {
            msg = "값을 입력하지 않았습니다.";
        }

        document.write(msg); // 결과 표시
    </script>
</body>
</html>

구구단 for문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>구구단 - for문</title>
</head>
<body>
    <h1>구구단</h1>
    <script>
        var i, j;

        for (i = 1; i <= 9; i++) {
            document.write("<div>");
            document.write("<h3>" + i + "단</h3>");
            for (j = 1; j <= 9; j++) {
                document.write(i + " X " + j + " = " + i * j + "<br>");
            }
            document.write("</div>");
            if (i === 3) break;
        }
    </script>
</body>
</html>

짝수 더하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>짝수 더하기</title>
    <style>
        body {
            padding-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>짝수끼리 더하기</h1>
    <script>
        var i;
        var n = 10;
        var sum = 0;

        for (i = 1; i <= n; i++) {
            if (i % 2 === 1)
            continue
        sum += i;

        document.write(i + " ------- " + sum + "<br>");
        }
    </script>
</body>
</html>

자리 배치도

<!DOCTYPE html>
<!-- 자리 배치도 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q3</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        table,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        td {
            padding: 10px;
            font-size: 0.9em;
        }
    </style>
</head>

<body>
    <h1>자리 배치도</h1>
    <script>
        var num = Number(prompt("입장객은 몇 명인가요?"));
        var colNum = Number(prompt("한 줄에 몇 명씩 앉습니까?"));

        var rowNum;

        if (num % colNum == 0) {
            rowNum = num / colNum;
        } else {
            rowNum = parseInt(num / colNum) + 1;
        }

        var i, j;
        var seatNum;

        document.write("<table>");

        for (i = 0; i < rowNum; i++) {
            document.write("<tr>");

            for (j = 1; j <= colNum; j++) {
                seatNum = i * colNum + j;

                if (seatNum > num) {
                    break;
                }

                document.write("<td>좌석 " + seatNum + "</td>");
            }

            document.write("</tr>");
        }

        document.write("</table>");
    </script>
</body>

</html>

4의 배수 찾기

<!DOCTYPE html>
<!-- 4의 배수 찾기 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q4</title>
</head>
<body>
    <h2>4의 배수일까 아닐까</h2>
    <script>
        var userNumber = prompt("숫자를 입력하세요")

        if(userNumber !== null) {
            if(userNumber % 4 === 0)
                document.write(userNumber + "는 4의 배수입니다.")
        } else {
            document.write(userNumber + "는 4의 배수가 아닙니다.")
        }
    </script>
</body>
</html>

3의 배수 찾기

<!DOCTYPE html>
<!-- 3의 배수 찾기 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q5</title>
</head>
<body>
    <script>
        var i;
        var userNumber = prompt("몇 까지 3의 배수를 찾을까요?")
        var count = 0;

        if (userNumber !== null) {
            for (i = 1; i <= userNumber; i++) {
                if (i % 3 === 0) {
                    count++;
                    document.write(i + ", ");
                }
            }
            document.write("<p>" + userNumber + "까지 3의 배수의 개수: " + count + "</p>");
        }
    </script>
</body>
</html>

마무리

오늘은 못다한 CSS 진도를 다 나가고 js를 처음 배웠다.
java와 비슷한데 조금씩 달라서 헷갈리기도 했지만 처음 java를 배울 때보단 쉬웠다.
열심히 공부해서 js도 마스터 해야겠다.

profile
너구
이전 포스트

풀스택 개발자 과정 54일차

다음 포스트

풀스택 개발자 과정 56일차

0개의 댓글