소소한 개발 공부
[HTML] HTML 찍먹해보기2 | 웹페이지 만들기 본문
| 📝 인프런 [따라하면서 배우는 웹애플리케이션 만들기] - Egoing Lee 를 보고 공부하며 작성한 글입니다. 링크 : 따라하면서 배우는 웹애플리케이션 만들기 |
위의 사진과 같은 웹페이지를 만들어 보기로 한다.
우선 초기 html 폼은 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>위 폼의 파일은 apache의 htdos 폴더 (C:\Bitnami\wampstack-8.0.5-0\apache2\htdocs\) 안에 위치한다.
이름은 index.html로 했다.
htdocs의 index.html은 localhost 의 홈페이지의 정보를 담고 있는 파일이다.
따라서 localhost만 주소창에 입력해도 웹서버는 index.html을 찾아 응답한다.
이제 body 안에 웹페이지에 들어갈 내용을 작성할 것이다.
1. 제목 만들기
<h1>JavaScript</h1>
<h2>JavaScript</h2>
JavaScript<h1> (header)태그는 제목을 만드는 태그로 <h1> ~ <h6> 가장 큰 제목부터 가장 작은 제목까지 만들 수 있다.
2. 카테고리(리스트) 만들기
<ol>
<li>JavaScript란?</li>
<li>변수와 상수</li>
<li>연산자</li>
</ol>ol은 ordered list로 순서가 있는 리스트를 만들 수 있다.
3. Semantic Web (의미가 잘 드러나는 웹 / 의미론적 웹)
📝[참고] Semantic Web에 대해...
Semantic Web - W3C
In addition to the classic “Web of documents” W3C is helping to build a technology stack to support a “Web of data,” the sort of data you find in databases. The ultimate goal of the Web of data is to enable computers to do more useful work and to d
www.w3.org
📝[참고] 시맨틱 웹(Semantic Web) - gascoigne.log
시맨틱 웹(Semantic Web)
시맨틱 웹은 직역하면 의미론적인 웹 이다. 즉, 문서의 의미에 맞게 어플리케이션의 의미에 맞게 구성 된 웹이다. 컴퓨터가 사람을 대신하여 정보를 읽고, 이해하고 가공하여 새로운 정보를 만
velog.io
Semantic Web : 문서의 의미에 맞게 구성된 웹
다시 말해, 컴퓨터가 정보를 분석해 의미있는 자료를 추출해 웹 상에 보여줄 수 있는 웹
위에서 나온 <h1> 헤더 태그는 태그된 컨텐츠가 제목임을 컴퓨터가 인지하고 제목으로서 보일 수 있게 한다.
- header : <h1> 태그로 싸인 컨텐츠가 웹 페이지의 헤더(간판)임을 더 명확하게 하려면 <header> 태그로 감싸면 된다.
- article : 반대로 <h2> 태그된 "변수와 상수" 밑 쪽은 이 웹페이지의 본문에 해당하므로 "본문" 의미를 드러내려면 <article> 태그로 감싸면 된다. 컴퓨터가 <article>태그된 부분을 본문으로 인지하고 웹을 구성하게 된다.
이것처럼 의미를 컴퓨터가 이해하고 그 의미에 맞게 웹 구성을 하게 하는 것이 시맨틱 웹이다.
위의 결과물 이미지에서 JavaScript란? 등의 리스트 항목을 클릭했을 때
링크된 페이지로 이동하게 하는 의미를 부여하려고 한다.
이때 쓰는 태그가 <nav> (navigation)태그다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>JavaScript</h1>
</header>
<nav>
<ol>
<li>JavaScript란?</li>
<li>변수와 상수</li>
<li>연산자</li>
</ol>
</nav>
<article>
<h2>변수와 상수</h2>
변수란
<ul>
<li>변하는 값</li>
<li>x=10일 때 왼쪽 항...</li>
</ul>
</article>
</body>
</html>물론 nav만 추가해서는 링크되지 않는다. a 태그를 써서 링크를 걸어준다.
4. 각 페이지 끼리 연결하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
<li><a href="http://localhost/page_op.html">연산자</a></li>
</ol>
</nav>
</body>
</html>이제 위와 같이 폼을 다시 작성해준다.
웹페이지 제목으로 들어가는 "JavaScript"는 클릭하면 메인화면으로 돌아올 수 있게 localhost(=index.html)을 링크하고,
리스트의 각 항목에는 각각의 주소를 적어 링크를 걸어준다. 각 항목을 클릭하면 각각 항목 페이지로 이동할 수 있다.
page_html.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
<li><a href="http://localhost/page_op.html">연산자</a></li>
</ol>
</nav>
<article>
<h2>JavaScript란?</h2>
JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
</article>
</body>
</html>page_vc.html 와 page_op.html 는 위에서 article 부분만 수정하면 된다.
이제 각 페이지에서 다른 페이지로 클릭으로 이동이 가능해졌다.
각 페이지의 리스트 항목과 본문으로 나름 웹페이지로서 구색을 갖출 수 있었다.
'개발 > Web' 카테고리의 다른 글
| [CSS] CSS 찍먹해보기2 | link 태그 - css 파일 링크하기 (0) | 2021.05.25 |
|---|---|
| [CSS] CSS 찍먹해보기1 | style 태그 (0) | 2021.05.24 |
| [HTML] HTML 찍먹해보기1 | a tag, li tag (0) | 2021.05.16 |
| [Web] Apache, PHP, MySQL 제어판 - Bitnami Manager (0) | 2021.05.15 |
| [Web] 윈도우에 웹서버 설치하기 Bitnami / 웹문서 만들기 (0) | 2021.05.14 |
