728x90
반응형
<목차>
1) WEB
1-1) 개념
1-2) 구성 요소
2) HTML
2-1) HTML 문서의 기본 구조
3) 예제
1) WEB
1-1) 개념
WWW(World Wide Web) = W3 = Web
- 인터넷에 연결된 컴퓨터를 이용해 사람들과 정보를 공유할 수 있는 공간
- 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트 방식으로 연결하여 제공
- 하이퍼텍스트(hypertext)란 문서 내부에 또 다른 문서로 연결되는 참조를 집어넣음으로써 웹 상에 존재하는 여러 문서끼리 서로 참조할 수 있는 기술을 의미
* hyperlink : 문서 내부에서 또 다른 문서로 연결되는 참조
1-2) 구성 요소
(1) HTML(Hypertext Markup Language)
(2) CSS(Cascading Style Sheet)
(3) JavaScript
2) HTML
2-1) HTML 문서의 기본 구조
3) 예제
home.html
<!-- cntl + / => 주석 -->
<!-- HTML의 버전 정보를 표시, 웹 문서임을 나타내는 정보 -->
<!DOCTYPE html>
<!-- HTML 문서의 시작을 알리는 부분, 사용할 언어 지정 -->
<html lang="kor">
<!-- 브라우저에 정보를 주는 태그 -->
<head>
<!-- 문서의 문자 인코딩 지정 -->
<meta charset="UTF-8" />
<!-- 반응형 디자인을 지원하여 다양한 장치에서 페이지가 잘 보이도록 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 문서의 제목 -->
<title>HOME</title>
<!-- <script>, <style> -->
</head>
<!-- 브라우저에 실제로 표시되는 내용 -->
<body>
<!-- h1부터 h6까지 있으며, h 문자 뒤에 오는 숫자가 커질수록 글자 크기가 작아짐!! -->
<h4>Welcome, HOME</h4>
<!--
<a> : HTML 내에 링크를 생성하는 태그
href 속성 : 링크로 이동할 URL을 지정
target 속성 : 링크가 이동할 위치를 지정
_self : 링크를 현재 창이나 프레임에서 열기(기본값)
_blank : 링크를 새 탭이나 새 창에서 열기
_parent : 링크를 현재 프레임의 부모 프레임에서 열기
_top : 링크를 최상위 프레임에서 열기
-->
<ul>
<li>
<a href="https://naver.com" target="_blank">네이버</a>
</li>
<li>
<a href="https://daum.net" target="_parent">다음</a>
</li>
<li>
<a href="https://google.com" target="_top">구글</a>
</li>
</ul>
<!-- hr 태그는 구분선을 생성해주며, 단독으로 사용되는 태그이다 -->
<hr />
<!-- ul 태그 : 순서가 없는 목록을 생성할 때 사용하는 태그 -->
<ul>
<li>
<a href="./0.route/route.html">경로</a>
</li>
<li>
<a href="./1.image/image.html">이미지</a>
</li>
</ul>
</body>
</html>
route.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>route</title>
</head>
<body>
<h1>route</h1>
<!--
HTML 파일에서 경로(path)는 파일 시스템 내의 위치를 지정하여
웹 페이지에서 다른 파일이나 리소스를 참조하는 데 사용.
- 상대 경로(Relative Path)
- 절대 경로(Absolute Path)
/ 절대경로
./ 현재 디렉토리
../ 상위 디렉토리
-->
<ul>
상대경로
<!-- 예제 1. 상위 폴더의 파일 참조 -->
<li>
<a href="../home.html">home</a>
</li>
<!-- 예제 2. 하위 폴더의 파일 참조 -->
<li>
<a href="./sub/sub_route.html">sub_route</a>
</li>
<!-- 예제 3. 동일한 폴더 내의 파일 참조 -->
<li>
<a href="./same_route.html">same_route</a>
</li>
</ul>
<ul>
절대경로
<!-- 예제 1. 상위 폴더의 파일 참조 -->
<li>
<a href="C:\vscode\scit45_B\HTML\home.html">home</a>
</li>
<!-- 예제 2. 하위 폴더의 파일 참조 -->
<li>
<a href="C:\vscode\scit45_B\HTML\0.route\sub\sub_route.html"
>sub_route</a
>
</li>
<!-- 예제 3. 동일한 폴더 내의 파일 참조 -->
<li>
<a href="C:\vscode\scit45_B\HTML\0.route\same_route.html">same_route</a>
</li>
</ul>
</body>
</html>
same_route.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>same_route</title>
</head>
<body>
<h1>same_route</h1>
<ul>
상대경로
<li>
<a href="../home.html">home</a>
</li>
<li>
<a href="./route.html">route</a>
</li>
</ul>
</body>
</html>
sub_route.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>sub_route</title>
</head>
<body>
<h1>sub_route</h1>
<ul>
상대경로
<li>
<a href="../../home.html">home</a>
</li>
<li>
<a href="../route.html">route</a>
</li>
</ul>
</body>
</html>
'HTML & CSS > HTML & CSS(2024 version)' 카테고리의 다른 글
| CSS(2) - inline / block / inline-block 요소, 배치, 메뉴 만들기, 시맨틱 태그 (0) | 2024.05.31 |
|---|---|
| CSS(1) - 기본 문법, 선택자, 텍스트, 목록, 자손 선택자, 박스 모델 (0) | 2024.05.30 |
| HTML(3) - form, input 태그 종류 (0) | 2024.05.29 |
| HTML(2) - 이미지, 텍스트, 테이블 관련 태그 (0) | 2024.05.28 |
