웹 페이지 기본 구조
#01. HTML이란?
1) HTML = Hyper Text + Markup + Language
- 웹 브라우저를 통해 사용자에게 보여질 문서를 작성하기 위한 마크업 언어.
- HTML은 본문을 위한 구조적 의미를 나타내는 것 뿐만 아니라 링크, 인용과 그 밖에 항목으로 구조적 문서를 만들 수 있는 방법을 제공
- 이미지와 객체를 내장하고 대화형 양식을 생성한는 데 사용가능.
2) Markup
- 프로그램 코드 상에서 내용을 강조하기 위한 처리 기법.
- 강조할 내용을 태그(TAG)라는 단위로 감싸고, 태그에는 단어를 강조하는 목적을 기술한다.
3) HTML 태그
- HTML에서는 각 상황에 따른 태그를 미리 약속해 놓고, 특정 태그에 의해 감싸진 내용에 웹 브라우저가 그래픽을 적용하여 화면에 표현하도록 정의되어 있다.
#02. HTML 페이지의 기본구조
1) HTML 페이지의 기본 구성
버전 표시를 위한 DTD 선언문 명시
- ~ 안에 모든 내용 기술
2) HTML 태그의 특징
- 시작과 끝 태그가 존재하고 그 사이에 내용이 포함
<TAG> ... 포함할 내용 ... </TAG>
- 내용을 포함하지 않는 태그는 괄호 직전에 “/” 표시를 한다.
<TAG />
<TAG 속성="값" 속성="값"> ... 포함할 내용 ... </TAG>
- 많은 HTML 속성들이 CSS와 중복된다.
- W3C에서는 이 경우 가급적 CSS에서 처리하는 것을 권장
3) 태그 안에 명시할 내용들
- 태그는 HTML 문서의 설정 사항이나 CSS, Javascript와 같이 HTML 구조에서 참조하기 위한 다른 언어를 명시하는 부분이다.
| 태그 |
설명 |
|
HTML 페이지의 설정을 웹 브라우저에게 알려주기 위해서 사용한다. |
| </td>
<td>문서 제목을 브라우저의 타이틀바나 탭에 표시하기 위해서 사용한다.</td>
</tr>
<tr>
<td><style></td>
<td>HTML을 꾸미기 위한 CSS언어를 기술하기 위해서 사용한다.</td>
</tr>
<tr>
<td><link></td>
<td>CSS언어를 별도로 명시한 외부 파일을 연결한다.</td>
</tr>
<tr>
<td><script></td>
<td>HTML을 제어하기 위한 Javascript를 기술하거나 외부 Javascript 파일을 명시하기 위해서 사용한다.</td>
</tr>
</tbody></table>
<h3>4) <head> 태그 안에 명시할 내용들</h3>
<ul>
<li>반드시 명시해야 하는 <meta> 태그<ul>
<li>웹 브라우저에게 현재 문서의 형식과, 저장시에 사용된 인코딩(파일의 저장 형식) 값을 알려준다.</li>
<li>ANSI(euc-kr), UTF-8</li>
</ul>
</li>
</ul>
<pre><code class="language-html"><!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->
<head>
<!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
<meta charset="utf-8" />
<!--IE의 호환성 보기 모드 금지-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 스마트 장치에서의 해상도 균일화 처리-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!--브라우저에 표시될 문서 제목-->
<title>My Web Page</title>
</head>
<!-- 브라우저에 보여질 부분 -->
<body>
Hello HTML
</body>
</html></code></pre>
<h4>작성 결과</h4>
<p>Hello HTML</p></div>
<!-- System - START -->
<!-- System - END -->
<div class="container_postbtn #post_button_group">
<div class="postbtn_like"><script>window.ReactionButtonType = 'reaction';
window.ReactionApiUrl = '//sanghyeokyun.tistory.com/reaction';
window.ReactionReqBody = {
entryId: 19
}</script>
<div class="wrap_btn" id="reaction-19" data-tistory-react-app="Reaction"></div><div class="wrap_btn wrap_btn_share"><button type="button" class="btn_post sns_btn btn_share" aria-expanded="false" data-thumbnail-url="https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png" data-title="[HTML+CSS] 00_웹페이지 기본구조" data-description="웹 페이지 기본 구조 #01. HTML이란? 1) HTML = Hyper Text + Markup + Language 웹 브라우저를 통해 사용자에게 보여질 문서를 작성하기 위한 마크업 언어. HTML은 본문을 위한 구조적 의미를 나타내는 것 뿐만 아니라 링크, 인용과 그 밖에 항목으로 구조적 문서를 만들 수 있는 방법을 제공 이미지와 객체를 내장하고 대화형 양식을 생성한는 데 사용가능. 2) Markup 프로그램 코드 상에서 내용을 강조하기 위한 처리 기법. 강조할 내용을 태그(TAG)라는 단위로 감싸고, 태그에는 단어를 강조하는 목적을 기술한다. 3) HTML 태그 HTML에서는 각 상황에 따른 태그를 미리 약속해 놓고, 특정 태그에 의해 감싸진 내용에 웹 브라우저가 그래픽을 적용하여 화면에 표현하도록.." data-profile-image="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" data-profile-name="chocbi" data-pc-url="https://sanghyeokyun.tistory.com/19" data-relative-pc-url="/19" data-blog-title="코딩 복습을 위한 블로그"><span class="ico_postbtn ico_share">공유하기</span></button>
<div class="layer_post" id="tistorySnsLayer"></div>
</div><div class="wrap_btn wrap_btn_etc" data-entry-id="19" data-entry-visibility="public" data-category-visibility="public"><button type="button" class="btn_post btn_etc2" aria-expanded="false"><span class="ico_postbtn ico_etc">게시글 관리</span></button>
<div class="layer_post" id="tistoryEtcLayer"></div>
</div></div>
<button type="button" class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="3788583" data-url="https://sanghyeokyun.tistory.com/19" data-device="web_pc" data-tiara-action-name="구독 버튼_클릭"><em class="txt_state"></em><strong class="txt_tool_id">코딩 복습을 위한 블로그</strong><span class="img_common_tistory ico_check_type1"></span></button> <div data-tistory-react-app="SupportButton"></div>
</div>
<!-- PostListinCategory - START -->
<div class="another_category another_category_color_gray">
<h4>'<a href="/category/%EC%BD%94%EB%94%A9%20%EA%B3%B5%EB%B6%80">코딩 공부</a> > <a href="/category/%EC%BD%94%EB%94%A9%20%EA%B3%B5%EB%B6%80/HTML%20%2B%20CSS">HTML + CSS</a>' 카테고리의 다른 글</h4>
<table>
<tr>
<th><a href="/24">[HTML+CSS] 05_멀티미디어</a> <span>(0)</span></th>
<td>2020.05.09</td>
</tr>
<tr>
<th><a href="/23">[HTML+CSS] 04_표만들기</a> <span>(0)</span></th>
<td>2020.05.09</td>
</tr>
<tr>
<th><a href="/22">[HTML+CSS] 03_문장이나 단어를 강조하기</a> <span>(0)</span></th>
<td>2020.05.09</td>
</tr>
<tr>
<th><a href="/21">[HTML+CSS] 02_단락의표현</a> <span>(0)</span></th>
<td>2020.05.09</td>
</tr>
<tr>
<th><a href="/20">[HTML+CSS] 01_화면구현 시작하기</a> <span>(0)</span></th>
<td>2020.05.09</td>
</tr>
</table>
</div>
<!-- PostListinCategory - END -->
</div>
<div class="related-articles">
<h2><strong>'코딩 공부/HTML + CSS'</strong> Related Articles</h2>
<ul>
<li>
<a href="/23?category=937487">
<span class="thum">
<img loading="lazy"
src="//i1.daumcdn.net/thumb/C264x200.fwebp.q85/?fname=https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F35C29%2FbtqD1puU6Et%2FaYCUXXhbCkpeQWQ4VQmyRk%2Fimg.png"
alt="">
</span>
<span class="title">[HTML+CSS] 04_표만들기</span>
</a>
</li>
<li>
<a href="/22?category=937487">
<span class="thum">
<img loading="lazy"
src="//i1.daumcdn.net/thumb/C264x200.fwebp.q85/?fname=https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpOSfM%2FbtqD1N3jYRa%2FrpL5xKykFDBlMifIQDMR60%2Fimg.png"
alt="">
</span>
<span class="title">[HTML+CSS] 03_문장이나 단어를 강조하기</span>
</a>
</li>
<li>
<a href="/21?category=937487">
<span class="thum">
<img loading="lazy"
src="//i1.daumcdn.net/thumb/C264x200.fwebp.q85/?fname=https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F63CZZ%2FbtqD2cV6OqJ%2FYRWkgiP8Xzn4Zaln2kGk1k%2Fimg.png"
alt="">
</span>
<span class="title">[HTML+CSS] 02_단락의표현</span>
</a>
</li>
<li>
<a href="/20?category=937487">
<span class="thum">
<img loading="lazy"
src="//i1.daumcdn.net/thumb/C264x200.fwebp.q85/?fname=https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FW0PY4%2FbtqD2GWG6ho%2FtPwM7wJFAX6jdjf32IiMpK%2Fimg.png"
alt="">
</span>
<span class="title">[HTML+CSS] 01_화면구현 시작하기</span>
</a>
</li>
</ul>
</div>
<div data-tistory-react-app="Namecard"></div>
</div>
</article>
</section>
<hr>
<footer id="footer">
<p class="copyright">DESIGN BY <a href="#">TISTORY</a> <a href="https://sanghyeokyun.tistory.com/manage" class="admin">관리자</a></p>
</footer>
</div>
<script src="https://tistory1.daumcdn.net/tistory/0/pg_Poster/images/script.js"></script>
<div class="#menubar menu_toolbar ">
<h2 class="screen_out">티스토리툴바</h2>
</div>
<div class="#menubar menu_toolbar "></div>
<div class="layer_tooltip">
<div class="inner_layer_tooltip">
<p class="desc_g"></p>
</div>
</div>
<div id="editEntry" style="position:absolute;width:1px;height:1px;left:-100px;top:-100px"></div>
<!-- DragSearchHandler - START -->
<script src="//search1.daumcdn.net/search/statics/common/js/g/search_dragselection.min.js"></script>
<!-- DragSearchHandler - END -->
<div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-9b39e501cfa58eeb992c6807fdf4fea5b7937b59/static/script/common.js"></script>
<script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script>
<script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script>
<script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"3788583-19","customProps":{"userId":"0","blogId":"3788583","entryId":"19","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"19","entryTitle":"[HTML+CSS] 00_웹페이지 기본구조","entryType":"POST","categoryName":"코딩 공부/HTML + CSS","categoryId":"937487","serviceCategoryName":"IT 인터넷","serviceCategoryId":401,"author":"4303029","authorNickname":"chocbi","blogNmae":"코딩 복습을 위한 블로그","image":"","plink":"/19","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script>
<script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script>
<script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script>
<script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script>
</body>
</html> |