아톰 Atom Editor를 이용하여 간단한 홈페이지 구조를 만들어 보겠습니다.
우선 새로운 파일을 생성합니다. 새로운 파일을 만들 때 반드시 확장자명을. html로 지정해주세요. 파일 이름은 1.html로 하였습니다. 아래와 같이 홈페이지의 기본 구조를 작성합니다. 처음 작성한 이 html 문서를 랜딩페이지로 사용하겠습니다. 아톰 에디터에 작성할 코드 내용은 아래에서 참조해주세요.
<! DOCTYPE html>
<html>
<head>
<title> Web page - sample </title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html"> WEB </a></h1>
<ol>
<li><a href="1.html"> html page </a></li>
<li><a href="2.html"> CSS page </li>
<li><a href="3.html"> JavaScript page <li>
</ol>
<h2> html </h2>
</body>
</html>
최상위 개념인 <html> </html> 태그로 구조의 아우트라인을 잡고, 그 안에 하위 개념의 태그를 작성합니다. <head> </head> 부분과 <body < </body> 부분을 차례로 작성합니다. 이제 대분류 목차는 정해졌습니다.
<head> 태그 내용 작성하기
랜딩페이지의 제목을 <head> 영역 안에 있는 <title> 태그에 작성합니다. 저는 Web page - sample이라고 작성하였습니다. 그리고 본 파일이 문자 규약인 utf-8로 작성되었음을 <meta> 태그에 작성합니다. 한글 등 다른 언어를 사용하더라도 utf-8에 의해 인코딩이 되어 웹 브라우저가 문제없이 인식할 수 있습니다.
<body> 태그 내용 작성하기
WEB이라는 글자에 <a> 태그를 이용해 링크를 연결합니다. 참조할 파일의 경로는 index.html로 작성합니다. WEB이라는 글자는 본문 내용 중 가장 상위 개념을 갖습니다. <h1> 태그를 사용해 제목으로 정의합니다.
홈페이지의 메뉴 리스트를 만듭니다. html page, CSS page, JavaScript page 총 3 가지 메뉴 내용을 정했습니다. <ol> 태그와 <li> 태그를 사용해 1개의 리스트 그룹을 묶어줍니다. <ol> 태그를 사용해 번호가 달린 리스트가 만들어졌습니다. 각 메뉴 내용에 WEB에서 링크를 연결한 것과 마찬가지로 하이퍼링크를 연결합니다.
여기까지 랜딩페이지를 만들었다면, 이제 이 파일을 duplicate (복제) 합니다. <a> 태그가 참조할 파일을 만들기 위해 복제가 필요합니다. index 파일과 3 가지 메뉴를 위해 총 4개의 복제한 파일이 필요합니다. 위에서 <a> 태그마다 참조할 파일 이름을 임의 지정해 놓았습니다. 해당 파일 이름을 복제한 파일의 이름으로 수정해줍니다. 이제 랜딩페이지에서 링크를 클릭하여 이동할 수 있는 개별 페이지가 생성된 것입니다.
링크로 연결해서 이동할 개별 페이지의 내용을 각각 수정합니다.
<head> 영역의 타이틀을 수정합니다. 최초 작성 시 Web page - sample이라고 작성한 값을 index tap , html tap 등 페이지 속성에 맞추어 수정합니다. <body> 본문 내용의 가장 아래 <h2> html </h2>로 작성한 부분을 페이지 내용에 맞게 새로 작성합니다. 작성한 텍스트는 본문에서 어떤 내용을 다룰지 안내하는 머리말 키워드 역할을 하게 됩니다. 전체적인 윤곽 작성이 완료되었습니다. 방금 수정한 머리말 키워드 아래 본문 내용을 작성합니다. <p> </p> 태그를 사용해 텍스트 콘텐츠 등을 본 내용으로서 입력합니다.
'코딩' 카테고리의 다른 글
| Web1 , Web2 html 문법과 기타 유용한 태그 (0) | 2020.08.27 |
|---|---|
| internet 인터넷과 web 웹 (0) | 2020.08.26 |
| 앵커 태그 anchor <a> 를 이용해 링크달기 (0) | 2020.08.22 |
| 웹 페이지의 기본 구조와 인코딩 위한 utf 8 (0) | 2020.08.22 |
| li 태그, ul 태그, ol태그로 순서대로 목차 만들기 (0) | 2020.08.22 |
댓글