HTML실습
최종적으로 만들 페이지.
제목을 나타내는 태그 <hx> x는 숫자이다.
<h1> -> 진하게 글씨가 나온다.
<h2> -> <h1> 보다 작은 글씨가 나온다.
태그 없이 쓰면 앏게 나온다.
중간실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8 /">
</head>
<body>
<h1>JavaScript</h1>
<ol>
<li>JavaScript란</li>
<li>변수와상수</li>
<li>연산자</li>
</ol>
</body>
</html>
정보의 전달을 위한 것이 html이라는 것을 상기하면서 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8 /">
</head>
<body>
<h1>JavaScript</h1>
<ol>
<li>JavaScript란</li>
<li>변수와상수</li>
<li>연산자</li>
</ol>
<h2>변수와 상수</h2>
변수란
<ul>
<li>변하는 값</li>
<li>x=10일 때 왼쪽항</li>
</ul>
</body>
</html>
html 코드화 한다 = Markup 한다.
의미론적인 웹
Semantic Web
웹에서 html이 차지하는 것은 정보
디자인적인 측면은 CSS로 분리
html 정보를 더욱 잘 들어내게 하는 것들 => Semantic Web
문서를 탐색하는 역할을 하는 정보 네비게이션
<ol>
<li>JavaScript란</li>
<li>변수와상수</li>
<li>연산자</li>
</ol>
문서에서 본문에 해당되는 내용 컨텐츠
<ul>
<li>변하는 값</li>
<li>x=10일 때 왼쪽항</li>
</ul>
두 내용은 성격이 다르다
<nav>
기계들 입장에서 안에있는 list들이 navigation의 역할을 하는 것임을 분명히 알 수 있다.
어떤 기능이 있는 태그는 아니다. but navigate하는 역할의 내용이라는 것은 분명히 알 수 있음 => 의미론적인 웹
<header>
<h1>으로 감싸져 있던 내용은 문서의 간판에 해당되는 내용임. 여기에는 <header> 태그를 달아서 더 분명히 할 수 있다.
<article>
본문에 해당되는 내용은 <article> 태그로 감싸서 의미를 더 분명히 할 수 있다.
사이트 완성
index.html => 대문 페이지라는 약속이 되어있음. (Default)
1,2,3 리스트를 클릭하면 해당하는 정보를 나타내는 article 이 나오도록 만들기.
link를 넣기 위해
<a herf=""> 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8 /">
</head>
<body>
<header>
<h1>JavaScript</h1>
</header>
<nav>
<ol>
</ol>
</nav>
</body>
</html>
다음 link의 내용을 추가.
제목을 누르면 index.html로 갈 수 있도록 링크를 추가.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8 /">
</head>
<body>
<header>
</header>
<nav>
<ol>
</ol>
</nav>
<article>
<h2>연산자</h2>
연산자는 계산을 할 때 사용되는 것 입니다.
</article>
</body>
</html>
'웹 프로그래밍' 카테고리의 다른 글
| CSS 이론1 (0) | 2017.12.16 |
|---|---|
| 개발도구 - 아톰 (0) | 2017.12.16 |
| HTML 문법 - 태그의 중첩 (0) | 2017.12.14 |
| HTML 이론 - HTML의 기본문법과 속성 (0) | 2017.12.12 |
| 수업소개 ~ 서버와 클라이언트 (0) | 2017.12.04 |