| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- 프론트엔드
- 백엔드개발자
- JavaScript
- 프론트엔드개발자
- ICO
- 퀀텀
- CSS
- 국비지원IT
- 핀테크
- 비트코인
- 프론트엔드국비지원
- HTML
- 가상화폐
- 블록체인
- 웹디자인
- 백엔드
- backend
- 웹개발자
- 코딩
- 암호화폐
- java
- frontend
- 개발자
- 웹퍼블리셔
- IT
- developer
- jQuery
- 웹프론트엔드개발자
- 이더리움
- 퍼블리셔
- Today
- Total
wellkiim
html_webpage_basic 본문
이번 시간에는
webpage basic
즉,
웹페이지를 만들때 쓰는 태그들에 대하여 기본 단락들을 구성하는 방법에 대하여 간단히
알아보도록 하겠습니다.
전체 페이지를 담는 큰 틀로써, wrap이라는 영역이 있고,
그 아래로 로고나, 네비게이션바 (nav) , (gnb) 그리고 로그인, 회원가입 등을 담고있는 영역인 header 영역
컨텐츠 및 광고요소가 들어가는 container 영역
마지막으로 이용약관, 개인정보 방침, 법률정보 등을 담아주는 footer 영역이 있다.
마찬가지로, 에디터에 코드를 치고, 각 태그들에 대한 출력값을 보여드리도록 하겠습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
01) strict.dtd(엄격)
+ 완벽한 표준버전으로만 사용
xhtml 표준 : 1.0으로만 존재
html 비표준 : 4.0 사용
+ 표준버전은 대문자, 한글, 한자 등등 언어사용에 제약이 큼
+ "무조건 소문자" 로만 작성!
+ 표준이나 구형 브라우저중에 한쪽에만 치우치게 된다.
02) transitional.dtd
+ 기존의 문서들과 호환성이 가장 좋음, 하위버전의 문서와 호환성이 뛰어남!
+ 비표준 + 표준문서 사용이 가능
+ 대문자, 소문자, 한글, 한자, 일본어 등등 어떤 언어의 문서와도 호환성이 뛰어남!
03) frameset.dtd
+ 화면을 분할하여 각각의 역할을 지정할때 사용
-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<title> new document </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!--
+ meta태그는 문서의 용도를 정의할 때 사용
- http-equiv : 서버(주소)를 통해 장비를 사용
+ xhtml: 문자열 관련 장비
+ php: 페이지에서 페이지 연동을 위해 사용
+ html5: 반응형 작업시
- charset: 문자열 셋팅
+ utf-8 : 다국적언어팩 , 무거운게 단점
한국어, 일본어, 영어, 불어 , 한자 등등 모든언어 사용가능
+ 저장시(인코딩) : utf-8
+ euc-kr : 한국어, 영어만 지원(2벌씩) , 가벼운게 장점
단점은 다른언어 지원X
+ 저장시(인코딩) : ANSI로 저장
- 중요) 압축할때 용량을 줄이기 위해서 utf-8을 ANSI로 바꾸는 경우가 생길수 있음
이럴땐 문자열이 깨지기 때문에 조심할 것
+ 해결은 다시 utf-8로 저장하기
-->
</head>
<body>
<div id="wrap">
<div id="header">
<h1>로고: 상징적인 요소(홈페이지 전체 이미지)</h1>
<h2>header영역에 작성되어야 하는 내용</h2>
<p>네비게이션바, 로고, 로그인, 회원가입</p>
</div>
<div id="container">
<h2>컨텐츠및 광고요소가 들어가는 영역</h2>
</div>
<div id="footer">
<h2>꼬릿말영역</h2>
<span>필수로 작성되어야 하는 값 copyright</span>
<span>이용약관</span>
<span>개인정보방침</span>
<span>전체적으로 법률정보들을 모아주는 영역</span>
</div>
</div>
</body>
</html>
아래 출력된 이미지는 위에 해당하는 코드가 출력된 값입니다.
이렇게 간단한 태그들로 웹페이지가 완성되는 것은 결코 아닙니다.
하지만 이러한 태그들이 기본이 되어 응용이 되는 것이므로, 간단하게 보인다고
간과하면 안되는 것입니다.
'Development > HTML, CSS' 카테고리의 다른 글
| html_web_basic (0) | 2018.05.06 |
|---|---|
| html_img태그 (0) | 2018.05.06 |
| html_inline과 block 태그 (0) | 2018.05.06 |
| html_tag (0) | 2018.05.06 |
| html 01_basic (0) | 2018.05.06 |
