#05 네이버로 배우는 HTML

3 분 소요

오늘은 HTML①의 기본에 대해 함께 배워보겠습니다. HTML 이란 지난 코딩 공부 순서 영상에서 말씀드렸던 것처럼 웹의 Front-End②의 뼈대를 구성하는 언어입니다. 즉, 웹 페이지의 전체적인 구조가 어떻게 되어 있는지를 표시하는 마크업 언어③인 것이죠. HTML은 Hyper Text Markup Language로 해석하자면 하이퍼텍스트④로 구성된 웹페이지의 구조를 표시하는 언어입니다.

이전에는 이름에서도 알 수 있듯이 단순히 여러 웹 문서를 연결해주는 하이퍼링크⑤의 모음 정도로 사용되었는데, 요즘은 애플리케이션, 게임 등을 만들 수도 있을 정도로 다양하게 활용되고 있습니다.

① HTML : 하이퍼텍스트 마크업 언어라는 의미의 웹 페이지를 위한 지배적인 마크업 언어

② Front-End : 데이터를 그래픽 인터페이스로 변환하여 사용자가 해당 데이터를 보고 상호 작용하는 것

③ 마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지

④ 하이퍼텍스트 : 참조를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트

⑤ 하이퍼링크 : 하이퍼텍스트 문서 안에서 직접 모든 형식의 자료를 연결하고 가리킬 수 있는 참조 고리

조금 더 쉽게 설명드리자면 마치 테트리스를 하는 것처럼 블록 만들어 화면에 쌓아서 웹페이지를 구성하는 형태입니다. 여기서 이러한 블록을 HTML에서는 <태그⑥>라고 부릅니다. 다양한 기능을 가진 태그들로 화면을 쌓아서 우리가 잘 알고 있는 구글, 네이버 등 웹 사이트를 만들 수 있습니다.

HTML이 브라우저에서 어떤 식으로 변환되는지 알아보겠습니다. HTML 태그로 작성된 문서를 브라우저⑦로 열게 되면 이렇게 우리게 보는 웹 페이지 형태로 나타나게 됩니다. 태그를 하나씩 살펴보면 이렇게 여는 태그와 이렇게 슬래시가 들어간 닫는 태그 사이에 내용을 넣으면 태그의 이름처럼 이렇게 제목 역할을 하는 글씨가 브라우저로 표시되게 됩니다.

⑥ 태그 : 어떤 정보에 메타데이터로 부여된 키워드 또는 분류

⑦ 브라우저 : 인터넷상에서 웹에 연결해주는 소프트웨어

실제 네이버 뉴스 웹사이트를 보면서 더 자세히 살펴보겠습니다. 우리가 보는 웹 사이트는 특정 부분의 블록으로 나눌 수 있습니다. 헤더⑧, 기사, 배너 등으로 말이죠. 또 나눠진 블록들을 한 번 더 세분화하여 나눌 수도 있습니다. 예를 들어 기사 영역을 제목 영역과 기사 내용 영역으로 나눌 수 있습니다.

⑧ 헤더 : 머리말

실제 HTML 코드를 이용해 나타내면, 위 사진과 같이 나타낼 수 있습니다. 여기서 div라는 태그는 division의 약자로 구역을 나눠주는 기능의 태그입니다. “기사”라는 속성을 가진 큰 div 아래에 한 단계 들어가면 “제목”이라는 영역과 “기사 내용”이라는 영역으로 나뉘는 것을 볼 수 있습니다. “제목” 영역 안에는 제목의 역할을 하는 태그인 h1 태그를 넣어 제목을 표시하였고, “기사 내용” 영역 안에는 굵은 글씨를 나타내는 b 태그, 이미지를 나타내는 img 태그, 문단을 나타내는 p 태그를 이용하여 마크업을 한 것을 볼 수 있습니다. 이렇게 상위 태그와 하위 태그를 나타낼 때 상위 태그를 부모 태그, 하위 태그를 자식 태그라고 부릅니다.

그럼 실제로 웹 사이트가 어떻게 구성되어 있는지 알아보러 갈까요?

  1. 네이버 뉴스 기사 조작하기

크롬 브라우저를 통해 네이버 뉴스(https://news.naver.com/) 사이트에 접속하였습니다. 여기서 HTML 코드를 살펴보려면 키보드 상단의 F12 버튼을 눌러주세요 그러면 개발자 도구⑨가 뜨고 현재 웹 페이지의 HTML 문서를 개발자 도구를 통해 편리하게 볼 수 있습니다.

⑨ 개발자 도구 : 개발을 도와주는 다양한 도구

여기서 이렇게 측면 화살표를 눌러 여는 태그와 닫는 태그를 접고, 펼쳐 부모 요소와 자식 요소들을 볼 수 있습니다. 또 상단의 화살표를 눌러 웹 페이지 위에 올려보게 되면 각 요소의 영역이 표시됩니다. 앞서 살펴본 바와 같이 이렇게 헤더 영역, 기사 영역, 배너 영역 등으로 실제로 나눠지는 것을 확인할 수 있습니다.

여기서 재미있는 건, 개발자 도구를 이용해 HTML 문서를 수정할 수 있습니다.

기사 제목을 한번 바꿔보겠습니다.

수정하고자 하는 부분을 선택 도구로 선택하고 오른쪽 화면의 텍스트 부분을 더블 클릭하여 원하는 문구로 수정해줍니다.

수정하고 Enter를 누르면 실제로 화면에서 기사의 제목이 변경된 것을 볼 수 있습니다.

글자뿐만 아니라 이미지도 변경할 수 있습니다. 원하는 이미지에 마우스 우측 클릭 후 “이미지 주소 복사”를 클릭하신 뒤, 마찬가지로 개발자 도구를 통해 이미지를 선택하고 src⑩=뒷 부분을 복사한 주소로 변경하시면 원하는 이미지로 변경하실 수 있습니다.

⑩ src : source의 약자

  1. 네이버 실시간 검색 순위 조작하기

기사를 조작할 때와 마찬가지로 F12 버튼을 눌러 개발자 도구를 실행하신 후 “Alt + Shitf + C”키를 눌러 실시간 검색어 부분을 선택해줍니다.

그리고 원하는 문구로 수정해주세요.

실시간 검색어 1위가 조코딩이 된 것을 확인할 수 있습니다.

  1. 다른 사람에게는 해킹한 것이 안 보이는 이유

눈치채셨겠지만 우리는 실제로 네이버를 해킹한 것은 아닙니다. 네이버 서버에서 우리의 PC로 다운로드한 하나의 HTML 파일만 수정한 것일 뿐이기에 다른 사람은 수정된 것을 볼 수 없습니다.

실제로 해킹을 하려면 네이버 서버 안에 있는 HTML을 수정하게 된다면 다른 사람이 수정된 HTML을 다운로드하게 되어 모든 사용자에게 똑같이 수정된 결과가 보일 것입니다.

  1. 추천 학습 사이트 2가지

첫 번째로, ‘Codecademy’ 사이트입니다. ‘Codecademy’는 미션을 통해 바로 실습을 하며 익힐 수 있어서 빠르게 배울 수 있는 학습 사이트입니다. 두 번째는, ‘생활코딩’ 사이트로 차근차근 기초부터 배우고 싶으시다면 추천드립니다. 선생님께서 설명을 정말 잘해주시고 심지어 모든 강의가 무료입니다.

다음 강의에서는 오늘 배운 HTML을 이용해 직접 전 세계 누구나 이용할 수 있는 나만의 웹 사이트를 만들어보겠습니다.

태그:

카테고리:

업데이트: