본문 바로가기
Front-End: Web

추억소환 코딩 패키지

all.silver__ 2021. 4. 30. 21:37
반응형

강의 자료

 

[스파르타코딩클럽] 추억소환 코딩 패키지

A new tool for teams & individuals that blends everyday work apps into one.

www.notion.so

 

 

1. 오늘 배울 것

서버/클라이언트/웹의 동작 개념

웹 서비스는 서버로부터 파일을 받아와서 그대로 그려준다. 브라우저의 역할은 주소창에 주소를 입력하면 서버에 파일을 요청하고, 요청에 알맞은 파일을 서버로부터 받아와서 파일에 적혀있는 그대로 페이지를 그려주는 것이다. 여기서 받아오는 파일은 HTML, CSS, JavaScript이다.

HTML은 뼈대(박스), CSS는 꾸미기(박스 사이즈, 박스 모양) , JavaScript는 움직이게 하는 것(클릭하면 움직이게 하기)이라고 이해하면 된다. 있다가 페이지에 지도를 띄우는 것도 자바스크립트를 통해서 한다.

즉, 브라우저의 역할은

1) 서버에 요청하고 2) 파일을 받아와서 3) 그대로 그리는 것이다.

그리고 서버에는 HTML, CSS, JavaScript 파일을 미리 올려서 모든 사람들이 볼 수 있도록 한다.

 

 

2. 준비하기

Visual Studio Code

메모를 하기 위해서는 메모장 프로그램에서 작성해도 된다. 하지만 불편하니까 여러가지 툴들이 존재하고 우리는 이 툴들을 이용한다. 한컴이나 워드와 같은 프로그램 말이다. VS Code도 마찬가지다. 메모장에서 작성해도 되지만 코드를 작성한다는 목적에 맞춰 더 편리하게 나온 툴이 바로 VS Code이다.

 

 

3. HTML 기본 내용

body 태그 내에 뼈대를 구성하는 코드를 작성한다.

div 태그는 구역을 나누는 역할을 한다.

h1 태그는 페이지마다 하나씩 작성하는 것이 좋다.

  • 자동 정렬 단축키: ctrl+K+F

 

 

4. CSS 기본 내용

  • 요소들 가운데 정렬하기
display:flex;
flex-direction:column;
align-items:center;
justify-content: center;

만약 가로로 배열하고 싶다면 flex-direction: row; 로 작성하면 된다.

 

 

5. 본격 만들기 시작

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="index.css">
</head>
<body>
    <div class="mytitle">
        <h1>나의 추억거리를 공유합니다.</h1>
        <a class="btn" href="http://spartacodingclub.shop/free/202105/exhibition">모든 수강생들의 추억 보러가기 ></a>
    </div>
</body>
</html>

index.css

.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;
}

 

 

6. 박스 구조잡기

index.css

.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; 
    /* 내용물의 크기에 따라 height가 따라가므로 높이는 설정하지 않음 */

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

    /* 가운데 정렬하려면 양옆의 마진을 auto로 작성하기 */
    margin: 40px auto 0 auto; 
}
.map {
    width: 500px;
    height: 500px;
    background-color: red;
    margin-right: 30px;
}
.story {
    width: 450px;
    height: 500px;
    background-color: blue;
}

 

 

7. 스토리 넣기

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="index.css">
</head>
<body>
    <div class="mytitle">
        <h1>나의 추억거리를 공유합니다.</h1>
        <a class="btn" href="http://spartacodingclub.shop/free/202105/exhibition">모든 수강생들의 추억 보러가기 ></a>
    </div>
    <div class="box">
        <div class="map"></div>
        <div class="story">
            <div class="img"></div>
            <h2>강정보디아크광장</h2>
            <h3>대구 달성군 다사읍 강정본길 57</h3>
            <p>
                왕발통도 처음 타보고 시원한 바람도 맞으면서 정말 재밌었다.
                치킨도 맛있었고 행복했다.
            </p>
        </div>
    </div>
</body>
</html>

index.css

