FE - Web

수현·2022년 11월 21일

Book

목록 보기

2/12

📂 FrontEnd

1. HTML

웹 브라우저 화면의 전체 구조를 만듦
Hyper Text : 웹 브라우저 화면의 요소 클릭시 다른 페이지로 이동할 수 있는 링크
Markup : 태그를 이용해서 웹 문서의 구조 표시

✔ 태그 종류

(1) div : 구역을 나누어 주는 투명 상자
(2) h : 제목
(3) img : 이미지 표시 (src 속성 : 이미지 가져올 위치 작성)
(4) p : 문단을 의미

✔ 크롬 개발자 도구로 HTML 코드 확인

크롬 개발자 도구 실행 : Ctrl + Shift + F12(I)
페이지 안 element 확인 : Ctrl + Shift + C

📖참고📖 HTML 학습 사이트

코드 아카데미 (https://www.codecademy.com/catalog)
생활코딩 (https://opentutorials.org/course/2039)

2. CSS

HTML에서 작성한 텍스트의 색 추가 / 크기 조절
마크업 언어

✔ 선택자

(1) 태그 선택자 : 작성한 모든 태그에 적용
(2) 클래스 선택자 : 여러 요소에 적용
(3) 아이디 선택자 : 하나의 요소만 적용 (우선순위 가장 높음)
<h1 id="apple" class="red"> 사과 </h1>
h1 {color: red;}          # 태그 선택자 
.red {color: red;}        # 클래스 선택자
#apple {color: red;}      # 아이디 선택자 

✔ CSS의 인라인 / 블록 속성

- 인라인 속성 : 화면에 표현된 만큼의 영역을 차지    (ex. <span>)
- 블록 속성 : 화면의 좌우 끝까지 확장된 영역을 차지 (ex. <h1>, <div>)

✔ 패딩, 마진

- 패딩 : 테두리 기존 안쪽 여백
- 마진 : 테두리 기준 바깥쪽 여백
- 위쪽, 오른쪽, 아래쪽, 왼쪽 여백으로 작성

📌 구글 화면 클론 코딩

1) google 프로젝트 생성

2) index.html 생성

<!DOCTYPE html>
<html lang="ko"> 
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Soogle</title>
        
        <!-- html과 css 연결-->
        <link rel="stylesheet" href="style.css" />
    </head>

    <body>
        <h1>Soogle</h1>
        <form>
            <input type="text" />
            <button>Soogle 검색</button>
            <button>I'm feeling lucky</button>
        </form>
    </body>
</html>

3) style.css 생성

h1 {
    text-align: center;               # 가운데 정렬 
    border: 1px solid black;          # 테두리 boarder : [두께][모양][색상]; 
    padding: 10px 40px 50px 150px;    # 안쪽 여백 paddiing : [상, 우, 하, 좌];
    margin: 40px 40px 50px 150px;     # 바깥족 여백 margin : [상, 우, 하, 좌];
    font-size: 90px;                  # 폰트 크기 변경 
}

4) 폰트 색상 변경하기

index.html 수정 : 글자마다 색상 지정하기 위해
태그로 구분하여 입력
style.css 수정 : 글자마다 color 속성 값 지정

