A Developing Developer

웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - CSS, Javascript 기초 본문

내일배움캠프 4기/[왕초보] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택)

웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - CSS, Javascript 기초

H-JJOO 2022. 10. 6. 15:54

내일배움캠프 4기 사전캠프 3일차

 

- CSS

 

- 포스팅박스

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }


        .mytitle {
            background-color: green;

            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/topgun2.PNG");
            background-size: cover;
            background-position: center;

            color: white;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .mytitle > button {
            width: 200px;
            height: 50px;

            background-color: transparent;
            color: white;

            border-radius: 50px;

            border: 1px solid white;

            margin-top: 10px;
        }

        .mytitle > button:hover {
            border: 2px solid white;
        }

        .mycomment {
            color: gray;
        }

        .wrap {
            max-width: 1800px;
            width: 95%;
            margin: 20px auto 0px auto;
        }

        .card > img {
            height: 700px;
        }

        .mypost {
            max-width: 500px;
            width: 95%;

            margin: 20px auto 0 auto;

            box-shadow: 0 0 3px 0;
            padding: 20px;
        }

        .mybtn {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            margin-top: 20px;


        }

        .mybtn > button {
            margin-right: 20px;
            border: 1px solid black;
        }

        #floatingTextarea {
            height: 200px;
        }
    </style>
    
</head>
<body>
<div class="mytitle">
    <h1>내 생에 최고의 영화</h1>
    <button>영화 기록하기</button>
</div>
<!--===================포스팅박스=========================-->
<div class="mypost">
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">영화URL</label>
    </div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="inputGroupSelect01">
            <option selected>--선택하기--</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="4">⭐⭐⭐⭐</option>
            <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
    </div>
    <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
        <label for="floatingTextarea">코멘트</label>
    </div>
    <div class="mybtn">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button type="button" class="btn btn-light">닫기</button>
    </div>
<!--===================포스팅박스=========================-->
</div>
<div class="wrap">
    <div class="row row-cols-1 row-cols-md-4 g-4">
        <div class="col">
            <div class="card">
                <img src="https://m.media-amazon.com/images/M/MV5BZWYzOGEwNTgtNWU3NS00ZTQ0LWJkODUtMmVhMjIwMjA1ZmQwXkEyXkFqcGdeQXVyMjkwOTAyMDU@._V1_.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">탑건(매버릭)</h5>
                    <p class="card-text">최고의 파일럿이자 전설적인 인물 매버릭(톰 크루즈)은 자신이 졸업한 훈련학교 교관으로 발탁된다. 그의 명성을 모르던 팀원들은 매버릭의 지시를
                                         무시하지만 실전을 방불케 하는 상공 훈련에서 눈으로 봐도 믿기 힘든 전설적인 조종 실력에 모두가 압도된다. 매버릭의 지휘아래 견고한 팀워크를
                                         쌓아가던 팀원들에게 국경을 뛰어넘는 위험한 임무가 주어지자 매버릭은 자신이 가르친 동료들과 함께 마지막이 될 지 모를 하늘 위 비행에
                                         나서는데…</p>
                    <p>⭐⭐⭐⭐⭐</p>
                    <p class="mycomment">꼭 한번 보세요.</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/13/Top_Gun_Maverick_Poster.jpg/220px-Top_Gun_Maverick_Poster.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">탑건(매버릭)</h5>
                    <p class="card-text">최고의 파일럿이자 전설적인 인물 매버릭(톰 크루즈)은 자신이 졸업한 훈련학교 교관으로 발탁된다. 그의 명성을 모르던 팀원들은 매버릭의 지시를
                                         무시하지만 실전을 방불케 하는 상공 훈련에서 눈으로 봐도 믿기 힘든 전설적인 조종 실력에 모두가 압도된다. 매버릭의 지휘아래 견고한 팀워크를
                                         쌓아가던 팀원들에게 국경을 뛰어넘는 위험한 임무가 주어지자 매버릭은 자신이 가르친 동료들과 함께 마지막이 될 지 모를 하늘 위 비행에
                                         나서는데…</p>
                    <p>⭐⭐⭐⭐⭐</p>
                    <p class="mycomment">한번 보셨으면 두번 보세요.</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <img src="https://img.cgv.co.kr/Movie/Thumbnail/StillCut/000082/82120/82120203763_727.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">탑건(매버릭)</h5>
                    <p class="card-text">최고의 파일럿이자 전설적인 인물 매버릭(톰 크루즈)은 자신이 졸업한 훈련학교 교관으로 발탁된다. 그의 명성을 모르던 팀원들은 매버릭의 지시를
                                         무시하지만 실전을 방불케 하는 상공 훈련에서 눈으로 봐도 믿기 힘든 전설적인 조종 실력에 모두가 압도된다. 매버릭의 지휘아래 견고한 팀워크를
                                         쌓아가던 팀원들에게 국경을 뛰어넘는 위험한 임무가 주어지자 매버릭은 자신이 가르친 동료들과 함께 마지막이 될 지 모를 하늘 위 비행에
                                         나서는데…</p>
                    <p>⭐⭐⭐⭐⭐</p>
                    <p class="mycomment">두번 봤으면 세...</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <img src="images/TopGun4.PNG"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">탑건(매버릭)</h5>
                    <p class="card-text">최고의 파일럿이자 전설적인 인물 매버릭(톰 크루즈)은 자신이 졸업한 훈련학교 교관으로 발탁된다. 그의 명성을 모르던 팀원들은 매버릭의 지시를
                                         무시하지만 실전을 방불케 하는 상공 훈련에서 눈으로 봐도 믿기 힘든 전설적인 조종 실력에 모두가 압도된다. 매버릭의 지휘아래 견고한 팀워크를
                                         쌓아가던 팀원들에게 국경을 뛰어넘는 위험한 임무가 주어지자 매버릭은 자신이 가르친 동료들과 함께 마지막이 될 지 모를 하늘 위 비행에
                                         나서는데…</p>
                    <p>⭐⭐⭐⭐⭐</p>
                    <p class="mycomment">네...</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Bootstrap 을 활용하여 포스팅박스를 만들었다.

 

Introduction · Bootstrap v5.0 (getbootstrap.com)

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

1) 큰 박스

그림자 효과 : box-shadow 활용

2) 영화 URL

Forms 의&nbsp; Floating Labels 참고

3) 별점 박스

Input group 의 Custom forms 참고

4) 코멘트 URL

Forms 의 Floating Lables 의 Textareas 참고

5) 기록하기, 닫기 버튼

Buttons 참고 (Button 두개를 div로 묶어서 display:flex; + 4줄)

 

포스팅박스(완성)

 

! 모바일 (참고)

width: 500px;  => 어디에서나 500px 로 맞춰라

 

width : 95%;            => 화면 폭 500px 전에는 95%로 유지하고, 넘으면 500px로 보여준다.

max-width: 500px 

 

- Javascript

프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.

 

강의 중 확 와닫는 비유가 있었다.

 

Java 와 Javascript 는 어떤 차이가 있는가?

 

인도 & 인도네시아

 

바다 & 바다코끼리

 

그렇다. 아무 관련 없다.

 

기본적인 Javascript 사용은 HTML  <head> ~ </head>  안에  <script> ~ </script> 로 공간을 만들어 작성한다.

 

<script>
    function hey() {
        alert('안녕!');
    }
</script>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>스파르타코딩클럽 | Javascript 기초</title>
    <script>
        function hey() {
            alert('안녕!');
        }
    </script>
</head>
<body>
<button onclick="hey()">HEY</button>
</body>
</html>

alert

버튼을 누르면 '안녕!' 이라는 약속된 Alert 가 동작한다.

 

Javascript 는 크롬 개발자도구 콘솔창에서 동작 확인을 할 수 있는데, 

띄어놓은 페이지에서 빠르게 Javascript를 테스트해 볼 수 있게, 개발자들을 위해 만들어둔 도구이다.

 

프로그래밍 언어를 배울때는 5가지를 기억하면 되는데 아래와 같다.

 

1) 변수       : 값을 담는 것

2) 자료형   : 숫자, 문자, 등등

3) 함수       : 위에서 다뤘던 hey() 같은 것

4) 조건문   : if() 참이면 이렇고 else() 아니라면 이렇다.

5) 반복문   : 계속 반복

 

- 변수

let a = 2; // a에 2를 대입

let b = 3; // b에 3을 대입

a + b; // 5

 

- 자료형 중 리스트 & 딕셔너리

 

- 리스트(list) : 순서를 지켜서 가지고 있는 형태

(선언)

let fruits= ['사과', '배', '딸기'];

(출력)

fruits[0] //'사과'

fruits[1] //'배'

fruits[2] //'딸기'

 

(추가)

fruits.push('수박');

fruits // ['사과', '배', '딸기', '수박']

 

(리스트의 길이 구하기)

fruits.length // 4

 

 

- 딕셔너리(dict) : 키(key) : 벨류(value) 값의 묶음

(선언)

let student = {'name' : 'Bob', 'age' : 18};

 

(출력)

student['name'] //'Bob'

student['age']; //18

 

(추가)

student['height'] = 180

student; // {'name' : 'Bob', 'age' : 18, 'height' : 180}

 

- Javascript 자체 함수 (이런 것 들이 있다~)

let myemail = 'icepri3535@gmail.com';

