TIL

1주차 Day1. 웹개발 기초

ekdud 2024. 6. 24. 21:01
  • 웹브라우저 원리

브라우저(클라이언트)가 주소를 통해 서버가 만들어 놓은 API라는 창구에 요청을 보내고, 받은 HTML 파일을 그린다.

*항상 HTML파일을 보내주는 것은 아니다. 데이터만 받아서 갈아끼우는 방식으로 작동하게 한다.

=> 실제 많은 웹서비스에서 API로 요청을 보내면 서버의 DB에서 데이터를 주고, 브라우저에서 Javascript라는 언어를 활용해 새로운 데이터로 바꾼다.

이 경우, 웹페이지의 형태가 아닌 코드의 형태(JSON형식)로 보여준다.

 

  • HTML, CSS

간단히 말하자면 HTML은 뼈대, CSS은 꾸미기. (아래에서 나올 JavaScript는 동작.)

codefinity.com

 

  • HTML 기초

1) VS Code에서 ~.html 파일 만들기

2) ! 를 입력하면 자동으로 뼈대 완성.

3) 코드 화면에서 오른쪽마우스 클릭 -> Open in Default Browser 또는 브라우저에서 열기 클릭.

=> 브라우저에서 코드를 사이트 형태로 확인 가능

 

- <head> 속성정보 </head>

- <body> 페이지 내 </body>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

 

  • CSS 기초

   <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성

 

  • Flex : 레이아웃 배치. 
  • justify-content : 주축방향으로 배치. 
  • align-item : 교차축으로 정렬.
.container {
    background-color: yellow;
    margin: 10px;
    padding: 7px;
    height: 50vh;
    display: flex;
  }

 

  • HTML 부모-자식 구조 (안쪽에 있는 <div> 가 자식. 부모의 속성이 상속. 하지만 모든 속성이 그렇지는 X.)
  • 구글 폰트 입히기 https://fonts.google.com/
  • 파일 분리 
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

 

 

- 부트스트랩 시작 템플릿

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
    <h1>이걸로 시작해보죠!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

 

- 부트스트랩 버튼 컴포넌트

https://getbootstrap.com/docs/5.3/components/buttons/

- 부트스트랩

https://getbootstrap.com/

자주 사용하는 부트스트랩: Components(Cards, Navbar), Utilities(Flex, Spacing, Text, Position), Forms(Input group)

 

JavaScript

 html이 뼈대, css는 꾸미기라면 JavaScript는 움직이기! JavaScript는 브라우저가 알아듣는 언어.
웹페이지에 포함되어 있는 구성요소들의 동작을 변경할 수 있는 도구를 제공한다.

 

• 브라우저 → 개발자 도구 콘솔창에서 실행     *새로고침 시 사라짐

=> 빠르게 자바스크립트를 테스트해보기 위함. console.log() 사용.

 

 

개발자 도구 켜는 법

 

- 마우스 오른쪽 클릭 → 검사 → console

- 단축키 Windows: F12

 

 

JavaScript 문법

 

!를 입력하여 기본 구조 생성 → </body> 태그 위에 <script> 태그 작성 

 

 let 변수 = 값  형식으로 변수 선언

console.log(변수); 로 사용.

 

• 리스트 [] - 정수, 실수, 문자형 상관없이 한 리스트에 넣을 수 있다.

 

• 딕셔너리 {} - key와 value 값의 묶음. 

ex. let a_dict = {'name': 'Bob', 'age: 21}

      console.log(a_dict['name']) 

      >>> Bob

 

# 리스트와 딕셔너리를 조합하여 사용하면 순서를 표시할 수 있고 정보를 묶을 수 있다.

names = [{'name':'bob','age':20},{'name':'carry','age':38}]

console.log(names[0]['name']) // 'bob'을 출력
console.log(names[1]['name']) // 'carry'을 출력 


new_name = {'name':'john','age':7}
names.push(new_name)

// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
console.log(names[2]['name']) // 'john'을 출력

 

• 함수

// 만들기
function 함수이름(필요한 변수들) {
	내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);

 

 

• 반복문

for (let i = 0; i < 10; i++) {
  console.log("hello");
}
// Hello를 10번 출력

for (let i = 0; i < 10; i++) {
  console.log(i);
}

// 0부터 9까지 반복해서 출력하는 코드


let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
	console.log(a)
})
//리스트에 담겨있는 값의 개수만큼 찍힘.

 

 

• 조건문

if (조건) {
	// 조건에 맞는다면(true)~ 
} else { 
	// 아니라면(false)~
}

 

jQuery : 미리 작성된 JavaScript 코드. 라이브러리. id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리킴.

JavaScript → document.getElementById("element").style.display = "none";    =     jQuery → $('#element').hide();

 

 

•  jQuery CDN 을 참고하여 import하기

https://www.w3schools.com/jquery/jquery_get_started.asp

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>

 

  1. 원하는 html 태그를 백틱(````)으로 묶는다.
  2. 태그 안에 들어갈 값은 ${}로 표시하고, 그 안에는 자료가 있는 변수를 넣는다.
  3. 통째로 넣을 html 요소를 $('#아이디')로 고르고 appnd(변수)를 넣는다.
function checkResult() {
	let fruits = ['사과','배','감','귤','수박']
	$('#q1').empty()
	fruits.forEach((fruit)=>{
		let temp_html = `<p>${fruit}</p>`
		$('#q1').append(temp_html)
	})
}
  • 백틱(````) : HTML 요소를 통째로 넣을 때 묶어주는 기호. 문자와 변수를 함께 써줄 수 있게 함.

API

: 클라이언트가 요청하는 '타입'에 맞게 제공.

* GET : 통상적으로 데이터 조회(Read)를 요청할 때.

   ? - 여기서부터 전달할 데이터가 작성된다는 의미. & - 전달할 데이터가 더 있다는 뜻입니다.

   예) 영화 목록 조회

* POST : 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때

   예) 회원가입, 회원 탈퇴, 비밀번호 수정

 

GET 요청은, url 뒤에 다음과 같이 붙여서 데이터를 가져감. http://www.example.com/show?name1=value1&name2=value2    

? : 여기서부터 전달할 데이터가 작성된다. & : 전달할 데이터가 더 있다.

POST 요청은, data : {}에 넣어서 데이터를 가져감.  ex. data: { param: 'value', param2: 'value2' }

 

success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.

'TIL' 카테고리의 다른 글

2주차 Day 1. up&down 게임과 가위바위보 게임을 만들어보자  (0) 2024.07.01
1주차 Day5. PyCharm사용 및 python 문법 정리  (0) 2024.06.28
1주차 Day4. DB, SQLite  (0) 2024.06.27
1주차 Day3. Flask를 활용한 웹개발 + Git&Github 사용법  (0) 2024.06.26
1주차 Day2. Fetch, Python, Flask, template  (0) 2024.06.25

'TIL'의 다른글

  • 현재글1주차 Day1. 웹개발 기초

관련글

티스토리툴바