<body>                              h1 span:nth-child(1) { color: #4285f4; }
        <h1>                        h1 span:nth-child(2) { color: #ea4335; }
            <span>S</span>          h1 span:nth-child(3) { color: #fcc629; }
            <span>o</span>          h1 span:nth-child(4) { color: #4285f4; }
            <span>o</span>          h1 span:nth-child(5) { color: #34a853; }
            <span>g</span>          h1 span:nth-child(6) { color: #ea4335; }
            <span>l</span>
            <span>e</span>
        </h1>
</body>

5) 검색 칸, 버튼 배치 변경

style.css 수정 : input, button 수정

  form {
    text-align: center;
}

input{
    width: 100%;              # 상위 요소의 너비만큼 늘어남
    max-width: 584px;
    height: 44px;
    border-radius: 24px;      # 테두리 둥글게 만듦
    margin: 25px 0 25px 0;
    padding: 0 15px 0 15px;
}
input:focus {                 # 검색 칸이 포커스 받을 때 스타일 지정 (기본으로 검은색 두꺼운 테두리 나타지만, 안보이게 설정)
    outline: none;            # (기본으로 검은색 두꺼운 테두리 나타지만, 안보이게 설정)
}
  
  
button{
    background-color: #f8f9fa;
    min-width: 54px;
    height: 36px;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    cursor: pointer;          # 버튼 위에 마우스 커서를 올리면 화살표 대신 손가락 모양이 나타남 (크롬 기준)
    font-size: 14px;
    padding: 0 16px 0 16px;
}

button:focus{                 # 검색 칸에서 tab을 눌러 버튼에 포커스가 생기면 테두리 나타남 
    outline: 0.5px solid lightskyblue;
}

button:hover {                # 버튼에 마우스 커서 올리면 테두리 강조됨
    border: 1px solid #dfe1e5;
}

6) 검색 기능 추가

index.html 수정 : form 태그 기능 이용
- action=이동할 주소, method="GET" 속성 추가
- action : input에서 enter누르거나 버튼 클릭하면 이동할 주소를 입력함
- method : 해당 주소를 호출하는 방식
- input 태그의 name 속성값으로 'q' 입력

 <form action="https://www.google.com/search" method="GET">
       <input name = "q" type="text" />
       <br />                            # 공백 추가 
       <button>Soogle 검색</button>
       <button>I'm feeling lucky</button>
 </form>

📌 부트스트랩

CSS 직접 작성하지 않고, 미리 정의한 디자인을 쉽게 적용하여 웹 브라우저 화면 꾸며주는 도구
부트스트랩 ➡ DOCS(문서) ➡ Components(컴포넌트)
head / body에 해당 링크 추가

<!-- head -->  
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  
<!-- body -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

📖 참고 📖 CSS 사이트

코드펜 (https://codepen.io/)

3. JavaScript

웹 브라우저 화면을 움직이거나, 사용자 동작에 반응 / 서버와 데이터 주고받는 기능을 만둚
프로그래밍 언어

✔ HTML 파일에서 자바스크립트 사용

(1) HTML 외부에 자바스크립트 파일 만들기
- 웹 브라우저 개발자 도구 이용 (F12 ➡ Console)
  function 함수명 (데이터1, 데이터...) {
  	함수에서 실행할 코드
  }
(2) HTML 내부에 자바스크립트 코드 작성

✔ 제이쿼리 jQuery

자바스크립트 라이브러리

📌 제이쿼리로 레이스 클로킹 기능 구현

클로킹 : "레이스"라는 전투기가 화면에서 사라졌다가, 다시 클릭하면 다시 나타남 (스타프래프트 게임의 기능 종류)

1) index.html 파일 생성

<!DOCTYPE html>
<html lang="ko">
  <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>Starcraft</title>
  </head>

  <body>
      <!--레이스 대신 가위, 클로킹 대신 카트 사진으로 대체-->
      <img src="discount2.PNG" alt="클로킹 버튼" />
      <img src="cart2.PNG" alt="레이스" />
  </body>
</html>

2) 제이쿼리 CDN 연결

jQuery CDN
- jQuery 라이브러리 파일을 내려받아 복사해서 사용하는 방법이 있지만, 더 쉽게 CDN 이용해 웹에 공개된 파일과 연결해 사용
- 해당 코드를 body 태그 마지막 부분에 넣기

  <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>

3) 제이쿼리에서 자바스크립트 함수 사용

구글 "jQuery hide show (기능)" 검색
toggle 함수 : 화면에 표시된 요소를 숨기고, 다시 나타내는 기능
HTML 파일 body 내에 자바스크립트 코드 작성

  <script>
            $("#cloaking").click(function() {
                $("#wraith").toggle();
            })
        </script>

📂 BackEnd

프레임워크

개발을 쉽게 할 수 있는 구조/도구 제공 (데이터베이스, 쿼리, 세션, 쿠키 등 역할 수행)
프로그래밍 언어와 용도에 따라 선택
- 자바 - 스프링(Spring)
- 파이썬 - 장고(Django)
- 자바스크립트 - 익스프레스(Express)

✔ 라이브러리

특정 기능을 제공하는 코드를 쉽게 사용하도록 패키지화한 코드

✔ API (Application Programming Interface)

기능을 다른 프로그램/앱에서 편리하게 사용하도록 만든 인터페이스

프런트엔드와 백엔드 정보 요청시 사용하는 규칙 제공

API 가이드

요청 : API 서버에 정보 검색 요청
- 주소 (API서버 주소)
- 전송방식 (GET)
- 보낼 것 (query 검색어, sort 정렬 방식, target 검색 대상)

응답 : 찾은 정보를 웹 사이트로 회신
- 형식 (JSON) ➡ JavaScript Object Notation
- 응답 의미 설명 (title 도서 제목, contents 도서 소개, thumbnail 도서 표지 섬네일 URL)

✔ jQuery AJAX 사용 준비
jQuery CDN 연결 ➡ body에 작성
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
제이쿼리 AJAX로 API 호출 방법
➡ $.ajax(요청 정보).done(callback);
➡ 요청 정보 : method(요청 방법), url(요청 주소), data
➡ collback : 요청 및 응답이 완료된 뒤 실행할 함수

 <script>
 $.ajax({
     method: "POST"
     url: "https://www.google.com/api/search"
     data: {name: "John", location: "Boston" }
}) 
.done(function(msg) {
  	alert(msg);
});
  </script>

📌 카카오 책 검색 API 활용한 책 검색 서비스

1) 카카오 오픈 API 키 발급받기

카카오 개발자 사이트에서 API 인증 키 발급 (REST API 키 사용)

2) 카카오 API 가이드 확인
- 전송 방식 : GET
- 호출 주소 : https://dapi.kakao.com/v3/search/book
- 요청 데이터 : ?target=title & query=미움받을 용기

