웹(Web)과 HTML
백엔드, 프론트엔드 할 것 없이 웹개발 분야의 세부적인 개발 분야이다.
그렇기 때문에 웹의 이해 그리고 웹의 표준에 대해서 정리하고 HTML이 무엇인지 어떻게 사용하는지를 정리하고자 한다.
1. 웹(Web)
우리가 흔히 아는 www.naver.com 과 같은 www는 사실 World-Wide-Web 의 약어이다.
인터넷에 연결된 컴퓨터들을 통해서 정보를 공유하는 전세계적인 정보 공간 이라는 의미를 담고 있다.
우리는 이 WWW를 즉 Web 이라고 부른다.
웹이란것은 인터넷이라는 통신망 위에 동작하는 서비스를 의미한다.
인터넷과 동일한 의미로 알고 있는 사람도 있지만 엄연히 통신망과 서비스로 서로가 다르다.
◼ 개요
웹에는 수많은 웹 사이트가 존재하고, 웹 사이트는 다량의 웹 페이지로 구성된다.
서로 연관된 내용으로 작성된 웹 페이지들의 집합을 웹 사이트라고 부른다.
웹은 정보전달의 가장 기초인 텍스트 및 그래픽, 사운드, 비디오 등 대부분의 정보를 삽입하거나 연결 가능하며, HTML을 사용하여 구축한다.
◼ 웹 표준과 목적
웹에서는 표준적으로 사용되는 기술이 있고 이를 웹 표준이라고 부른다.
W3C가 가장 중짐적인 역할로 표준 기술을개발하고 장려한다.
대표적으로 HTML, CSS, XML 등이 있다.
W3C
The World Wide Web Consortium (W3C) develops standards and guidelines to help everyone build a web based on the principles of accessibility, internationalization, privacy and security.
www.w3.org
그럼 이렇게 웹 표준을 정하는 이유가 뭘까?
특정 기기, 어떤 환경적인 조건에 상관없이 누구든지 정보에 접근하는 웹을 만들어야하기 때문이다.
크롬, 사파리, 엣지 등 어떤 브라우저를 써도, 어떤 기기에서 접속을 해도 누구든지 동일한 정보를 제공 받을 수 있다.
현대의 웹은 모두 3가지 구성을 가진다. 데이터의 구조는 HTML, 디자인과 레이아웃은 CSS, 동작과 컨트롤은 Javascript & DOM 이 담당하는 것이 현대 웹의 표준이다.
2. HTML5
HTML는 Hyper Text Markup Language의 약자로 웹 페이지 작성 언어이다.
WWW에서 볼수 있는 하이퍼텍스트 문서 작성을 위한 언어
HyperText는 텍스트에 하이퍼링크를 설정하여 텍스트간의 연결이 되어 있으며 단순한 클릭 동작으로 다양한 정보를 접하게 편리함을 제공한다.
◼ HTML특징
마크업 언어는 태그로 구성되고 태그 안에 문서의 내용을 표시한다.
HTML 태그와 엘리멘트는 같은 의미로 사용
태그는 <> 로 표시하며 시작,종료 태그로 구성
일부 태그는 종료 태그가 따로 없이 </>로 구성
태그명은 일반적으로 소문자 사용 속성을 가질 수 있고 name, value 구성을 가짐
HTML 기본 구조
<tagname>content</tagname>
name=value 구조
<a href="https://developer-dodo.tistory.com/">내 블로그</a>
HTML 를 사용하기 전에 <!DOCTYPE html> 이라는 태그를 항상 지정한다.
이는 웹 브라우저에 웹 페이지를 정확하게 랜더링 하기 위해서 html 임을 명시하는 과정이라고 생각하면 된다.
Java 나 다른 개발 언어와 유사하게 <!-- --> 로 주석 처리도 가능하다.
이는 대부분의 태그를 사용하는 언어에서 동일하게 적용 된다.
👉 HTML 기본 구조
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
</head>
<body>
<h1>This is a Head</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html>HTML의 기본 구조는 위와 같이 구성된다.
이외에 다양한 태그들을 한번 알아보자
3. HTML 태그
◾ title 태그
문서의 타이틀을 지정한다.
브라우저의 툴바에 타이틀이 지정되며 즐겨 찾기, 추가할때 페이지의 메인 타이틀
이 블로그 작성 페이지의 타이틀은 글쓰기로 실제로 설정 되어 있다.
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
</head>
</html>
◾ base 태그
href 속성은 페이지 내의 모든 상대 주소(relative URL)들의 기본 URL을 명시합니다
◾ link 태그
문서에서 사용하는 외부 파일 경로를 지정할때 사용
보통 외부 CSS, favicon에 사용
<link rel="stylesheet" href="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-1f4c64a21d504418722362f2ef9c738f7faee7c0/blogs/style/content/font.css?_version_=tistory-1f4c64a21d504418722362f2ef9c738f7faee7c0">
◾ style 태그
HTML 문서의 스타일 정보를 지정할 때 사용
일반적으로 내부 CSS 파일을 지정할 떄 사용
링크 태그와 다르게 CSS는 내부에서 html 파일 내부에서 설정
◾ script 태그
자바 스크립트를 명시할때 사용하는 태그
<script> 태그 내부에 js 문법 사용 가능
◾ hr 태그
내용을 분리하기 위해서 사용하며 웹 페이지에 수평선 만들어줌
문장 사이에 선이 그어진다고 생각하면 된다. (종료태그 없음)
◾ p 태그
문서의 문단을 지정하는 태그
✅ 개행 ,빈여백이 아닌 문단을 지정하는 목적
◾br 태그
새로운 문단이 아니라 개행을 지정
종료 태그가 없다.
◾ 텍스트 포맷 태그
| 태그이름 | 설명 |
| b | 굵은 글자 태그 |
| i | 기울어진 글자 태그 |
| small | 작은 글자 태그 |
| sub | 아래에 달라 붙는 글자 태그 |
| sup | 위에 달라 붙는 글자 태그 |
| ins | 밑줄 글자 태그 |
| del | 가운데 줄이 그어진 글자 태그 |
◾ a 태그
a태그는 여러가지 속성을 사용 가능하다.
👉 href 속성
서로 다른 페이지 또는 특정 위치로 이동 가능한 태그
하이퍼링크는 텍스트 또는 이미지 모두 가능하며 href 속성을 통해서 지정 한다.
<a href="https://developer-dodo.tistory.com/">내 블로그</a>링크는 3가지 특징을 가진다.
미방문시 밑줄 + 파란색
방문시 밑줄 + 보라색
활성화시 밑줄 + 빨간색
👉 id 속성
내부의 페이지로 이동할때는 id 속성을 이용한다.
<a id="sub"> 서브 페이지</a>
<a href="#sub">서브 이동</a>
<a href="sub.html#sub">
서브이동
</a>다른 문서에서는 해당 타겟 html#id 구성으로 사용한다.
이 구조가 티스토리 블로그에서 목차를 지정하면 자동으로 이동 해주는 기능 중 하나일 것으로 보인다.
👉taget 속성
링크된 문서를 어디에서 실행 시킬지 지정 가능하다.
| 이름 | 설명 |
| _blank | 새로운 윈도우 창 또는 tab에 문서를 열기 |
| _self | default 옵션으로 현재 클릭한 창 또는 tab에서 문서 열기 |
| _parent | parent 프레임에 문서 열기 |
| _top | 현재 윈도우에 전체 화면으로 열기 |
이외에도 다양한 태그들이 존재하고
이는 HTML 태그 - 2 포스팅에서 추가로 소개하고자 한다.
'웹 Basic' 카테고리의 다른 글
| REST / REST API란❔ (0) | 2024.06.25 |
|---|---|
| [웹 기초] HTTP 요청/응답 과정 (1) | 2024.06.04 |
| 쿠키(Cookie) & 세션(Session) & 캐시(Cache) (0) | 2024.02.26 |
| 동기식 / 비동기식 이란? (0) | 2024.01.18 |