.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; 
    /* 내용물의 크기에 따라 height가 따라가므로 높이는 설정하지 않음 */

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

    /* 가운데 정렬하려면 양옆의 마진을 auto로 작성하기 */
    margin: 40px auto 0 auto; 
}
.map {
    width: 500px;
    height: 500px;
    margin-right: 30px;
}
.story {
    width: 450px;
    height: 500px;
}

.img{
    width: 450px;
    height: 300px;
    background-image: url('KakaoTalk_20210430_215153342.jpg');
    background-position: center;
    background-size: cover;
    border-radius: 24px;
}

.story > h2 {
    /* h1~h6 태그들은 자동으로 margin을 가지고 있다. */
    margin: 20px 0px 0px 0px;
    color: navy;
}

.story > h3 {
    margin: 5px 0px 0px 0px;
    font-size: 16px;
    color: gray;
    font-weight: normal;
}
.story > p {
    line-height: 24px;
}

 

 

8. 지도 넣기

카카오 지도 서비스

자바스크립트 코드를 작성하고, HTML 태그에 id="map"으로 작성만 하면 적용된다.

API키는 스파르타코딩에서 발급받은 키로 이용한다. (API키: 

https://dapi.kakao.com/v2/maps/sdk.js?appkey=535068688f1a8bca1c21a9445ede0a89)

키를 사용하는 이유는 사용량을 관리하기 위해서다. 그래야만 사용량에 부하가 오는 것을 방지할 수 있다. 공익을 위해 서비스를 제공한 카카오에 손해는 없어야 하니까.

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="index.css">
</head>
<body>
    <div class="mytitle">
        <h1>나의 추억거리를 공유합니다.</h1>
        <a class="btn" href="http://spartacodingclub.shop/free/202105/exhibition">모든 수강생들의 추억 보러가기 ></a>
    </div>
    <div class="box">
        <div class="map" id="map"></div>
        <div class="story">
            <div class="img"></div>
            <h2>강정보디아크광장</h2>
            <h3>대구 달성군 다사읍 강정본길 57</h3>
            <p>
                왕발통도 처음 타보고 시원한 바람도 맞으면서 정말 재밌었다.
                치킨도 맛있었고 행복했다.
            </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(35.838743518579676, 128.46833056910998);
        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>

index.css

.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; 
    /* 내용물의 크기에 따라 height가 따라가므로 높이는 설정하지 않음 */

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

    /* 가운데 정렬하려면 양옆의 마진을 auto로 작성하기 */
    margin: 40px auto 0 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('KakaoTalk_20210430_215153342.jpg');
    background-position: center;
    background-size: cover;
    border-radius: 24px;
}

.story > h2 {
    /* h1~h6 태그들은 자동으로 margin을 가지고 있다. */
    margin: 20px 0px 0px 0px;
    color: navy;
}

.story > h3 {
    margin: 5px 0px 0px 0px;
    font-size: 16px;
    color: gray;
    font-weight: normal;
}
.story > p {
    line-height: 24px;
}

 

 

9. 폰트 입히기

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap');

* {
    font-family: 'Noto Sans KR', sans-serif;
}

 

 

10. 모바일 화면 대응하기

index.css

@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;
        margin-bottom: 10px;
    }

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

 

 

11. 공유를 위한 기초작업

og태그 넣기

<head>
    <meta property="og:title" content="all.silver__님의 추억사진"/>
    <meta property="og:description" content="댜니의 웹 페이지!"/>
    <meta property="og:image" content="image.jpg"/>
</head>

 

 

12. 배포해보기

배포하기 URL

 

스파르타 | 0주차 사전과제

재밌게 코딩할 준비, 되셨나요? 같이 퀴즈를 풀어보아요

spartacodingclub.shop

 

 

all.silver__님의 추억사진

댜니의 웹 페이지!

family.spartacodingclub.kr

 

반응형

'Front-End: Web' 카테고리의 다른 글

[CSS] 긴글입니다긴글입니다긴글입니...  (0) 2021.11.19
Webpack이란? (+Bable)  (0) 2021.05.18
신년운세 패키지 - 2일차  (0) 2021.02.08
신년운세 패키지 - 1일차  (0) 2021.02.08
[웹 UI 개발 코칭스터디 1기] 2. 웹 접근성의 이해  (0) 2021.02.05

'Front-End: Web' Related Articles

티스토리툴바