3) AJAX 코드와 비교하여 책 검색 API 작성

  <script>
    $.ajax({
            method: "GET",
            url: "https://dapi.kakao.com/v3/search/book?target=title&query=클론코딩",
            headers: {Authorization: "KakaoAK 5f52bcaa1002258279070b9e8c07e46b"}
        })

        .done(function(data) {
            console.log(data);
        });
 </script>

4) 개발자 도구(F12) ➡ console 탭에서 응답 받은 데이터 확인

5) console이 아닌 웹 페이지에 표시

        .done(function(data) {
            $("body").append("<span>" + data.documents[0].title + "</span>");
            $("body").append("<img src=" + data.documents[0].thumbnail + "/>");
        });

6) 검색 기능 추가

  <h1>API 연습</h1>
        <input id="search" type="text" />
        <button id="submit">검색</button>
        <!-- jQuery CDN 연결 -->
        <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
        <script>
         $("#submit").click(function() {
            $.ajax({
                method: "GET",
                url: "https://dapi.kakao.com/v3/search/book?target=title&query=" + $("#search").val(),
                headers: {Authorization: "KakaoAK 5f52bcaa1002258279070b9e8c07e46b"}
            })
        
            .done(function(data) {
                $("body").append("<span>" + data.documents[0].title + "</span>");
                $("body").append("<img src=" + data.documents[0].thumbnail + "/>");
            });
         })
        </script>

📂 웹 사이트

📌 웹 브라우저 점유율 확인

statcounter (데스크톱 웹 브라우저 사용 현황)

웹 브라우저 : 크롬(Chrome)
코드 에디터 : 아톰(Atom) or 비주얼 스튜디오 코드(Visua Studio Code)

