[스파르타코딩클럽-힙한취미코딩] 추억 소환 코딩 패키지 미션

스파르타코딩클럽이 쉽고 재미있게 가르쳐준다는 이야기는 친구한테 들어서 알고 있었는데 마침 이번 추석연휴동안 무료 코딩 강의를 열어주고 미션 수행해서 당첨되면 상품까지 준다는 소식을 듣고 바로 도전해봤다.

나는 API를 한 번 써보고 싶었기 때문에 첫번째 미션인 추억 소환 코딩 패키지를 선택했다!
난이도는 엄청 쉬웠지만.. 그래도 꽤 얻어가는 게 많이 있었다고 생각한다.
배포까지는 스파르타가 해줘서 아직 혼자 할 수는 없겠지만,
그래도 html, css, 지도 api 넣기, 폰트 바꾸기까지 웬만한 건 다 건드려볼 수 있겠다!

내가 친구들과 갔었던 서촌의 크로플 맛집에서의 추억을 담은 웹페이지를 만들었다. 아래는 만든 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>

    <meta property="og:title" content="우문주 님의 추억사진"/>
    <meta property="og:description" content="내가 만든 첫번째 웹페이지!"/>
    <meta property="og:image" content="image.jpg"/>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            margin-top: 30px;
        }

        .btn {
            width: 300px;
            height: 40px;

            border: 2px solid #e8344e;

            text-decoration: none;
            text-align: center;

            line-height: 40px;

            color: #e8344e;
            font-weight: bold;

            border-radius: 40px;
        }

        .btn:hover {
            background-color: #e8344e;
            color: white;
        }

        .box {
            width: 1000px;

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

            margin: 40px auto 0px auto;

        }

        .map {
            width: 500px;
            height: 500px;

            margin-right: 30px;
            border-radius: 24px;
        }

        .story {
            width: 450px;
            height: 500px;
        }

        .img {
            width: 450px;
            height: 300px;

            background-image: url('image.jpg');
            background-position: center;
            background-size: cover;

            border-radius: 24px;
        }

        .story > h2 {
            margin: 20px 0px 0px 0px;
            color: purple;
        }

        .story > h3 {
            margin: 5px 0px 0px 0px;
            font-size: 16px;
            color: grey;

            font-weight: normal;
        }

        .story > p {
            line-height: 24px;
        }

        @media screen and (max-width: 640px) {
            h1 {
                font-size: 26px;
            }

            .box {
                flex-direction: column;
                width: 100%;
            }

            .map {
                width: 100%;
                height: 200px;

                margin: 0;
            }

            .story {
                width: 100%;
                height: auto;

                margin-top: 10px;
            }

            .img {
                width: 100%;
                height: 200px;
            }
        }

    </style>
</head>
<body>
    <div class="mytitle">
        <h1>나의 추억거리를 공유합니다.</h1>
        <a class="btn" href="http://spartacodingclub.shop/free/202105/exhibition" target="_blank">모든 수강생들의 추억 보러가기 ></a>
    </div>
    <div class="box">
        <div class="map" id="map"></div>
        <div class="story">
            <div class="img"></div>
            <h2>118COFFEE</h2>
            <h3>서울 종로구 옥인길 22-1 1층</h3>
            <p>한앎 사람들이랑 오랜만에 만나서 갔던 서촌 카페.<br>
                아무 생각없이 지나가다 그냥 들어가본건데<br>
                커피도 맛있고 분위기도 좋고.<br>
                118라떼와 초콜릿 크로플은 정말..
                또 먹고 싶다ㅠ_ㅠ
            </p>
        </div>
    </div>
    <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=535068688f1a8bca1c21a9445ede0a89"></script>
    <script>
        var markerPosition = new kakao.maps.LatLng(37.580975232802395, 126.96739903997987)
        var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
            mapOption = { 
                center: markerPosition, // 지도의 중심좌표
                level: 3 // 지도의 확대 레벨
            };

        var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

        var imageSrc = "https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/2021_05_free_parents/sparta-marker.png"; 
        var imageSize = new kakao.maps.Size(65, 86); 
        var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); 
        
        var marker = new kakao.maps.Marker({
            map: map,
            position: markerPosition,
            image : markerImage
        });

    </script>
</body>
</html>

하나를 수정하면 그 결과가 금방 나오니까 눈에 보여서 정말 재미있고 쉽게 느껴졌던 것 같다. 앞으로 여러 개 만들어봐야지~

Author And Source

이 문제에 관하여([스파르타코딩클럽-힙한취미코딩] 추억 소환 코딩 패키지 미션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@melaniebesser/스파르타코딩클럽-힙한취미코딩-추억-소환-코딩-패키지-미션

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[스파르타코딩클럽-힙한취미코딩] 추억 소환 코딩 패키지 미션

Author And Source

좋은 웹페이지 즐겨찾기