2020. 4. 1. 10:32ㆍ생활코딩/생활코딩웹
개요
이번에는 이전에 배웠던 html에 대한 기초적인 문법적 이해를 바탕으로 해서 html을 실제로 적용해볼 것입니다
실습 1 모델링 만들기
이번에는 <ol> 태그와 <ul> 태그 그리고 <h> 태그 등을 사용하여 메뉴 리스트를 표현할 것입니다.
처음에는 메모장에 기본적이 틀을 구성해주며 저장할 때에는 index.html로 Bitnami에서 apache2\htdocs에 저장을 해줍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>그 후 body안에 javascript를 입력한 후 <h> 태그를 사용할 것입니다 여기서 <h> 태그는 제목을 표현해주는 태그로 1~6의 숫자를 지니며 숫자가 커질수록 글자의 크기가 줄어듭니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Javascript</h1>
<h2>Javascript</h2>
<h3>Javascript</h3>
<h4>Javascript</h4>
<h5>Javascript</h5>
<h6>Javascript</h6>
</body>
</html>
이렇게 제목을 작성하고 다음으로 리스트를 만드는데 처음에는 순서가 표시되는 <ol> 태그를 사용하여 리스트를 작성해봅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Javascript</h1>
<ol>
<li>자바스크립트란?</li>
<li>변수와 상수</li>
<li>연산자</li>
</ol>
</body>
</html>
위의 화면처럼 출력되면 다음으로 <h2> 태그와 <ul> 태그를 사용하여 순서가 없는 태그를 작성해봅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Javascript</h1>
<ol>
<li>자바스크립트란?</li>
<li>변수와 상수</li>
<li>연산자</li>
</ol>
<h2>변수와 상수</h2>
변수란
<ul>
<li>변하는 값</li>
<li>x = 10일떄왼쪽항... </li>
</ul>
</body>
</html>
이렇게 되면 완성!
실습 2 시멘틱 웹
시 멘틱웹란 정보들의 의미가 좀 더 잘 드러나게 하는 태그를 사용하는 웹이라고 생각하시면 됩니다
여기서 사용할 태그들은 <header> <nav> <article>를 사용할 것입니다.
<header> 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Javascript</h1>
</header>
</body>
</html><header> 태그는 제목이라고 부여하는 것입니다 이렇게 지정해두면 javascript는 제목이다 라는 것을 컴퓨터에게 명확히 알려줄 수 있는 것입니다.
<nav> 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Javascript</h1>
</header>
<nav>
<ol>
<li>자바스크립트란?</li>
<li>변수와 상수</li>
<li>연산자</li>
</ol>
</nav>
</body>
</html><nav> 태그는웹사이트를 탐색하게 되는 정보라는 것이라고 부여한 것입니다.
<article> 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Javascript</h1>
</header>
<nav>
<ol>
<li>자바스크립트란?</li>
<li>변수와 상수</li>
<li>연산자</li>
</ol>
</nav>
<article>
<h2>변수와 상수</h2>
변수란
<ul>
<li>변하는 값</li>
<li>x = 10일떄왼쪽항... </li>
</ul>
</article>
</body>
</html><article> 태그는 본문의 해당되는 정보를 좀도 의미론적으로 잘 드러나게 하는 태그입니다.
화면상에서는 아까 전에 했던 것과 다르지는 않지만 컴퓨터상에서는 구간을 나누어 각각의 의미를 부여했다는 것을 컴퓨터에게 알려줄 수 있습니다.
실습 3 링크 연결
마지막으로 <nav> 태그 안에 있는 메뉴들과 <header> 각각 링크를 달아줄 것입니다
3군데의 웹서버를 이동하기 위하여 파일을 더 만듭니다
3개의 파일을 만든 뒤에apache2\htdocs에 저장을 한 후 실행하여 봅니다
처음에는 메인 페이지인 localhost에서 <header> 태그 안에 있는 정보도 localhost라고 지정하여 index.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/javascript.html">자바스크립트란?</a></li>
<li><a href="http://localhost/varandcon.html">변수와 상수</a></li>
<li><a href="http://localhost/operator.html">연산자</a></li>
</ol>
</nav>
</body>
</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/javascript.html">자바스크립트란?</a></li>
<li><a href="http://localhost/varandcon.html">변수와 상수</a></li>
<li><a href="http://localhost/operator.html">연산자</a></li>
</ol>
</nav>
<article>
<h2>JavaScript란?</h2>
JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
</article>
</body>
</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/javascript.html">자바스크립트란?</a></li>
<li><a href="http://localhost/varandcon.html">변수와 상수</a></li>
<li><a href="http://localhost/operator.html">연산자</a></li>
</ol>
</nav>
<article>
<h2>변수와 상수</h2>
변수는 바뀔 수 있는 값이고, 상수는 바뀌지 않는 값입니다.
</article>
</body>
</html>
마지막으로 연산자를 누를 시 연산자의 정보가 담긴 글이 나오게됩니다 그리고 모든페이지에서 javascript를 누를시 메인 페이지인 index.html로 넘 거 가게 됩니다
'생활코딩 > 생활코딩웹' 카테고리의 다른 글
| CSS 이론 (0) | 2020.04.01 |
|---|---|
| 개발도구 (0) | 2020.04.01 |
| HTML 이론 (0) | 2020.04.01 |
| 서버 제어 와 프로그래밍 언어 (0) | 2020.03.31 |
| 윈도우에 웹서버 설치 (0) | 2020.03.31 |