우리는 지금 html로 하드코딩을 배우고 있다 😎 너무 힘들다 ㅠㅠㅠ
아직 익숙하지 않아서 그런걸 잘알고 있지만 나만 뒤처지는 거 같아서 우울하다😥
컴퓨터 언어 중에서 html이 제일 쉬운 부분이라고 들었지만 나한테는 전혀 아닌 듯한 느낌이다 ㅎㅎ..
요번에는 웹 사이트와 웹 페이지의 구조에 대해 알아보았다 항상 수업할 때는 잘 이해가 되지 않았는데 복습하면서 아!! 말씀하셨던 게 이런거였구나! 하면서 뒤늦게 깨닫는다 ,, 복습이 역시 최고다!!
이번엔 코딩한 부분과 함께 부연 설명을 할 것이다!
웹 사이트의 구성
아래는 index.html으로 사이트의 첫시작 페이지이다.
여기서 사이트란, 웹 페이지의 모임을 뜻한다.
즉 index.html 이외 main.html, sign-up.html...등 여러 html 파일이 모여있는 그룹이라 생각하면 쉽다.
웹 사이트를 구성하는 기본적인 페이지는 index.html / main.html / login.html / sign-up.html ... 등이다.
↓ index.html은 "무슨 모임인지 사용자들에게 크게 홍보하는 페이지"이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Index Page</title>
</head>
<body>
<!-- header 영역 -->
<header>
<hr>
<a href="index.html">D-TRAVEL</a>
<ul>
<!-- 상대 경로 -->
<li><a href="./src/main.html">메인</a></li>
<li><a href="./src/login.html">로그인</a></li>
<li><a href="./src/sign-up.html">회원가입</a></li>
</ul>
<hr>
</header>
<!-- container, body 영역 -->
<section>
<h1>D-TRAVEL</h1>
<p>D-Travel은 대구의 행복을 구매하세요</p>
<article>
<table>
<table>
<tr>
<td>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/83_Tower.jpg/275px-83_Tower.jpg" alt="임시 이미지1"
title="임시 이미지1">
</td>
<td>
<img src="https://www.dbeway.co.kr/_UPLOAD/IMAGE/TravelPoint/TravelMain/2016/12/El5NFpGmgKDtpZSU.JPG" alt="임시 이미지2"
title="임시 이미지2" width="420px">
</td>
<td>
<img src="https://ww.namu.la/s/a73fb64f3453b012cd880e4d515365fb1ae6c19133cff17d629b89e1307acbf2294ce53b394a776a2c9867693d576f674ba62806bfa90672b62f37ee12a5eb4fde9423845816cb254aed89170dfe4ee0b8bc165d817d5510cb2a5deb57905de7c5b248fdbd829f54791ff8e5ae41d872" alt="임시 이미지3"
title="임시 이미지3" width="420px" height="200px">
</td>
</tr>
</table>
</table>
</article>
</section>
<!-- footer 영역 -->
<footer>
<hr>
<address>
<p>Address : 대구광역시 중구 1424 그린빌딩 16F</p>
Tell:<a href="tel : 054) 111-9121">tel:054)111-9121</a><br>
E-mail:<a href="hans.park.dev@dtravel.com">hans.park.dev@dtravel.com</a><br>
© <b>All right reserve.</b>
</address>
<hr>
<hr>
</footer>
</body>
</html>웹 페이지의 구성
웹 페이지는 하나의 사람이라고 생각하면 쉽다. 영어로도 head body footer로, 머리 몸 발이다.
각각 하는 일은 아래와 같다.
head : 해당 페이지의 로고,메뉴 등 제일 먼저 보여줘야하는 부분
body : 해당 페이지의 내용, 컨텐츠
footer : 업체의 연락처, 대표, 사업자, 주소 및 연락처등을 작성하는 구간
이러한 구성으로 웹 페이지를 작성하여 구동시킨다.
↓ index.html의 완성본 ↓
↓login.html은 사용자가 로그인을 하기 위한 페이지이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>login Page</title>
</head>
<body>
<!-- header 영역 -->
<header>
<hr>
<!-- 상위폴더를 갈때는 ../를 사용 -->
<a href="../index.html">D-TRAVEL</a>
<ul>
<!-- 상대 경로 -->
<li><a href="main.html">메인</a></li>
<li><a href="login.html">로그인</a></li>
<li><a href="sign-up.html">회원가입</a></li>
</ul>
<hr>
</header>
<!-- container, body 영역 -->
<section>
<h1>로그인 화면</h1>
<form action="./main.html">
<fieldset>
<legend>로그인</legend>
<p>
<label for="">ID :</label>
<input type="text" name="member-id" id="member-id" required>
</p>
<p>
<label for="">PW :</label>
<input type="password" neme="member-pw" id="member-pw" required>
</p>
<button><a href="sign-up.html">
회원가입</a></button>
<input type="submit" value="로그인">
</fieldset>
</form>
</section>
<!-- footer 영역 -->
<footer>
<hr>
<address>
<p>Address : 대구광역시 중구 1424 그린빌딩 16F</p>
Tell:<a href="tel : 054) 111-9121">tel:054)111-9121</a><br>
E-mail:<a href="hans.park.dev@dtravel.com">hans.park.dev@dtravel.com</a><br>
© <b>All right reserve.</b>
</address>
<hr>
<hr>
</footer>
</body>
</html>** required를 사용하기 위해선 반드시 input의 타입이 submit(폼 전송 속성)을 사용하여야 하며, 전송 후, 다른 웹 페이지로 넘어가게 하기 위해선 <form action="링크">를 사용한다.
*** html 언어의 이름을 작성할 때, 띄어쓰기는 -, _로 대체해야한다.(띄어쓰기를 할 시, 두개로 인식이 되기 때문)
↓login.html 완성본↓
↓ sign-up.html은 사용자가 회원가입을 할 수 있게 제작된 페이지이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>sign Page</title>
</head>
<body>
<!-- header 영역 -->
<header>
<hr>
<a href="../index.html">D-TRAVEL</a>
<ul>
<!-- 상대 경로 -->
<li><a href="main.html">메인</a></li>
<li><a href="login.html">로그인</a></li>
<li><a href="sign-up.html">회원가입</a></li>
</ul>
<hr>
</header>
<!-- container, body 영역 -->
<section>
<h1>회원가입 화면</h1>
<form action="main.html">
<fieldset>
<legend>회원가입</legend>
<p>
<label for="member-id">아이디 :</label>
<br>
<input type="text" name="member-id" id="member-id" required>
</p>
<p>
<label for="member-pw">비밀번호 :</label>
<br>
<input type="password" name="member-pw" id="member-pw" required>
</p>
<p>
<label for="member-pw-check">비밀번호 확인 :</label>
<br>
<input type="password" name="member-pw-check" id="member-pw-check" required>
</p>
<p>
<label for="member-name">이름 :</label>
<br>
<input type="text" name="member-name" id="member-name">
</p>
<p>
<label for="year-month">생년월일 :</label>
<br>
<input type="month" name="year-month" id="year-month">
</p>
<p>
<label for="gender">성별 :</label>
<br>
<input type="radio" name="gender" id="female">
<label for="female">여성</label>
<input type="radio" name="gender" id="male">
<label for="male">남성</label>
</p>
<p>
<label for="mobile">H.P</label>
<br>
<select name="mobile" id="mobile" required>
<option value="">선택</option>
<option value="korea">대한민국 +82</option>
<option value="nepal">네팔 +977</option>
<option value="norway">노르웨이 +47</option>
</select>
-
<input type="tel" name="mobile-first" id="mobile-first" required maxlength="3">
-
<input type="tel" name="mobile-second" id="mobile-second" required maxlength="4">
-
<input type="tel" name="mobile-third" id="mobile-third" required maxlength="4">
</p>
</fieldset>
<input type="submit" value="가입하기">
</form>
</section>
<!-- footer 영역 -->
<footer>
<hr>
<address>
<p>Address : 대구광역시 중구 1424 그린빌딩 16F</p>
Tell:<a href="tel : 054) 111-9121">tel:054)111-9121</a><br>
E-mail:<a href="hans.park.dev@dtravel.com">hans.park.dev@dtravel.com</a><br>
© <b>All right reserve.</b>
</address>
<hr>
</footer>
</body>
</html>
↓sign-up.html 완성본↓
↓ main.html은 웹 사이트의 핵심 또는 중심 내용이 들어간 페이지라 생각하면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>main Page</title>
</head>
<body>
<!-- header 영역 -->
<header>
<hr>
<a href="../index.html">D-TRAVEL</a>
<ul>
<!-- 상대 경로 -->
<li><a href="main.html">메인</a></li>
<li><a href="login.html">로그인</a></li>
<li><a href="sign-up.html">회원가입</a></li>
</ul>
<hr>
</header>
<!-- container, body 영역 -->
<section>
<table border width="50%">
<thead>
<tr>
<th>수성못</th>
<th>두류공원</th>
<th>앞산</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="travel-info.html">
<img src="http://www.dbeway.co.kr/_UPLOAD/IMAGE/TravelPoint/TravelMain/2016/12/fddViCMed2AYSAF1.JPG" alt="임시 이미지1"
title="메인 이미지1" width="300px">
</a>
</td>
<td>
<img src="https://www.kbmaeil.com/news/photo/202004/843403_858828_2118.jpg" alt="임시 이미지2"
title="메인 이미지2" width="300px">
</td>
<td>
<img src="https://img4.yna.co.kr/photo/yna/YH/2016/04/21/PYH2016042112970005300_P4.jpg" alt="임시 이미지3"
title="메인 이미지3" width="300px">
</td>
</tr>
<tr>
<td>
구하기 가슴에 얼음에 능히 청춘은 남는 스며들어 천자만홍이 쓸쓸하랴?
커다란 우리 뼈 이 살 하는 이것이다. 능히 미묘한 있는 현저하게 옷을 있다.
몸이 천고에 찾아다녀도, 인생을 끓는 피고 것이다. 설레는 시들어 인생의 그들의 때까지
행복스럽고 사막이다. 같이 있음으로써 풀이 고동을 귀는 실로 천지는 소담스러운 두손을
교향악이다. 동산에는 그러므로 그들에게 방지하는 기쁘며, 구하지 그것은 것이다.보라,
그와 것이다. 고행을 모래뿐일 바이며, 인생에 기쁘며, 대한 원질이 군영과 끓는 있으랴?
청춘은 못하다 넣는 천고에 이 얼마나 속에서 못할 아름다우냐? 청춘의 심장은 찾아다녀도,
가지에 풍부하게 방황하여도, 싶이 거친 그들에게 이것이다. 방황하여도, 자신과 찬미를
노래하며 봄날의 열락의 내는 광야에서 철환하였는가?
</td>
<td>
구하기 가슴에 얼음에 능히 청춘은 남는 스며들어 천자만홍이 쓸쓸하랴?
커다란 우리 뼈 이 살 하는 이것이다. 능히 미묘한 있는 현저하게 옷을 있다.
몸이 천고에 찾아다녀도, 인생을 끓는 피고 것이다. 설레는 시들어 인생의 그들의 때까지
행복스럽고 사막이다. 같이 있음으로써 풀이 고동을 귀는 실로 천지는 소담스러운 두손을
교향악이다. 동산에는 그러므로 그들에게 방지하는 기쁘며, 구하지 그것은 것이다.보라,
그와 것이다. 고행을 모래뿐일 바이며, 인생에 기쁘며, 대한 원질이 군영과 끓는 있으랴?
청춘은 못하다 넣는 천고에 이 얼마나 속에서 못할 아름다우냐? 청춘의 심장은 찾아다녀도,
가지에 풍부하게 방황하여도, 싶이 거친 그들에게 이것이다. 방황하여도, 자신과 찬미를
노래하며 봄날의 열락의 내는 광야에서 철환하였는가?
</td>
<td>
구하기 가슴에 얼음에 능히 청춘은 남는 스며들어 천자만홍이 쓸쓸하랴?
커다란 우리 뼈 이 살 하는 이것이다. 능히 미묘한 있는 현저하게 옷을 있다.
몸이 천고에 찾아다녀도, 인생을 끓는 피고 것이다. 설레는 시들어 인생의 그들의 때까지
행복스럽고 사막이다. 같이 있음으로써 풀이 고동을 귀는 실로 천지는 소담스러운 두손을
교향악이다. 동산에는 그러므로 그들에게 방지하는 기쁘며, 구하지 그것은 것이다.보라,
그와 것이다. 고행을 모래뿐일 바이며, 인생에 기쁘며, 대한 원질이 군영과 끓는 있으랴?
청춘은 못하다 넣는 천고에 이 얼마나 속에서 못할 아름다우냐? 청춘의 심장은 찾아다녀도,
가지에 풍부하게 방황하여도, 싶이 거친 그들에게 이것이다. 방황하여도, 자신과 찬미를
노래하며 봄날의 열락의 내는 광야에서 철환하였는가?
</td>
</tr>
</tbody>
</table>
</section>
<!-- footer 영역 -->
<footer>
<hr>
<address>
<p>Address : 대구광역시 중구 1424 그린빌딩 16F</p>
Tell:<a href="tel : 054) 111-9121">tel:054)111-9121</a><br>
E-mail:<a href="hans.park.dev@dtravel.com">hans.park.dev@dtravel.com</a><br>
© <b>All right reserve.</b>
</address>
<hr>
<hr>
</footer>
</body>
</html>
↓main.html 완성본↓
이렇게 웹 사이트와 웹 페이지에 대한 구조를 알아보았다!
이런식으로 웹 페이지를 만들고, 웹 사이트를 만든다는 것이 신기했고 프로젝트에 따라 웹 페이지가 수백개에서 수천개까지 제작되는 웹 사이트가 있다고 한다. 그런 사이트가 아마 지금 내가 쓰고 있는 이런 블로그가 아닐까 싶다 🙄🙄
사용자였을 때는 편리하고 쉽게 사용하고 있기 때문에 컴퓨터 언어가 그렇게 힘든거라곤 생각한 적 없었는데 이렇게 직접 배우니 많은 사람들이 고생해서 만들었겠구나 싶다 !! 더욱 감사하며 웹을 사용해야겠다는 마음이 든다!!
'웹 > HTML' 카테고리의 다른 글
| [코딩 공부_10] <button> vs <input type="button">, 둘의 차이는? (0) | 2021.02.23 |
|---|---|
| [코딩 공부_09] DEFLIX 완성하기 (0) | 2021.02.22 |
| [코딩 공부_07] form 태그 사용하기 (0) | 2021.02.17 |
| [코딩 공부_06] HTML로 위키피디아 페이지 만들기! (0) | 2021.02.16 |
| [코딩 공부_05] HTML의 각종 태그들 정리 (0) | 2021.02.15 |
댓글