[HTML 기초 강좌 1강] 태그 이해하기 (Feat. 네이버 해킹?!)

 

조코딩 HTML 기초 강좌 1강

웹 개발의 가장 기본인 HTML의 태그에 대해 이해해보는 강좌입니다.

HTML 태그의 기본에 대해 이해하고 크롬 개발자 도구를 이용해 실제 웹 사이트를 분석하고

기사 조작, 실시간 검색순위 조작을 통해 실습해보는 강좌입니다.

 

안녕하세요 누구나 배울 수 있는 쉬운 코딩 채널을 만들어가는 조코딩입니다.
이번 영상부터 HTML의 기본에 대해 함께 배워보겠습니다.
HTML이란 지난 코딩 공부 순서 영상에서 말씀드렸던 것처럼 웹의 Front-End의 뼈대를 구성하는 언어입니다. 
즉, 웹 페이지의 전체적인 구조가 어떻게 되어 있는지를 표시하는 마크업 언어인 것이죠.
HTML은 Hyper Text Markup Language로 풀어쓰자면 하이퍼텍스트 하이퍼링크 들로 구성된, 마크업 웹페이지 구조가 어떻게 되어있는지 표기하는 언어인데요

예전에는 이름에서도 알 수 있듯이 단순히 여러 웹 문서를 연결해주는 하이퍼링크의 모음 정도로사용되었는데, 요즘은 어플리케이션, 게임 등을 만들 수 도 있을 정도로 다양하게 활용되고 있습니다.
HTML을 조금 더 쉽게 설명드리자면 마치 테트리스를 하는 것 처럼 블록 만들어 화면에 쌓아서 웹페이지를 구성하는 형태입니다.
여기서 이러한 블록을 HTML에서는 <태그>라고 부릅니다.
다양한 기능을 가진 태그들로 화면을 쌓아서 우리가 잘 알고있는 구글, 네이버 등 웹 사이트를 만들 수 있습니다.
이렇게 말로만 들어서는 잘 모르시겠죠? 직접 화면을 통해 보시죠!

HTML이 브라우저에서 어떤식으로 변환되는지 알아보겠습니다.
HTML 태그로 작성된 문서를 브라우저로 열게되면 이렇게 우리게 보는
웹 페이지 형태로 나타나게 됩니다.
태그를 하나씩 살펴보면
이렇게 여는 태그와 이렇게 슬래시가 들어간 닫는 태그 사이에 내용을 넣으면
태그의 이름처럼 이렇게 제목 역할을 하는 글씨가 브라우저로 표시되게 됩니다.
입력창은 안에 내용이 없으므로 그냥 스스로 닫는 태그를 작성해주시면 이렇게 입력창으로
나타나게됩니다. 마찬가지로 버튼, 체크표시 등도 태그를 통해 입력해주시면 이렇게
우리가 브라우저로 확인할 수 있습니다.

실제 네이버 뉴스 웹사이트를 보면서 더 자세히 살펴보겠습니다.
우리가 보는 웹 사이트는 특정 부분의 블록으로 나눌 수 있습니다.

헤더, 기사, 배너 등으로 말이죠
또 나눠진 블록들을 한번 더 세분화하여 나눌 수도 있습니다.
예를들어 기사 영역을 제목영역과 기사 내용 영역으로 나눌 수 있습니다.
이러한 부분은 HTML 태그로 어떻게 표현해야 될까요?

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

크롬 브라우저를 통해 네이버 뉴스 사이트에 접속하였습니다.
여기서 HTML 코드를 살펴보려면 키보드 상단의 F12 버튼을 눌러주세요
그러면 개발자 도구가 뜨고 현재 웹 페이지의 HTML 문서를 
개발자 도구를 통해 편리하게 볼 수 있습니다.
여기서 이렇게 측면 화살표를 눌러 여는 태그와 닫는 태그를 접고, 펼쳐
부모요소와 자식요소들을 볼 수 있습니다.
또 상단의 화살표를 눌러 웹 페이지 위에 올려보게 되면 각 요소의 영역이 표시됩니다.
앞서 살펴본 바와 같이 이렇게 헤더 영역, 기사 영역, 배너 영역등으로
실제로 나눠지는 것을 확인할 수 있습니다.
여기서! 재미있는건, 개발자 도구를 이용해 HTML 문서를 수정할 수 있습니다.
놀랍지 않나요?

 

추가로 HTML, CSS를 독학으로 학습하실 수 있는 좋은 사이트 추천드립니다.

1. Codecademy https://www.codecademy.com/learn/learn-html

2. 생활코딩 https://opentutorials.org/course/1