myemail.split('@); //'@' 를 기점으로 'icepri3535' 와 'gmail.com' 이 나눠진다. ['icepri3535', 'gmail.com'] 리스트형!

myemail.split('@)[0]; //'icepri3535'

myemail.split('@)[1]; //'gmail.com'

myemail.split('@')[0].split('.'); // 'gmail' 과 'com' 이 나눠진다 ['gmail', 'com']

 

 

- 함수 : 정해진 동작을 그냥 하는 것

<script>
    function sum(a,b) {
        alert(a + b);
    }
</script>

alert

<script>
    function sum(a,b) {
        alert('계산을 하자');
        return a + b;
    }
    let result = sum(5, 6);
    alert(result);

</script>

흰 화면에서 alert
alert 확인 클릭후 'result' alert

이 때 흰 화면에서 뜨는데, 이는 html 에서 <body>~</body> 가 읽히기 전에 <script> 가 읽힌 것임을 알 수 있다.

 

- 조건문

<script>
    function is_adult(age) {
        if (age > 20) { 
            alert('성인입니다.'); // age 가 20 보다 크면 성인이다
        } else {
            alert('청소년입니다.'); // age 가 20 보다 작으면 청소년이다
        }
    }
</script>

 

is_adult(30);

 

is_adult(10);

- 반복문

<script>
    let fruits = ['사과', '배', '감', '딸기'];
    for (let i = 0; i < fruits.length; i++) { i 가 0부터 하나씩 커지면서 , 리스트의 길이만큼, i 는 1씩 증가
        console.log(fruits[i]); // 내용물을 실행시킨다
    }
</script>

i 가 0 부터 1씩 증가하면서 내용물을 실행시키는데, 이때 리스트의 길이(4) 만큼 반복한다

fruits.length = 4

=> consle.log(fruits[0]); // 사과

=> consle.log(fruits[1]); // 배

=> consle.log(fruits[2]); // 감

=> consle.log(fruits[3]); // 딸기

 

Javascript 연습하기가 하나 더 있지만, 이해는 했고 코드만 긴거같아서 생략하겠다.

 

- 숙제!

bootstrap 또는 템플릿을 활용해서 팬명록의 메인 페이지를 완성해라!

 

2일차때 했던 CSS 가 메인인 숙제인거 같다. 

 

index.html 을 참고해서 homework.html 을 작성하였다.

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {

            width: 100%;
            height: 500px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/iu.PNG");
            background-size: cover;
            background-position: center;

            color: white;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .mypost {
            max-width: 500px;
            width: 95%;

            margin: 20px auto 0 auto;

            box-shadow: 0 0 3px 0;
            padding: 20px;
        }

        .card {
            max-width: 500px;
            width: 95%;

            margin: 20px auto 0 auto;

            box-shadow: 0 0 3px 0;
            padding: 20px;
        }

        .mybtn {
            margin-top: 20px;
        }

        #floatingTextarea {
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="mytitle">
        <h1>IU 팬명록</h1>
    </div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">닉네임</label>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
            <label for="floatingTextarea">응원댓글</label>
        </div>
        <div class="mybtn">
            <button type="button" class="btn btn-dark">응원남기기</button>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer"><cite title="Source Title">호빵맨</cite>
                </footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer"><cite title="Source Title">호빵맨</cite>
                </footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer"><cite title="Source Title">호빵맨</cite>
                </footer>
            </blockquote>
        </div>
    </div>
</body>
</html>

IU 팬명록

 

 

=================================================================================

스파르타코딩클럽_웹개발_종합반(강의자료)

=================================================================================

웹개발 종합반 커리큘럼 상 1주차를 완료했다. 

 

굳이 따지면 3일만에 1주차를 완료했는데. 강의 시간자체가 워낙 짧아서 실제시간은 2시간이 안된다.

 

(하루 8시간이아니고, 8강의라니 너무한거 아니오! ... 덕분에 여유있게 진행 중 이긴합니다ㅎㅎ)

 

그래도 복습하고 개발일지 쓰면서 나름 시간을 알차게 보낸거 같다.

 

시간이 지날수록 여유는 없어지고 배울것도 많아지겠지만 초심 잃지 않고 끝까지 달려보겠다.

 

'내일배움캠프 4기 > [왕초보] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택)' 카테고리의 다른 글

웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - Ajax  (1) 2022.10.11
웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - 서버 클라이언트 통신  (0) 2022.10.11
웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - Javascript, jQuery  (0) 2022.10.07
웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - HTML, CSS 기본 내용  (2) 2022.10.05
웹개발 종합반 (프로그래밍 실무, 풀스택) 39회차 - 서버/클라이언트/웹의 동작 개념  (0) 2022.10.05
'내일배움캠프 4기/[왕초보] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택)' Related Articles more