[스파르타] #웹개발 종합반 #1주차 개발일지👊🏻

Recorder_H·2021년 12월 22일
0

#웹개발일지

목록 보기
1/4
post-thumbnail

🌼 Notion 강의자료

🚩수업 목표

  1. 서버와 클라이언트의 역할에 대해 이해한다.
  2. HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
  3. Javascript 기초 문법을 익힌다.

📝웹의 동작 개념

브라우저가 서버에 ① 요청을 보내고 서버로부터 ② 결과물을 받아서 그려주는 것.

요청을 보내는 곳은?

서버가 만들어 놓은 "API" 라는 창구에 미리 정해진 약속대로 요청을 보내는 것.
예)https://naver.com/
→ 이것은 "naver.com"이라는 이름의 서버에 있는, "/" 창구에 요청을 보낸 것!

  • HTML(파일)을 받는 경우

  • JSON (데이터)을 받는 경우
    예) 티켓팅 때 새로고침하면 예매된 좌석과 예매되지 않은 좌석 색 변경

📝HTML 기초

HTML은 뼈대, 구역과 텍스트를 나타내는 코드, CSS는 꾸미기, 잡은 구역을 꾸며주는 것

HTML은 크게 head와 body로 구성.
head안에는 페이지의 속성 정보를, body 안에는 페이지의 내용을 담습니다.

head 안에 들어가는 대표적은 요소들 : meta script link title 등 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>

✋ 잠깐! 정렬의 중요성
코드의 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워집니다. Pycharm에서 ctrl+alt+L 로 자동정렬 기능을 사용해보세요.

📝CSS 기초

HTML 부모-자식 구조 살펴보기
html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받음.

head ~ /head 안에 style ~ /style 로 공간을 만들어 작성.
mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억

만들어진 화면을 가운데로 가져오려면?

width를 주고, margin: auto를 사용, 그래도 안되면? display:block (글 속성→ BOX 속성 변경)을 추가!

📝폰트, 주석, 파일분리

구글 웹폰트 입히기

구글웹폰트 https://fonts.google.com/?subset=korean

<!-- HTML <heda> ~ <head> 사이에 이 부분을 추가하고 -->
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
/* CSS <style> ~ </style> 사이에 이 부분을 추가하면 완성! */
* {
	font-family: 'Jua', sans-serif;
}

주석은 언제 사용하나요?

1) 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
2) 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용합니다.

주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않아요.
즉, 개발자 본인 또는 동료를 위해 붙여두는 것! → 단축키 ctrl + / (슬래시)

CSS 파일 분리도 가능

style ~ /style 부분이 너무 길어지면 아래와 같이 파일을 분리해둘 수 있다.

<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

📝부트스트랩

부트스트랩 컴포넌트(4.0) https://fonts.google.com/?subset=korean

남이 미리 작성한 CSS를 내 HTML 파일에 적용한다는 점에서, bootstrap 적용은 CSS 파일 분리와 원리가 동일.
다만, CSS의 파일이 인터넷 어딘가에 있다는 점이 다를 뿐.

📝Javascript 기초

프로그래밍 언어 중 하나로, 브라우저가 유일하게 알아들을 수 있는 언어.
모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있다.

head ~ /head 안에 script ~ /script 로 공간을 만들어 작성.
script ~ /script 내에 자바스크립트를 작성.

  • HTML 연결. 버튼을 클릭하면 경고창 뜨게하기
    </style>

    <script>
        function hey(){
            alert('안녕!')
        }
    </script>
 </head>
  • 버튼에 함수 연결하기(버튼을 누르면 함수가 불림)
<button onclick="hey()" type="button" class="btn btn-primary">기사저장</button>

크롬 개발자 도구 콘솔 창(F12)

띄워놓은 페이지에서 빠르게 자바스크립트를 테스트 할 수 있는 개발자들을 위한 도구

console.log(변수)

개발자가 결과값을 보기 편하도록 콘솔 창에 괄호 안의 값을 출력해줌.

console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력해줍니다.
개발자가 결과값을 보기 편하도록!

console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요.
아래를 복사해서 붙여넣어보세요.

console.log("Hello World!");

👉 변수

let으로 변수를 선언. 변수는 값을 저장하는 박스, 한번 선언했으면 다시 선언하지 않고 값을 넣는다. 

/* 사칙연산, 문자열 더하기가 기본적으로 가능 */

let a = 1 // a라는 박스를 꺼내서 그 안에 1을 담았다!
let b = 2 // 오른쪽에 있는 것을 왼쪽에 넣는 것(2를 b라는 변수에 넣는다)

a+b
3
a/b
0.5

let first_name = 'Bob' // '문자열' 작은따옴표
let last_name = "Lee"

first_name+last_name
'BebLee'
first_name+' '+last_name
'Bob Lee'
first+a // 문자+숫자를 더하면, 숫자를 문자로 바꾼 뒤 수행
'Bob1'

let first_name = 'Bob' // snake case
let firstName = 'Bob' // camel case

/* 변수명은 쉽게 알아볼 수 있게 쓰는게 중요(특수문자 또는 띄워쓰기 불가능) */

👉 자료형(list & dict)

순서를 표시하고, 정보를 묶을 수 있다(상호 호환 가능)

  • 리스트: 순서를 지켜서 가지고 있는 형태 
let a_list = ['수박','참외','배'] // 리스트를 선언. 대괄호 사용

// 또는,

let b_list = [1,2,'hey',3] // 로 선언 가능

a_list[0] // 0부터 시작
'수박'
b_list[2]
'hey'

a_list.push('감') // 리스트에 요소 넣기, 소괄호 사용
b_list
['수박','참외','배','감']


b_list.length // 리스트의 길이 구하기
4
  • 딕셔너리: 키(key)-밸류(value) 값의 묶음 
let a_dict = {'name':'Bob','age':27} // 딕셔너리 선언. 중괄호 사용

a_dict['name']
'Bob'
a_dict['age']
21

a_dict['height'] = 180 // 딕셔너리에 키:밸류 추가
a_dict
{name: "Bob", age: 21, height: 180}

a_dict['fruits'] = a_list
(4)['수박','참외','배','감']
a_dict
{name: "Bob", age: 21, height: 180, fruits:Array(4) }

a_dict['fruits'][2] //리스트와 딕셔너리의 조합
'배'
  • 리스트와 딕셔너리 조합
names = [{'name':'bob','age':20},{'name':'carry','age':38}]

// names[0]['name']의 값은? 'bob'
// 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}]
// names[2]['name']의 값은? 'john'

👉 함수

부르면 정해진 동작을 한다

function sum(num1, num2) { // function 함수이름(필요한 변수들)
	return num1+num2 // 내릴 명령들을 순차적으로 작성
}

let result = sum(2,3)
result // 끝내고 나를 변신시켜줘!
5
  • 기본함수
let a = 20
let b = 7

a % b // a를 b로 나눈 나머지 값
6
a < 50 // a는 50보다 작다
true
a == 20 // a는 20과 같다
true
a != 20 // a는 20과 같지 않다
false

let myname = 'spartacodingclub'
  • 모든 알파벳을 대문자로 바꾸고 싶은 경우
myname.toUpperCase()
'SPARTACODIGCLUB'
  • 특정 문자로 문자열을 나누고 싶은 경우
let myemail = 'sparta@gmail.com'

mmyemail.split('@')
(2) ['sparta','gmail.com']

myemail.split('@')[1]
'gmail.com'

myemail.split('@')[1].split('.')
(2)['gmail','com']

myemail.split('@')[1].split('.')[0] // 어떤 도메인의 이메일인지 판별
'gmail'

👉 조건문

20 보다 작으면 작다고, 크면 크다고 알려주는 함수

if(age > 20){
  console.log('성인입니다')
} else {
  console.log('청소년입니다')
}
// '성입입니다'

let sex = '남성'

if(age > 20 && sex == '남성'){ // && AND
  console.log('성인 남성입니다')
} else {
  console.log('청소년입니다')	
}

if(age > 20 || sex == '남성'){ // || OR
  console.log('성인 남성입니다')
} else {
  console.log('청소년입니다')	
}

if (age > 20) {
  console.log('성인입니다')
} else if (age > 10) {
  console.log('청소년입니다')
} else {
  console.log('아동입니다') // if, else if, else if, else if else

👉 반복문

console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
...
console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!
/* 반복문을 이용하면 단 세줄로, 출력*/

for (let i = 0; i < 100; i++) { //오타 조심!
	console.log(i);
}
for (1. 시작조건; 2. 반복조건; 3. 더하기) {
	4. 매번실행
}

1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3

// 와 같은 순서로 실행됩니다.
// i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
let people = ['철수','영희','민수','형준','기남','동희']

// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
for (let i = 0 ; i < people.length ; i++) {
	console.log(people[i])
}

👩‍💻 1주차 마무리하며.

🤍 코딩은 외워서 하는 것이 아니다, 가져다 쓰는 것!
🤍 [ ] / { } / " " / . → 맥락과 사용법을 익혀라!
🤍 헷갈리지 않게 "정렬(ctrl+alt+L)" 잘하기!
🤍 태그 짝 잘 맞는지 확인하기!
🤍 완벽하게 하려고 하지 않기
🤍 익숙할 정도로 반복/연습하기
🤍 구글링을 습관화
🤍 에러를 무서워하지 말고, 최대한 읽어보고 익숙해지려고 노력하기!

💜 게더(스파랜드)에서 스온스 진행 중
💜 11일 챌린지 도전 중
💜 개발일지 작성 중 (+복습)
💜 틈틈히 개별 프로젝트 아이디어

profile
Recorder_H
꼼꼼한 원칙주의자, Rami

0개의 댓글