728x90
프로그래밍 첫걸음 3주차 진도를 나가며 전체 진도의 1/5 인 20%를 달성했다!
벌써 HTML 강의들을 끝냈다. 차근차근 배운 것들을 정리해보자!
3주차 진도에서는
- 06. [HTML] 정적(static)자원 사용하기
- 과제1. 외부 이미지 불러오기
- 07. [HTML] 데이터 전송 방식(Get, Post)
- 과제2. GET 방식 URL 분석하기
- 08. [HTML] 컨트롤(form, input, button)
- 과제3. form 태그 활용하기
을 학습했다. 분량은 총 1시간 분량이다. 첫 번째 강의에서는 정적 자원이 무엇인지 이미지를 어떻게 불러오는지 실습했다.
두 번째 강의에서는 HTTP Header와 Body를 이야기하고 Get 방식과 Post 방식의 차이를 이야기한다. 과제로 직접 GET 방식 URL 을 분석해본다.
세 번째 강의는 Post 방식과 그 컨트롤들을 배웁니다. 과제로 더 많은 컨트롤들을 실습했다.
한 눈에 알아보기 쉬운 슬라이드와 간단 명료한 설명으로 빠르게 핵심들을 이해할 수 있었다.
직접 타이핑도 같이 해서 어떻게 소스 코드를 만드는지 궁금했었는데 그런 점들을 해소할 수 있었다.
과제 해설도 있어가지고 공부하는데 도움이 된다.
06. [HTML] 정적(static)자원 사용하기
정적 자원(static resources)이란, 웹 페이지에 보여지는 콘텐츠 중 변하지 않는 정보를 뜻한다.
다시 정리하면 사용자의 행동이나 입력 등에 의존적이지 않은 콘텐츠들이다.
각종 자원들은 웹 서버로부터 얻을 수 있다. 클라이언트가 웹 서버로 요청하면, 웹 서버는 디스크로부터 각종 자원들을 가져다 클라이언트에게 응답해준다. 이미지 파일은 정적 자원의 대표적이다.
HTML 파일로 이미지 자원을 보여줄 때, <img src="이미지자원주소"> 태그를 사용했었다.
자원들을 연결하는 경로는 절대 경로와 상대 경로가 있다.
절대 경로는 자원의 절대적 위치를 지정해준다. http://, https://로 사용이 가능하다.
예를 들어 구글에서 이미지 파일을 찾아 주소를 복사한 다음, 그 이미지 자원을 HTML 코드로 나타낼 수 있다.
상대 경로는 현재 페이지 위치를 기준으로 상대적 경로를 지정할 수 있다.
<img src="image.jpg"> 코드는 현재 페이지와 같은 폴더 내의 image.jpg 자원을 불러온다는 의미다.
<img src="subfolder/image.jpg"> 코드는 현재 페이지와 같은 폴더 안에 'subfolder' 라는 폴더 안에 image.jpg 이미지 자원을 불러온다는 의미다.
<img src="../image.jpg"> 코드는 현재 페이지의 상위 폴더 내의 이미지 자원을 불러온다는 의미다.
정적 페이지는 클라이언트의 요청에 이미 만들어진 HTML 페이지를 응답하는 것을 뜻한다. 블로그 또는 자기 소개 페이지 등이 있다.
반대로 동적 페이지는 클라이언트의 요청에 실시간으로 페이지의 변화를 응답합니다. 게시판, 방명록 등이 그 예다.
< 6강 퀴즈 >
1. 정적 자원
2. 절대 경로
3. 현재 페이지
4. 정적 페이지와 동적 페이지
과제1. 외부 이미지 불러오기
강의에서 배웠던 대로 구글에서 파이썬을 검색하여 나오는 이미지의 절대 경로로 띄우는 실습과
직접 이미지를 로컬에 저장하여 상대 경로로 불러오는 실습을 했다.
완성본과 소스 코드는 다음과 같다!
폴더 구성은 다음과 같이 했다.
index.html 소스 코드는 다음과 같다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!doctype html> <html> <head> <meta charset="UTF-8"> <title>[과제] 외부 이미지 불러오기</title> </head> <body> <h3>1. 절대 경로로 불러오기</h3> <img src="http://story.wisedog.net/wp-content/uploads/2015/02/python_language_logo_300x300.png"> <h3>2. 상대 경로로 불러오기</h3> <img src="../image/react.png"> </body> </html> | cs |
두 번째 상대 경로로 불러올 때는 현재 페이지의 상위 폴더로 이동하여 그 하위 폴더인 image 폴더에 있는 react.png 이미지 자원을 불러왔다. 설명만 들을 때는 몰랐지만 직접 만들어봤더니 그렇게 어려운 개념도 아니었다. 무엇보다 Visual Studio Code 에서 경로 가져올 때 자동 목록이 된다는 점이 편했다!
07. [HTML] 데이터 전송 방식(Get, Post)
HTTP ( HypterText Transfer Protocol ) : 웹 상에서 대화를 주고 받기 위한 규칙으로, 이번 강의에서는 규칙을 더 다뤄본다. HTTP는 Header와 Body로 나누어진다.
Header는 요청 방식(Method) 알림, 사용자 정보, 브라우저 정보를 제공한다. 여기서 '요청 방식(Method)'이 중요하다. 웹 서버와 어떤 주제로 대화할지 정하기 때문이다.
Body는 서버에 데이터를 전송할 때 데이터가 담겨지는 부분이다.
요청 방식(Method)에서 GET 방식과 POST 방식이 있다. 웹 상에서 대화를 주고 받기 위한 방식, 클라이언트(사용자)가 서버에 요청하기 위한 방법이다.
GET 방식은 웹 사이트에서 검색을 위한 방식이다. 리소스를 가져오는(GET) 행위다.
GET 방식은 다음과 같이 URL 뒤에 쿼리 문자여를 덧붙여서 요청한다.
< GET 방식 주소 >
물음표(?) 를 기준으로 key=value&key=value&... 형식으로 URL 끝에 정보를 덧붙인다.
POST 방식은 헤더와 바디에 정보를 담아서 요청하는 방식이다. GET 방식과 달리 눈에 바로 들어오지 않는다.
예를 들어 설명하며 로그인, 게시판, 방명록에 내가 입력한 값들을 전송할 수 있다. 내가 입력한 정보는 URL에 직접적으로 나타나지 않고 헤더와 바디와 함께 전송된다.
서버는 POST 방식으로 요청받을 때 어떻게 반영이 되었는지 결과를 다시 알려준다.
POST 방식은 서버에 데이터를 전송하고 반영된 결과 값을 돌려 받을 때 사용된다.
< 7강 퀴즈 >
1. 헤더와 바디
2. GET 방식
3. 전송
과제2. GET 방식 URL 분석하기
팟빵 사이트의 GET 방식 URL를 분석한다.
팟빵 사이트에 순위 페이지에 URL은 다음과 같다.
물음표 뒤에 키와 값들이 보여지니깐 이 URL 주소는 GET 방식인 것을 알 수 있다.
ddate를 2019-04-23 으로 바꿔보기도 하고, start를 201, 301로도 바꿔서 실습해봤다.
08. [HTML] 컨트롤(form, input, button)
앞서 GET 방식을 살펴봤다. GET 방식과 POST 방식은 클라이언트(사용자)가 서버에 요청하기 위한 방법이다. 그렇다면 어떤 원리로 서버에 요청할 수 있는걸까?
1 2 3 4 5 6 7 | <form action='' method="get"> <input type="text" name="name" value="이름"> <input type="text" name="phone" value="전화번호"> <button type="submit">전송</button> <button type="reset">삭제</button> </form> | cs |
form 태그로 서버에 요청할 수 있다. form 태그는 웹 상에서 입력 항목을 구성할 때 사용하는 태그로 전체 폼의 부모 역할을 해준다.
action 속성은 목적지 주소를 의미한다. 값 전송 시 자동 호출될 서버 프로그램 주소를 지정합니다. 아무것도 적혀있지 않으면 현재 페이지를 뜻합니다.
method 속성은 get 방식 인지 post 방식 설정합니다.
input 태그는 속성의 값에 따라서 다양한 입력폼을 구성할 수 있게 해준다. type="text"는 텍스트 입력용이다.
input 태그의 name 속성은 데이터의 식별자로 이용이 된다. GET 에서는 key 에 해당된다.
input 태그의 value 속성은 기본적으로 웹 브라우저상에 보여지는 값이다.
button 태그는 버튼 모양을 나타내는 태그다. 마찬가지로 type 속성이 있다.
type="submit" 은 전송(Submit) 액션용 속성이고 type="reset"은 현재 폼에 입력된 데이터를 모두 초기화해주는 속성이다.
전송 버튼을 누르면 주소가 이렇게 바뀐다.
GET 방식이고, input 태그의 name 속성들이 key 로 들어가고 value 속성과 매칭이 된다.
그럼 이제 POST 방식으로 바꿔보자!
1 2 3 4 5 6 7 | <form action='receive.php' method="post"> <input type="text" name="name" value="이름"> <input type="text" name="phone" value="전화번호"> <button type="submit">전송</button> <button type="reset">삭제</button> </form> | cs |
POST 방식으로 바꾸려면, 서버 사이드 언어로 만든 결과 페이지가 필요하다.
다음 문서를 참고해서 맥에 기본으로 설치된 Apache 서버를 켰다.
/private/etc/apache2/users 폴더에서 username.conf 파일을 만들어 다음과 같이 적고 저장한다.
1 2 3 4 5 | <Directory "/Users/chipmunk/Sites/"> Options Indexes MultiViews AllowOverride None Require all granted </Directory> | cs |
username은 내 계정으로 설정했다.
이제 /Users/chipmunk/Sites/ 폴더에서 index.html과 receive.php 파일을 복사하였다.
그리고 sudo apachectl start 또는 restart 명령으로 아파치 서비스를 시작했다.
웹 브라우저를 켜 http://localhost/~chipmunk/ 에 접속하여 실습하였다.
PHP 언어를 이용해서 다음과 같이 결과를 확인할 수 있게 짰다.
1 2 3 4 5 6 7 8 9 10 11 12 | <!doctype html> <html> <head> <meta charset="UTF-8"> <title>전송 결과 페이지</title> </head> <body> <h2>전송결과?</h2> <p>이름: <strong><?php echo $_POST['name']; ?></strong></p> <p>전화번호: <strong><?php echo $_POST['phone']; ?></strong></p> </body> </html> | cs |
과제3. form 태그 활용하기
1 2 3 4 5 6 7 8 9 10 11 | <select name="cars"> <option value="kia">KIA</option> <option value="hyundai">Hyundai</option> <option value="Toyota">Toyota</option> <option value="audi">Audi</option> </select> <!-- 여러 줄의 문자를 표현하는 textarea 태그 --> <textarea name="text_area"> The cat was playing in the garden. </textarea> | cs |
위 소스를 덧붙여서 확인해보는 과제다.
다시 form 태그의 action 과 method 를 수정했다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!doctype html> <html> <head> <meta charset="UTF-8"> <title>[과제] 외부 이미지 불러오기</title> </head> <body> <form action='' method="GET"> <input type="text" name="name" value="이름"> <input type="text" name="phone" value="전화번호"> <select name="cars"> <option value="kia">KIA</option> <option value="hyundai">Hyundai</option> <option value="Toyota">Toyota</option> <option value="audi">Audi</option> </select> <!-- 여러 줄의 문자를 표현하는 textarea 태그 --> <textarea name="text_area"> The cat was playing in the garden. </textarea> <button type="submit">전송</button> <button type="reset">삭제</button> </form> </body> </html> | cs |
다음 URL로 이동했다. cars 와 text_area 식별자가 추가된 것을 확인할 수가 있다!
3주차 학습 정리가 끝났다.
다음은 CSS 파트 강의로 넘어 간다.
디자인이 밋밋했는데 조금 더 꾸며진 모습을 볼 수 있을 것만 같다.
다음 주가 기대가 된다.
'자유 > 대외 활동' 카테고리의 다른 글
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #7.5주차 학습후기 (0) | 2019.05.04 |
|---|---|
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #6.4주차 학습후기 (0) | 2019.04.26 |
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #4.2주차 학습후기 (0) | 2019.04.20 |
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #3. 생활코딩! HTML+CSS+JAVASCRIPT 도서 수령 (0) | 2019.04.15 |
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #2. 웹에 대한 이해 및 환경 설정 (0) | 2019.04.14 |
댓글