웹 사이트 기능 조사하기

< 웹 페이지 구성 요소와 특징 >

 

HTML	CSS	Java script &  jQuery
- 하이퍼 텍스트 마크업 언어 - 문서 -> 구조적으로 표현 가능 - 해시태그, 하이퍼링크	- 웹문서의 다양한 디자인 요소 담당 - 스타일 정의에 대한 자유도가 높음 - 동적인 콘텐츠 표현 가능	[Java script] - 클라이언트용 언어 - 인프린터언어 [jQuery] - 여러가지 기능을 담은 라이브러리

 

 

 

1) 굿네이버스

 

굿네이버스 공식 홈페이지 | 세상을 위한 좋은 변화, 굿네이버스 (goodneighbors.kr)

굿네이버스 공식 홈페이지 | 세상을 위한 좋은 변화, 굿네이버스

 

 

 

위 동영상을 보다시피 +아이콘을 누르면 또 다른 5개의 아이콘이 생성되고, 그 아이콘을 누르게 되면 카테고리 이름과 관련이 되어있는 또 다른 페이지로 이동하게 된다. 여기서 아이콘과 페이지의 연결은 HTML을 사용한 단순 링크 연결이며, 아이콘이 길어졌다가 줄어드는 애니메이션이나 이벤트 처리는 JQuary라는 자바스크립트 라이브러리를 사용하여 효과를 줄 수 있다.

 

 

2)  인스타그램

 

Instagram

Instagram

 

 

파이썬과 장고라는 웹 프레임워크 기반으로 만들어진 대표 플랫폼 중 하나다. 파이썬은 인공지능 ( AI ) 분야에서 사용되는 주요 언어에 속한다. 위에 사진처럼 해시태그를 검색하면 해당 해시태그와 관련된 글을 볼 수 있는 작업은 클롤러라고 불리는 검색엔진 로봇을 이용하여 웹상의 데이터를 수집하고, 수집한 데이터를 키워드 indexing을 통하여 사용자에게 제공하는 방향으로 구성되어 있다. 해시태그 외에도 조사한 내용은 메시지 DM 기능이다. DM 기능은 자바 스프링의 MVC와 DB 연결을 통하여 구현해 볼 수 있다.

 

 

 

3) 네이버

 

NAVER

네이버

 

 

 

위에 동영상을 보면 네이버 메인의 구성되어 있는 작은 카테고리가 있다.  카테고리를 클릭하면 페이지 전체가 바귀는게 아니라 한 섹션만 변경되는 모습을 볼 수 있다. 이것도 위에 굿네이버스 사이트와 마찬가지로 HTML을 사용하여 카테고리와 페이지들의 링크를 연결한 것이고, CSS를 사용하여 디자인 관련 부분들을 보완한거라고 볼 수 있다.

 

 

 

두 번째로 찾아본 것은 네이버나 유튜브 등 다양한 웹사이트에서 내가 검색했던 기록들을 저장해주는 기능에 대해 찾아봤다. 자바스크립트 언어를 사용하여 브라우저 내에서 만들 수 있는 기능이고, 쿠키라는 함수를 생성하여 내가 검색했던 키워드를 저장하거나 불러오는 방식으로 최근 검색어를 관리할 수 있다.