모든 저작권은 <생활코딩>의 생산자인 <egoing>님에게 있습니다.
문제시, 비공개로 전환하겠습니다.
정보 = HTML
TextEdit로 코딩을 시작하고 htdocs에 저장한다.
ex) index.html 작성
<!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> </head> <body> JavaScript <h1>JavaScript</h1> <h2>JavaScript</h2> </body> </html> |
<h1>JavaScript</h1>
<h1> 태그 텍스트가 더 진하게 표시된다.
<h2>는 <h1>보다 작지만 Bold상태가 된다.
ex 2) list 작성
<!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> </head> <body> <h1>JavaScript</h1> <ol> <li>JavaScript란?</li> <li>변수와 상수</li> <li>연산자</li> </ol> </body> </html> |
ex 3) 소제목
<h2> </h2> 태그를 사용한다.
<!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> </head> <body> <h1>JavaScript</h1> <ol> <li>JavaScript란?</li> <li>변수와 상수</li> <li>연산자</li> </ol> <h2>변수와 상수</h2> </body> </html> |
ex 4) 소제목 내용 추가
<!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> |
이게 다 끝나면 "Markup이 끝났다." 라고 말하기도 한다.
- 의미가 잘 드러나는 웹 (Semantic Web) -
HTML = 정보
HTML이 정보로서의 역할을 수행하기위해서 HTML은 계속 변화해왔다.
그 중 하나가 디자인을 담당하는 태그들이 CSS 등으로 분가된 점이다.
XHTML -> .... -> HTML 5 (현재)
<!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> | 네비게이션 |
<nav> <ol> <li>JavaScript란?</li> <li>변수와 상수</li> <li>연산자</li> </ol> </nav> |
|
문서의 컨텐츠 | |
<ul> <li>변하는 값</li> <li>x=10일때 왼쪽함——</li> </ul>
|
<nav> </nav>는 어떤 기능이 있다고볼 순 없다. 다만, 약속되어있는 태그를 씀으로써
컴퓨터가 <nav>안에있는 내용은 내비게이션을 위한 것임을 의미론적으로 확실히 이해할 수 있다.
<!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> </head> <body> <h1>JavaScript</h1> <nav> <ol> <li>JavaScript란?</li> <li>변수와 상수</li> <li>연산자</li> </ol> </nav> <h2>변수와 상수</h2> 변수란 <ul> <li>변하는 값</li> <li>x=10일때 왼쪽함——</li> </ul> </body> </html> |
<!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> | <header> 간판 역할 <article> 내용물 |
- 사이트 완성 -
1. 웹사이트의 대문페이지를 만든다. 대문은 주로 index.html이라는 이름을 갖는다.
index.html은 특수한 파일이다. index.html은 대문페이지다 라는 약속이 되어있는 페이지이다.
url에 localhost:8080 치거나 localhost:8080/index.html을 쳐도 같은 사이트가 뜬다.
웹사이트는 url에 도메인을 치면 자동으로 index.html를 띄운다.
- 대문에는 무슨 내용이 있나? -
Order list를 만들고 안에 변수,상수 내용은 띄어주지 말자. (article 영역)
index.html |
<!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> </head> <body> <header> <h1>JavaScript</h1> </header> <nav> <ol> <li><a href="http://localhost:8080/page_html.html">JavaScript란?</a></li> <li><a href="http://localhost:8080/page_vc.html">변수와 상수</a></li> <li><a href="http://localhost:8080/page_op.html">연산자</a></li> </ol> </nav> </body> </html> |
page_html.html |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <header> <h1><a href="http://localhost:8080/">JavaScript</a></h1> </header> <nav> <ol> <li><a href="http://localhost:8080/page_html.html">JavaScript란?</a></li> <li><a href="http://localhost:8080/page_vc.html">변수와 상수</a></li> <li><a href="http://localhost:8080/page_op.html">연산자</a></li> </ol> </nav> <article> <h2>JavaScript란?</h2> JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다. </article> </body> </html> |
page_vc.html |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <header> <h1><a href="http://localhost:8080/">JavaScript</a></h1> </header> <nav> <ol> <li><a href="http://localhost:8080/page_html.html">JavaScript란?</a></li> <li><a href="http://localhost:8080/page_vc.html">변수와 상수</a></li> <li><a href="http://localhost:8080/page_op.html">연산자</a></li> </ol> </nav> <article> <h2>변수와 상수</h2> 변수는 바뀔 수 있는 값이고, 상수는 바뀌지 않는 값입니다. </article> </body> </html> |
page_op.html |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <header> <h1><a href="http://localhost:8080/“>JavaScript</a></h1> </header> <nav> <ol> <li><a href="http://localhost:8080/page_html.html">JavaScript란?</a></li> <li><a href="http://localhost:8080/page_vc.html">변수와 상수</a></li> <li><a href="http://localhost:8080/page_op.html">연산자</a></li> </ol> </nav> <article> <h2>연산자</h2> 계산을 할 때 사용되는 것입니다. </article> </body> </html> |
댓글