rheehot/basicweb-study-blog

🏫 부산대학교 『웹기초프로그래밍』 2020년 2학년 1학기

🌐 BasicWeb-study-blog

부산대학교 2학년 1학기 권동현 교수님의 『인터넷과웹기초』 강의의 실습 내용을 정리한 저장소입니다.

📌 인터넷과 웹에 대한 기본적인 구조를 이해하고, 클라이언트 사이드 프로그래밍을 하며, 오픈 API를 이용해 웹페이지를 개발합니다.

📎 개인적으로 공부한 express + nodejs

📎 3주차

📽 attend 실행영상

설명

• 자기 소개 웹페이지 version 1 입니다.

플더 구조

└── attend
    ├── introduce_1.html
    └── image
        ├── 1.jpeg
        ├── 2.jpeg
        ├── 3.jpeg
        └── jisu.jpg

📎 4주차

📽 assign 실행영상

설명

• title, heading, line, link, 가로줄, 이미지, 이미지캡션, bookmark, iframe, 특수기호를 넣은 표, footer 라는 html 요소들을 활용한 웹페이지 입니다.

📽 attend 실행영상

설명

• 자기 소개 웹페이지 version 2 입니다.

플더 구조

├── assign
│   ├── elements.html
│   └── PNUimage.jpeg
└── attend
    ├── introduce_2.html
    ├── 빈.html
    └── jisu.jpg

📎 5주차

📽 assign 실행영상

설명

• css 요소들을 활용하여 윤동주 시인의 '별헤는 밤' 시를 꾸며놓은 웹페이지 입니다.

📽 attend 실행영상

설명

• 자기 소개 웹페이지 version 3 입니다.

├── assign
│   ├── 별.jpg
│   ├── poem.css
│   └── poem.html
└── attend
    ├── introduce_3.html
    ├── introduce_3.css
    ├── 빈.html
    └── jisu.jpg

📎 6주차

📽 assign 실행영상

설명

• css 요소들을 활용하여 책의 한페이지를 꾸며놓은 웹페이지 입니다.

📽 attend 실행영상

설명

• 자기 소개 웹페이지 version 4 입니다.

플더 구조

├── assign
│   ├── css
│   │   ├── poem01.css
│   │   ├── poem02.css
│   │   ├── poem03.css
│   │   └── poem04.css
│   ├── 별.jpg
│   └── poem.html
└── attend
    ├── introduce_4.html
    ├── introduce_4.css
    ├── 빈.html
    └── jisu.jpg

📎 7주차

📽 assign 실행영상

설명

• 사용자로부터 정보를 입력 받아 서버로 보내는, 입력 폼 형태의 신청서 웹페이지 입니다.

📽 attend 실행영상

설명

• 자기 소개 웹페이지 version 5 입니다.

플더 구조

├── assign
│   ├── apply.css
│   └── poem.html
└── attend
    ├── introduce_5.html
    ├── introduce_5.css
    ├── 빈.html
    └── jisu.jpg

📎 8주차

플더 구조

└── attend
    ├── 동네예보조회.docx
    └── 동네예보조회.json

📎 9주차

📽 assign 실행영상

설명

• 버튼을 누르면 현재 시간을 출력하는 웹페이지 입니다.

📽 attend 실행영상

설명

• express 를 활용하여 학번 이름을 출력하는 웹페이지 입니다.

플더 구조

├── assign
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   │   ├── MyJS1.html
│   │   ├── MyJS2.html
│   │   └── MyJS3.html
│   ├── ass9_01.js
│   ├── ass9_02.js
│   ├── ass9_03.js
│   └── node로openAPI호출.pdf
└── attend
    ├── express.pdf
    ├── index01.js
    ├── index02.js
    ├── package-lock.json
    └── package.json

📎 10주차

📽 attend 실행영상

설명

• 자바스트립트의 함수들을 활용하여 만들어진 동적 웹페이지 입니다.

플더 구조

└── attend
    ├── 01.html
    ├── 딸기.png
    ├── 사과.png
    └── js01.js

📎 11주차

📽 assign 실행영상

설명

• 피보나치 수열을 생성하는 웹페이지 입니다.

📽 attend 실행영상

설명

• 간단한 계산기를 구현한 웹페이지 입니다.

플더 구조

├── assign
│   └── fibonacci.html
└── attend
    └── calculator.html

📎 텀프로젝트

📽 MuChu 실행영상

설명
무엇이든 추천하는 웹페이지 "MuChu" 입니다.
선택한 지역의 날씨에 따라 옷, 음식, 놀러갈 곳, 헤어스타일을 추천해줍니다.
먼저 지역을 선택하면, 해당 지역의 현재 온도, 최저 온도, 최고 온도, 습도, 날씨 상태를 출력하고, 적절한 추천 문구 를 출력합니다. 그러면 페이지를 절반으로 나누었을 때의 왼쪽에는 추천 사진, 오른쪽에는 추천 블로그를 보여줍니다. 사용자는 추천하는 블로그에 들어가 해당 내용을 확인할 수 있습니다.
(참고로, 헤어스타일을 추천해주는 웹페이지는 아직 구축되지 않았기에 css요소로 진행중임을 표시했습니다.)

플더 구조

├── img
│   ├── 옷장.png
│   ├── 음식.png
│   ├── 장소.png
│   └── 헤어.png
├── clothes.html
├── food.html
├── go.html
├── hair.html
├── main.html
├── style2.css
└── weather.js