| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- 남도떡갈비정식
- CU 추천메뉴
- 쿠캣 육즙갈비만두
- 반올림피자샵 메뉴추천
- CU 떡볶이
- 타로파이
- 피자헛 메가크런치 케미콤보
- CU 편의점 디저트
- 반올림피자샵 고구마피자
- CU케이크
- 코딩
- 떡갈비도시락
- 맥도날드 천원의 행복
- 신전떡볶이 메뉴조합
- CU 우유생크림케이크
- 자이언트 쫄볶이
- 맥도날드 타로파이
- 공화춘 짜장라면
- GS25 메뉴 추천
- 반올림피자샵 메뉴
- GS25 공화춘
- 이디야 허니브레드 포장
- GS25 추천메뉴
- 코딩용어
- HTML
- 이디야 허니브레드
- CU도시락추천
- 피자헛 메가크런치
- 이디야 허니브레드 가격
- 수제고구마피자
- Today
- Total
정그래의 아카이빙
HTML 기본 : 개발자도구 열어서 태그 살펴보기 본문
HTML
HTML이란 웹의 Front-End 즉, 우리가 보는 화면을 구성하는 언어이다. 따라서 Client Side라고도 부른다. HTML은 웹페이지의 구조가 어떻게 구성되어 있는지, 화면의 골격을 알 수 있는 언어이다. HTML은 'Hypertxt Markup Langugage'의 약자이다. 여기서 Hypertext란 클릭했을 때 다른 사이트로 넘어갈 수 있는 링크를 의미하며 Mark up은 구조를 표시한다는 뜻이다. 예전에는 여러 웹 문서들을 연결해주는 역할을 수행하는 언어였으나 요즘은 앱개발, 게임 개발 등 다양한 분야에서 활용되고 있는 유용한 언어이다.
태그(Tag)
HTML을 좀 더 쉽게 설명하자면 테트리스처럼 블록들을 쌓아서 특정한 웹페이지를 구성하는 형태를 떠올리면 된다. 여기서 사용된 블록들을 '태그(Tag)'라고 부른다. 다양한 기능의 태그들을 테트리스처럼 쌓아서 네이버, 구글 같은 웹사이트를 만들 수 있는 것이다.
태그작성 예시
HTML의 기본적인 요소를 알아보자. 태그의 기본형태는 '<태그이름>내용</태그이름>'와 같다. 앞은 여는 태그, 뒤는 슬래시(/)표시를 더한 닫는 태그이다. 예를 들면 제목은 '<head>내용</head>'가 된다. 내용이 없다면 태그이름에 스스로 닫는 슬러시(/)를 더해서 '<태그이름/>'처럼 쓰면 된다.
기사가 작성된 예를 들면 다음과 같다.
<div class="기사">
<div class="제목">
<h1>'HTML 기본'......</h1>
</div>
<div class="기사 내용">
<b>기사 머리 말</b>
<img src="이미지주소"/>
<p>기사 본문</p>
</div>
</div>
여기서 'div'는 division의 약자로 구역을 나눠주는 기능이다. 위의 예시 중 최상단의 <div>부터 최하단의 </div>까지가 기사를 입력하는 한 구역임을 의미한다. 그 사이에 제목 division, 기사 내용 division으로 나눠져 있음을 볼 수 있다.
제목 내의 <h1>은 Headline 제목을 의미한다. <b>는 Bold로 굵은 글씨, <img src>는 그림을 표기하는 곳으로 img는 image, src는 source로 출처를 의미한다. <p>는 paragraph로 문단을 뜻한다.
개발자도구
네이버에서 아무 뉴스기사나 화면에 띄운 후 키보드에서 'F12'를 누르면 오른쪽 화면에서 개발자 도구를 열 수 있다. 여기서 HTML도구를 활용해 문서를 수정할 수 있다. 화살표 표시를 화면에 가져다대면 HTML상 위치 확인이 가능한데 뉴스 기사 제목에 대면 HTML상 표시가 된다. 여기서 기사 제목을 원하는 대로 입력 후 엔터를 치면 제목이 바뀐 것을 확인할 수 있다. 같은 방법으로 이미지주소를 변경해서 넣을 수도 있고 네이버 실시간 순위 변경도 가능해진다. 물론 이것은 우리가 Front-End상에서 다운받은 HTML 문서를 수정한 것이다. 우리가 네이버에 접속하면 네이버 서버 상에서 HTML 문서를 보내주는데 이렇게 다운 받은 걸 수정한 것이니 다른 사람들에게는 원래 문서가 보이게 된다. 이는 프론트엔드와 백엔드 개념을 알면 쉽게 이해할 수 있다.
'코딩정보' 카테고리의 다른 글
| [IT] IP개념2 : DDNS원리, 유동IP/사설IP 서버구축방법은? (0) | 2021.02.28 |
|---|---|
| [IT] 아이피(IP)주소란 뭘까(고정IP, 유동IP, 사설IP, 공인IP, 서버구축) (0) | 2021.02.26 |
| 내사이트가 검색되게 하기 : 크롤러, robot.txt, sitmemap.xml (0) | 2021.02.24 |
| [코딩용어] 프론트엔드, 백엔드, HTML, CSS, 자바스크립트 (0) | 2021.02.22 |
| [코딩용어] 코딩, 프로그래밍 언어, 프레임워크란? (0) | 2021.02.21 |
