첫 시작은 네이버 웹페이지에서 개발자 도구에 진입하여 웹페이지가 어떠한 원리로 보여지는 것인지 알아 보기 시작했다.
가장 먼저 네이버 웹사이트에 진입해서
해당 창이 뜨면 그 창 에서 f12 키를 눌러 사이트의 개발자 도구로의 진입을 한다.
위와 같은 창이 바로 개발자 도구의 화면이다. 저곳에서 마우스를 위에 올리면...
해당 부분이 네이버 웹페이지상 어느부분에 해당하는 코드인지가 화면에 나온다.
그리고 위와 같이 내 마음대로 변경해서 바로바로 적용해 볼 수 있다.
하지만 여기서의 변경은 내 컴퓨터에서만 보이는 것이기 때문에 새로고침을 하게되면...
위와 같이 원래의 웹페이지 모습으로 돌아간다.
웹의 동작 개념
HTML을 받는 경우 유저가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 받아서 그려주는 것이다.
즉, 여기서 브라우저의 역할은 1) 요청을 보낸다 2) 받은 HTML 파일을 그려준다. 정도로 정리된다.
그렇다면 여기서 어디로 요청을 보내는 것일까? 서버가 만들어 놓은 API 라는 창구에 "미리 정해진 약속대로" 요청을 보낸다.
ex) https://naver.com/ 이것은 "naver.com" 이라는 이름의 서버에 있는, "/" 창구에 요청을 보낸 것이다.
아래의 이미지를 참고하자
즉, 우리가 받아오는 총 3개의 파일이 있는데 이것에 대해 간단히 정리하자면...
HTML : 뼈대 (네이버창 검색 박스, 그 옆에는 검색 버튼, 사전 탭 옆에는 뉴스 탭이 있다. 등...) CSS : 꾸미는 것 (사전, 뉴스 등 글씨는 굵은 글씨이고 폰트 사이즈는 20 이야 등...) JS : 움직임 (이 버튼을 클릭하면 어떤 페이지로 간다거나 광고창은 몇초마다 바뀐다거나 등...)
데이터 만을 내려받는 경우
사실 항상 HTML만 내려받는 경우보다 데이터만 내려 줄 때가 더 많다.
예로, 공연 티켓을 예매하고 있는 상황을 가정한다 치자 좌석이 차고 꺼질때마다 보던 페이지가 리프레시 되면 난감한 상황이 연출된다...
이러한 경우에 데이터만 받아서 받아 끼우게 된다.
데이터만 내려올 경우에는 위와 같은 이미지를 참고하며 생각하면 된다. 이러한 생김새를 JSON 형식 이라고 한다.
Pycharm 설치
사실 이번 수업에서는 이후에 계속 쓰이게 될 Pycharm 설치 및 AWS 가입을 진행 했습니다. 이부분에 대해서는 크게 글을 쓸게 없는 듯하여 요 정도로만...
JetBrains 에서 지원하는 대표적인 개발 프로그램 중에 하나인 Pycharm 을 사용한다. 이 외에 이전에 계속 사용했다는 InteliJ IDEA 라는 개발 프로그램도 있지만 더 최근에 출시된 Pycharm 과 비교해서 최신기능 지원에 차이가 있기 때문에 여기선느 Pycharm 을 사용하는 듯 하다.
AWS(Amazon Web Services) 에 가입하는데 AWS 는 아마존닷컴에서 개발한 클라우드 컴퓨팅 플랫폼 이라고 한다. 비즈니스와 개발자가 웹 서비스를 사용하여 확장 가능하고 정교한 애플리케이션을 구축하도록 지원한다.
AWS는 개인에게 클라우드 환경의 가상서버를 제공합니다. 기본 사양의 서버(EC2)를 1년 동안 무료로 사용할 수 있습니다.
HTML 은 구역과 텍스트를 나타내는 코드로, CSS 는 잡은 구역을 꾸며준다. HTML 내 STYLE 속성으로 꾸미기가 가능 하지만, 이것을 보다 효율적으로 다루기 위해 이것 만을 모아서 볼수 있게 해주는 CSS 파일이 만들어지게 되었다. 방식으로는 HTML 코드 내에서 CSS 파일을 불러와서 적용한다.
HTML 의 기초
HTML 은 Hyper Text Markup Language 의 약자로, 웹 페이지를 만들기 위해 사용되는 마크업 언어이다. HTML 은 크게 head 와 body 로 구성된다. head 안에는 페이지의 속성 정보를 body 안에는 페이지의 내용을 담는다. head 안에 들어가는 대표적인 요소들에는 meta, script, link, title 등이 있다.
이런 기본적인 개념들은 간단하게나마 숙지하고 개발에 있어서 필요한 것들은 그때그때 검색해서 사용하는 것이 일반적이기에 굳이 외우려 하지 말기(어차피 계속 하다 보면 자연스럽게 머리에 들어온다.)
HTML 의 요소(Element) 에는 시작 태그(opening tag) 와 종료 태그(closing tag) 그리고 사이에 위치한 컨텐츠(content) 로 구성된다.
어디서부터 어디까지 이 태그에 들어가는지를 구분하기 위해서 보통은 쌍으로 존재한다. 소문자를 주로 사용하며, 요소는 중첩이 가능하며 중첩시 부자관계가 형성된다.
content 를 가질 수 없는 요소를 빈 요소(Empty element or Self-Closing element) 라고 한다. 빈 요소는 content 가 없기 때문에 태그 자체만으로는 아무 일도 일어나지 않는다. 이 경우에는 추가적으로 속성(Attribute) 을 입력하게 된다. 속성(Attribute) 이란 요소의 성질, 특징을 정의하는 것으로 요소에 추가적 정보(이미지 파일의 경로나 크기 등) 을 제공한다. 시작 태그에 위치해야 하고 이름과 값이 쌍을 이룬다. 속성들 끼리의 자리는 바뀌어도 상관이 없다.
대표적인 빈 요소 : br, hr, img, input
대표적인 Atrtribute : id, class, lang, style, title
태그의 부자관계에 대한 추가 설명 이미지
로그인 페이지 결과물 추가 정보
1) <h1>로그인 페이지</h1>
title 안의 글귀가 페이지의 이름이 된다. 아래 이미지의 왼쪽 상단에 페이지탭에 로그인페이지 라고 뜬다.
2) <p>ID: <input type="text"/></p>
h1 태그 같은 경우에는 제목을 표현하는 태그로 문서에서 가장 중요한 주제문은 반드시 이 안에 적어야 한다. 위와 같은 상황에는 h1 태그 안에 로그인 페이지 가 들어가 있다고 보면 된다.
3) <p>ID: <input type="text"/></p>
p 태그는 paragraph 문단의 약자로, 하나의 문단을 만들 때 쓰인다. 위의 결과물을 확인해보면 로그인 페이지 와 ID 입력창, PW 입력창, 로그인버튼 모두가 서로간에 간격이 존재한다. 이는 p 태그가 자체적으로 가지고 있는 특성을 이용한 것인데, p 태그의 경우에는 위아래에 자동으로 여백이 들어간다.
CSS 기초
기본적으로~안에로 공간을 만들어 작성합니다.
자주 쓰게 될 CSS 몇 종류
배경관련 background-color : 배경색 background-image : 배경 이미지 background-size : 배경의 사이즈
사이즈 width : 가로폭 height : 세로폭
폰트 font-size : 글씨 크기 font-weight : 글씨 굵기 font-family : 글씨 종류 color : 글씨 색상
간격 margin : 현재 요소 주변의 여백 공간, 쉽게 말해 외부여백 padding : 콘텐츠와 테두리 사이의 여백 공간, 쉽게 말해 내부여백
배경 이미지로 사용될 녀석의 링크, 경로를 가져와 주는것이 background-image 이다.
url 안에다가 경로를 입력해주면 불러와 진다.
다음으로 해당 이미지를 전체를 표시해주기 위해 background-size 를 이용해서 이미지 크기를 지정해준다.
해당 속성에 대한 몇가지 추가 설명
auto : 원래 배경 이미지 크기만큼 표시(기본 값) contain : 지정한 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소 cover : 지정한 요소를 다 덮도록 배경이미지를 확대/축소 크기 값 : 너비높과 높이 값을 지정 백분율 : 지정한 요소를 기준으로 백분율 값을 지정
background-position 을 이용해서 상하좌우 모든 경우에 center 중앙으로 오게 해주었다.
border-radius: 10px; 를 이용해서 .mytitle 영역의 외곽부에 R값을 줘서 둥글게 처리한다.
padding-top: 40px; 을 이용해서 내부여백 상단에 공간을 주어 로그인페이지의 글씨가 중앙에 위치하게 해주었다.
이 외에도 수많은 태그가 있지만 꼭 기록해야 할 만큼 중요한 것 들에 대해서는 추가적으로 정리하되 아닌경우 자주 쓰이는 것 들인 만큼 쓰면서 익혀가자..
위에서 배운 부트스트랩 및 다양한 CSS 를 이용해서 만들어진 결과물이다. 이에 대한 내용들을 몇가지 정리해보자.
1) 맨 위 상단 '내 생에 최고의 영화들' 코드 정리
.mytitle {
background-color: green;
width: 100%;
height: 250px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
background-position: center;
background-size: cover;
color: white;
/* 위치 잡아주기 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* mytitle 안에 있는 모든 button 에 적용 */
.mytitle > button {
width: 200px;
height: 50px;
/* 투명색 transparent */
background-color: transparent;
color: white;
border-radius: 50px;
/* button 외곽선 굵기 및 색상 지정 */
border: 1px solid white;
margin-top: 10px;
}
/* 마우스를 위에 올렸을 때 외곽선의 속성 변경 */
.mytitle > button:hover {
border: 2px solid white;
}
.mycoment {
color: gray;
}
백그라운드 이미지에 들어간 속성 부가 설명
linear-gradient(0deg, rgba(0, 0, 0, 0.5)
CSS 에서 한 방향에서 다른 방향으로 색이 점차 흐려지거나, 색이 변화하는 효과를 줄 때 쓰이는 속성이다. 보통 일반적으로 방향을 지정해주고 어떤 색에서 어떤 색으로 변할지 지정해준다. 위의 방법에서는 방향 대신에 각도를 지정해주고 rgba 를 통해 검은 화면에 투명도를 0.5 를 준것이다.
이를 통해서 배경의 이미지를 약간 어둡게 표현해주는 효과를 만들어냈다.
위에서 사용한 외곽선의 속성 변경에 대한 부가설명
마우스를 영화 기록하기 버튼에 올리기 전마우스를 영화 기록하기 버튼에 올린 후
미세한 차이지만 버튼의 외곽선이 더 굵어졌다.. 이런식으로 마우스 커서가 올라갔을 때 변하는 이벤트에 hover 를 사용하게 된다.
display: flex; 를 통해서 Flex 기능을 시작 flex-direction: row(가로축) 또는 column(세로축) 을 사용해서 기준이 될 축의 방향을 결정 justify-content: center; 메인축 방향으로 아이템들을 정렬하는 속성 이경우 중앙으로 정렬 align-items: center; 수직축 방향으로 아이템들을 정렬하는 속성 이경우 중앙으로 정렬
매우 다양한 속성들이 있는데 이것들은 위 링크를 통해 참고하면서 사용해가자.
가장 큰 레이아웃에 넣은 wrap 의 속성에 대한 부가 설명
/* width: 95% : 화면에서 차지하는 가로 사이즈 크기를 어떤 창 크기에서도 무조건 95%를 차지한다.
(즉, 1200px 보다 작으면 무조건 95%를 채운다.)
max-height: 1200px : 화면에서 차지하는 가로 사이즈 크기의 최대치가 1200px
이를 이용해 모바일 사이즈에도 대응한다. */
.wrap {
max-width: 1200px;
width: 95%;
margin: 20px auto 0 auto;
}
.mypost {
max-height: 500px;
width: 95%;
margin: 20px auto 0 auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
영화 기록하기 박스에 들어간 음영 효과 부가 설명
.mypost {
max-height: 500px;
width: 95%;
margin: 20px auto 0 auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
box-shadow: 0px 0px 3px 0px gray; 순서대로 설명
0px : 가로 위치 양수 -> 우측 / 음수 -> 좌측 그림자 생성 0px : 세로 위치 양수 -> 하측 / 음수 -> 상측 그림자 생성 3px : 그림자를 흐릿하게 만든다. 값이 클 수록 흐려진다 0px : 양수 -> 그림자 확장 / 음수 -> 그림자 축소 gray : 그림자의 색을 지정한다
JS (자바스크립트)
Javascript 란? 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
브라우저가 왜 Javascript 만 알아듣는가 하면, 물론 다른 언어 HTML 안에다 파이썬, Java 같은 언어를 사용해 가능은 하다. 하지만, 이미 만들어진 표준 이기 때문에 모든 브라우저는 기본적으로 Javascript 를 알아듣게 설계되어있고 모든 웹 서버는 HTML+CSS+Javascript 를 주게 되었다..
Javascript 기초 문법
크롬을 실행시킨후 F12 를 눌러 개발자도구 에 진입한다. 이 후, console 탭에서 작성하며 시작한다.
해당 창을 띄워줍니다.
console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록! console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 붙여넣어보세요. console.log("Hello World!");
아래와 같이 결과물이 출력이 된다.
변수 & 기본연산
변수 대입(a = 2)의 의미 : 오른쪽에 있는 것을 왼쪽에 넣는 것 즉, 2를 a 라는 변수에 넣는다는 의미이다.
1) let 으로 변수를 선언해보자
let num = 20 num = 'Bob' 변수는 값을 저장하는 박스이며, 한 번 선언하면 다시 선언하지 않고 값을 넣는다.
2) 사칙연산, 그리고 문자열 더하기가 기본적으로 가능하다
let a = 1 let b = 2 a+b 결과 : 3 a/b 결과 : 0.5 let first = 'Bob' let last = 'Lee' first+last 결과 : 'BobLee' first+' '+last 결과 : 'Bob Lee' first+a 결과 : Bob1 문자 + 숫자 를 하면, 숫자를 문자로 바꾼 뒤 수행한다.
변수명은 쉽게 알아볼 수 있게 쓰도록 하는것이 좋다. 단 특수문자 또는 띄워쓰기는 불가능하다.
3) 리스트와 딕셔너리
리스트 : 순서를 지켜서 가지고 있는 형태
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능
let b_list = [1,2,'hey',3] // 이렇게도 선언 가능
b_list[1] // 2 를 출력 b_list[2] // 'hey'를 출력
// 리스트에 요소 넣기 b_list.push('헤이') b_list // [1, 2, "hey", 3, "헤이"] 를 출력
// 리스트의 길이 구하기 b_list.length // 5를 출력
딕셔너리 : 키(key)-밸류(value) 값의 묶음
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능
let b_dict = {'name':'Bob','age':21} // 로 선언 가능 b_dict['name'] // 'Bob'을 출력 b_dict['age'] // 21을 출력
앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.
let customer_1_name = '김스파'; let customer_1_phone = '010-1234-1234'; let customer_2_name = '박르탄'; let customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)
👉 딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};
👉 그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
몇개 더 추가적인 함수들..
예를 들면, '나눗셈의나머지'를 구하고 싶은 경우
let a = 20 let b = 7
a % b = 6
또, 특정 문자로 문자열을 나누고 싶은 경우
let myemail = 'sparta@gmail.com'
let result = myemail.split('@') // ['sparta','gmail.com']
result[0] // sparta result[1] // gmail.com
let result2 = result[1].split('.') // ['gmail','com']
result2[0] // gmail -> 우리가 알고 싶었던 것! result2[1] // com
myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!
위 처럼, 말고도 더 다양한 함수들이 있으나 다른것들은 직접 검색해서 알아보고 써보면서 익혀가도록 하자..
위에서 한 내용들은 전부 크롬 개발자 도구에서 가능하다.
위와 같이 콘솔창에서 직접 해보면서 확인할 수 있다. 이는 실제 개발할 때 에도 유용하므로 자주 쓰일 듯 하다.
JS 함수
JS 에서 가장 중요한 핵심 개념 이다. 어떠한 목적을 가진 작업들을 수행하는 코드들이 모인 블럭이다. 함수는 재사용 가능한 영역을 정의하고 정보영역을 캡슐화 하는데 사용되는 구문이다.(여러번 호출 가능)
기본 생김새
// 만드는 법 (함수 선언) function 함수이름(필요한 변수들) { 내릴 명령들을 순차적으로 작성 } // 사용하는 법 함수이름(필요한 변수들);
예제) // 두 숫자를 입력받으면 더한 결과를 돌려주는 함수 function sum(num1. num2) { console.log('숫자', num1, num2); return num1 + num2; }
sum(3, 5); // 8 sum(4, -1); // 3 위와같이 함수를 선언하여 이용하면 해당 결과값을 얻을 수 있다.
조건문
프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문 즉, 내가 지정한 조건에 따라 결과값이 다르게 도출된다.
와 같은 순서로 실행됩니다. i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
위에서 사용된 반복문을 조금 더 깊이 있게 사용하는 방법도 있다.
예제 1)
let people = ['철수','영희','민수','형준','기남','동희']
// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
for (let i = 0 ; i < people.length ; i++) {
console.log(people[i])
}
예제 2)
let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
]
for (let i = 0 ; i < scores.length ; i++) {
console.log(scores[i]);
}
// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,
for (let i = 0 ; i < scores.length ; i++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}
}
// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
