1-12_Javascript 맛보기

250x250

Recent Posts

« 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

관리 메뉴

Hello creators 🙌

1-12_Javascript 맛보기 본문

[WEB & AI] (feat. 취준)/스파르타코딩클럽_웹개발종합반

1-12_Javascript 맛보기

부시매나_HA 2023. 9. 28. 22:23

728x90

이번 회차 학습 목표 (goal)

이해 하고자 하는 것
- 'Javascript' 에 대한 이해

Javascript 기초 이해 하기

Ⅰ. Javascript 란?

프로그래밍 언어 중 하나
==브라우저== 가 알아들을 수 있는 언어
- python을 알아들 을 수 있는 브라우저, javascript를 알아들을 수 있는 언어 등을 따로 만들면 -> 굉장히 불편할 것 -> so, 브라우저 가 알아들을 수 있는 언어를 javascript 로 정함
- 즉, 모든 인터넷을 구현할 때, 'javascript' 만 쓰자! = 이게 =='표준'== 이라는 개념.

Java 랑 Javascript 의 관련성?
- 없음.

Ⅱ. javascript 를 어떻게 사용?

1. 어디에서 써?

style 밑에 있는, script 태그 에 작성

2. 이번 예제에서 뭘 하게 할거야?

click 하면 -> hey() 함수를 호출해서 -> 안녕! 을 불려주게 할거야.
- 그러면, 뭐가 작성되어야 해? - 1) 함수 `정의` - 2) 함수 `호출` - 🙌 이렇게 2부분이 있어야 한다고 생각함.

3. 그러면, 코드를 작성해보면!

23.01.23 학습 녹화![[vertical_Trim 1.mp4]]

이것 작성 할 때 어려웠던 부분 📛📛📛
- 함수 정의 할 때, script 의 위치!
- onclick 할 때, 어떤 button 에 했어야 하는지.

전체 코드 🔗

<!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>
        /* <!-- style 밑에 넣기 --> */
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
            /* div 박스 자체 배경 색 */
            background-color: green;

            /* div 박스 자체 크기 조절 */
            width: 100%;
            height: 250px;

            /* 상어 이미지 넣기 */
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
            background-position: center;
            background-size: cover;

            /* 글씨 흰색 */
            color: white;

            /* ⭐⭐⭐ div 안 내용물을 가운데로 손쉽게 정렬하기 (4가지 set) */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        /* ⭐⭐⭐ div 안에 있는 button 내 접근하기 위한 syntax */
        .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;
        }

        /* warp 영역을 꾸며주기 */
        .wrap {

            /* 화면 변화에 안 깨지는 화면 만들기 */
            /* 커지면 최대 1200px 까지만 커질 수 있어! */
            max-width: 1200px;
            /* 그 이전에는 95% 만 커질 수 있어.*/
            width: 95%;

            /* 윗 부분을 조금 더 떼어주고 싶음 -> so, 20px, 0px 을 넣어줌 */
            margin: 20px auto 0px auto;
        }

        .mypost {

            /* 화면 변화에 안 깨지는 화면 만들기 */
            /* 커지면 최대 1200px 까지만 커질 수 있어! */
            max-width: 1200px;
            /* 그 이전에는 95% 만 커질 수 있어.*/
            width: 95%;


            /* div 영역 잡을 때, 백 그라운드 영역 잡고 하는게 좋음 ⭐⭐  */
            /* background-color: green; */
            /* width: 500px; */


            /* 위에 살짝 띄우고 div 영역 잡고 싶음 -> 10px, 0px 만듦 */
            margin: 20px auto 0px auto;

            /* 박스 shadow 넣기 */
            box-shadow: 0px 0px 3px 0px gray;

            padding: 20px;

        }

        .mybtn {
            /* ⭐⭐⭐ 가운데로 손쉽게 정렬하기 (4가지가 set) */
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            margin-top: 10px;
        }

        .mybtn>button {
            margin-right: 10px;
        }
    </style>

    <!-- ⭐⭐⭐ head style 밑 = javascript 치는 곳 -->
    <script>
        function hey() {
            alert('안녕!');
        }
    </script>



</head>

<body>
    <!-- html 로 기본 뼈대 만들기 -->
    <div class="mytitle">
        <h1> 내 생애 최고의 영화들 🎬 </h1>
        <!-- ⭐⭐⭐ click 하면 -> hey() 함수 실행하게 하기 -->
        <button onclick="hey()"> 영화 기록하기 ✍️ </button>
    </div>

    <div class="mypost">

        <!-- 영화 URL  -->
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">영화 URL</label>
        </div>

        <p> </p>

        <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="floatingTextarea2"
                style="height: 100px"></textarea>
            <label for="floatingTextarea2">코멘트</label>
        </div>

        <!-- 버튼 -->
        <div class="mybtn">
            <button type="button" class="btn btn-dark">기록하기👇</button>
            <button type="button" class="btn btn-light">닫기🙌</button>

        </div>
    </div>

    <!-- md4 로 해서 > 가로 4장으로 만들기 ⭐⭐⭐  -->
    <div class="wrap">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card">
                    <!-- 포스터 이미지 넣어주기 ⭐⭐⭐  -->
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.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://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.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://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.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://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.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>
    </div>




</body>

</html>

728x90

저작자표시 비영리 변경금지

'[WEB & AI] (feat. 취준) > 스파르타코딩클럽_웹개발종합반' 카테고리의 다른 글

1-14_Javascript 기초 문법 배우기(2) (0)	2023.10.02
1-13_Javascript 기초 문법 배우기(1) (0)	2023.09.28
1-11_Quiz_포스팅박스를 완성하기! (0)	2023.09.28
1-10_본격 부트스트랩 써보기 (0)	2023.09.27
1-9_ CSS 꿀팁 한번 더 배우기 (0)	2023.09.27

'[WEB & AI] (feat. 취준)/스파르타코딩클럽_웹개발종합반' Related Articles

Comments

Hello creators 🙌

1-12_Javascript 맛보기 본문

1-12_Javascript 맛보기

이번 회차 학습 목표 (goal)

Javascript 기초 이해 하기

Ⅰ. Javascript 란?

Ⅱ. javascript 를 어떻게 사용?

1. 어디에서 써?

2. 이번 예제에서 뭘 하게 할거야?

3. 그러면, 코드를 작성해보면!

전체 코드 🔗

'[WEB & AI] (feat. 취준) > 스파르타코딩클럽_웹개발종합반' 카테고리의 다른 글

티스토리툴바