클론코딩

[인프런] 맛집지도 만들기 (1)

cmkoi1 2023. 1. 22. 15:32

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

 

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지 - 인프런 | 강

내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다., - 강의 소개 | 인프런...

www.inflearn.com

※ 해당 링크 강의 내용을 바탕으로 작성된 포스팅입니다.

 

 

 

강의소개

사용 기술

  • 웹 프론트엔드: HTML, CSS, Vanila JS, ES6
  • 서버: Node.js + Express: Rest API
  • 데이터베이스: MySQL: ERD 설계, SQL
  • 클라우드: AWS EC@
  • 지도 API: 카카오맵
  • Git, Github

Chrome 웹 브라우저, Window OS 기준으로 진행.

 

 

 

강의 자료

 

맛집지도 프로젝트 강의자료

강의 소개

sprinkle-guide-797.notion.site

 

 

 

핵심을 콕콕! HTML, CSS

VSCode 설치, HTML, CSS, JS 맛보기

개발환경 구축

VSCode, Atom, Webstorm과 같은 에디터 설치.

→ VSCode 사용하여 프로젝트 진행.

 

1.  VSCode 다운로드 후, 플러그인(extensions) 설치. 필수 아니므로 필요한 것만.

  • Material icon theme: 아이콘을 예쁘게..
  • Prettier: 코드 포맷팅 (줄맞춤, 들여쓰기 등..)
  • Auto rename tag: 자동 태그명 수정
  • Auto Close Tag: 닫는태그 자동화
  • HTML CSS Support: 클래스, ID 속성 완성
  • Live Server: 실시간 테스트

2. 프로젝트를 진행할 폴더 생성 및 오픈(Ctrl+O). 나는 map이라는 파일 만들었음.

3. 해당 파일에서 index.html 파일 생성.

 

 

HTML

html은 여러 의미를 가진 Tag들의 연속으로 볼 수 있다.

 

emment은 VSCode 자체 내장 익스텐션으로, ! 작성한 후, Enter 눌러 기본 템플릿을 생성할 수 있다.

 

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>Document</title>
    </head>
    <body>
    </body>
</html>

 

화면에 띄울 내용은 <body></body> 태그 안에 작성.

<h1></<h1> 태그는 제목과 같은 내용을 강조할 때 사용.

 

index.html

        <h1>안녕하세요</h1>

 

우클릭 → Open with Live Server (Alt+L+O) 플러그인으로 수정 내용 확인 가능.

 

 

 

CSS

html에 작성한 요소들을 꾸며주는 기술.

 

<head></head> 태그 안에 <style></style> 태그 작성.

 

index.html

        <style>
            h1 {
                color: red;
            }
        </style>

 

 

JS

기존에 정의되어 있는 HTML, CSS에 동적인 효과를 준다.

 

<body></body> 태그 안에 <script></script> 태그 작성.

 

index.html

        <script>
            const tag = document.querySelector("h1") //h1 지정
            tag.addEventListener("click", () => { //h1를 클릭하면
                tag.style.color = "blue"; //색을 파랑으로 바꿔줌
            })
        </script>

 

전체 코드
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>Document</title>

        <style>
            h1 {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>안녕하세요</h1>

        <script>
            const tag = document.querySelector("h1") //h1 지정
            tag.addEventListener("click", () => { //h1를 클릭하면
                tag.style.color = "blue"; //색을 파랑으로 바꿔줌
            })
        </script>
    </body>
</html>

 

 

 

HTML 코드 구조 파악하기

doctype

 

<!DOCTYPE html>

문서가 HTML이라는 것을 인식시켜 준다.

 

 

html

 

<html lang="en"></html>

html 문서의 범위를 알려 준다. lang 속성은 문서의 작성 언어를 알려 준다.

  • 크롬의 번역기와 같은 기능이 lang 속성을 기반으로 언어를 파악하고 번역 제안을 한다.

 

head

 

<head></head>

문서에 대한 설명.  head 태그 안에서 데이터에 대한 데이터(메타데이터)를 메타 태그 안에 작성.

 

 

meta

 

<meta 속성="값" />
  • charset 속성:  문서의 인코딩 방식 설정. utf-8이 가장 많이 사용.
  • http-equiv 속성: 인터넷 익스플로러 웹 브라우저를 위해 핸더링 방식을 설정.
  • name 속성: 메타 정보 이름.
    • viewport: 보여지는 화면 영역 설정. 반응형 웹과 관련.
    • author: 문서 작성자. 개발자 혹은 단체.
    • description: 서비스에 대한 설명. 검색엔진에서 설명을 보여줄 때 이용.
    • keywords: 검색엔진에서 사용자가 해당 키워드 검색을 했을 때 보여지도록 한다.

index.html

        <meta name="author" content="동네코딩" />
        <meta name="description" content="맛집지도 서비스" />
        <meta
            name="keywords"
            content="동네코딩, 맛집지도, 유튜버맛집, 맛집유튜버"
        />

 

 

title

 

<title>Document</title>

 

문서에 제목을 설정. 

 

 

body

 

<body></body>

실제로 웹사이트 화면에 나타나는 부분.

 

 

 

정말 자주 쓰는 8가지 HTML 태그 정리 + 퀴즈

 

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진 (en-US), 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이

developer.mozilla.org

 

HTML Reference

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

div, span, 리스트(ul, ol) 태그는 자체로는 효과가 없고, 태그 안에 태그를 넣는 컨테이너 박스 역할을 한다.

 

div

 

<div></div>

 

하나의 박스. 레이아웃을 구성.

새로운 태그가 시작되면 자동적으로 줄바꿈을 한다(css display 속성 관련).

 

 

span

 

<span></span>

 

 

CSS, JS를 적용시킬 때 박스로 묶는 역할. <div></div> 태그 안에 사용할 수도 있다.

 

 

 

ul, ol, li

 

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

 

  • ul: unorderd list, 순서가 없는 리스트. 리스트를 점으로 표시.
  • ol: ordered list, 순서가 있는 리스트. 리스트를 숫자로 표시.

 

 

h1~h6

 

<h6>안녕</h6>

 

h 뒤에 붙는 수가 작을수록 글씨 사이즈가 큼.

 

 

img

 

<img src="" alt="" />
  • src: 이미지 경로
  • alt: 경로에 문제가 있을 때 이미지 대체 텍스트

 

input

 

<input type="text" />

 

input 태그를 통해 데이터를 입력받는다. 여러 type이 있음. ex) text, button, checkbox, password, radio, number 등.

 

 

button

 

<button></button>

 

버튼 생성.

 

 

a

 

<a href=""></a>

anchor 태그. 하이퍼 링크 생성.

 

 

주석

 

html

<!--주석-->

css

/*주석*/

코드가 아니라 메모와 같이 인식. Ctrl+/로 풀 수 있다.

 

 

전체 코드
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">
        <meta name="author" content="동네코딩" />
        <meta name="description" content="맛집지도 서비스" />
        <meta
            name="keywords"
            content="동네코딩, 맛집지도, 유튜버맛집, 맛집유튜버"
        />
        <title>맛집 지도</title>
    </head>
    <body>
        <h1>안녕하세요</h1>

        <!-- div -->
        <div>안녕하세요. div</div>
        <div>안녕하세요. div</div>

        <!-- span -->
        <span>span입니다.</span>
        <span>span입니다.</span>


        <!-- ul, ol -->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>

        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ol>

        <!-- h1~h6 -->
        <h6>안녕</h6>

        <!-- img -->
        <img src="./328721-eng.png" alt="사진" />

        <!-- input -->
        <input type="text" />

        <!-- button -->
        <button>클릭하세요</button>

        <!-- a -->
        <a href="http://www.naver.com">네이버</a>
    </body>
</html>

 

728x90