📌 웹 작동 원리

1) 웹 브라우저(프런트엔드) 주소 창에 URL 입력
2) 브라우저는 자동으로 DNS 통해 입력받은 웹 페이지 주소에 해당하는 네이버 서버 컴퓨터(백엔드)를 찾아서 접속 요청
3) 서버는 요청한 브라우저에 HTML 문서 전달
4) 브라우저는 문서를 받아 해석한 후 페이지 보여줌

📌 웹 사이트 공개 방법

내 컴퓨터를 서버로 만들고, 인터넷어 내 IP 주소 알림 (보안 취약, 유지비 많이 듦)
외부 서버에 웹 사이트(HTML 파일) 올림 (유지비 적고, 서버 관리해주므로 편리)
➡ 웹 호스팅(클라우드 서비스 제공 업체)
➡ ex. AWS(아마존 웹 서비스), Azure(마이크로소프트 애저), GCP(구글 클라우드 플랫폼), 카페24, netlify

✔ 웹 사이트 인터넷에 공개하기

1) 웹 사이트 템플릿 Free CSS

2) index.html 열어 웹 사이트 템플릿 수정

3) netlify에 웹 사이트 업로드 netlify

📌 웹 사이트 접속 과정

도메인 : 서버의 번호(IP 주소)를 text인 도메인과 연결하여 사용
DNS 역할
- 1) 사용자가 IP 주소 요청 (www.naver.com)
- 2) DNS가 IP 주소 전달 (125.209.222.141)
- 3) 해당 IP 주소로 서버 접속
도메인 주소를 사용하려는 DNS에 서버 IP 주소 등록해야 함

✔ 도메인을 웹사이트와 연결하기

1) 카페24에서 도메인 구입

2) 도메인 입력 (구매한 도메인 - www.24tngus.shop)

3) Netflify DNS에 등록

4) 카페24에서 도메인 연결 (4개의 네임서버 변경하기)

5) 완료

📌 검색 엔진에 웹 사이트 등록

검색 사이트에서 내 웹 사이트가 검색될 수 있도록 노출

✔ 네이버 검색시 웹 사이트 나타나게 하기

네이버 웹 마스터 도구에 사이트 등록

++ 카페24에서 도메인 등록 요청 대기중

📖출처📖

(Do it) 조코딩의 프로그래밍 입문

수현

Notion으로 이동 (https://24tngus.notion.site/3a6883f0f47041fe8045ef330a147da3?v=973a0b5ec78a4462bac8010e3b4cd5c0&pvs=4)

FE - Web

Book

📂 FrontEnd

1. HTML

✔ 태그 종류

✔ 크롬 개발자 도구로 HTML 코드 확인

📖참고📖 HTML 학습 사이트

2. CSS

✔ 선택자

✔ CSS의 인라인 / 블록 속성

✔ 패딩, 마진

📌 구글 화면 클론 코딩

📌 부트스트랩

📖 참고 📖 CSS 사이트

3. JavaScript

✔ HTML 파일에서 자바스크립트 사용

✔ 제이쿼리 jQuery

📌 제이쿼리로 레이스 클로킹 기능 구현

📂 BackEnd

프레임워크

✔ 라이브러리

✔ API (Application Programming Interface)

✔ jQuery AJAX 사용 준비

📌 카카오 책 검색 API 활용한 책 검색 서비스

📂 웹 사이트

📌 웹 브라우저 점유율 확인

📌 웹 작동 원리

📌 웹 사이트 공개 방법

✔ 웹 사이트 인터넷에 공개하기

📌 웹 사이트 접속 과정

✔ 도메인을 웹사이트와 연결하기

📌 검색 엔진에 웹 사이트 등록

✔ 네이버 검색시 웹 사이트 나타나게 하기

📖출처📖

Python - 개념

AI - 인공지능

0개의 댓글