하하하하하 :: HTML

HTML

LANGUAGE/HTML & CSS & JS 2015. 4. 28. 16:02

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////// DTD /////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

// DTD(Document Type Definition)

HTML문서가 어떤 기준으로 작성되었는지 HTML문서 가장 첫줄에 기입합니다.

// HTML 4.01

// XHTML 1.0

// HTML5

<!DOCTYPE html>

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////// META /////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

// 참조 : http://blog.naver.com/iwow/40116543479

// 구글에서 제공하는 메타태그 관련 : https://support.google.com/webmasters/answer/79812?hl=ko

// <meta http-equiv="content-type" content="text/html" charset=utf-8 /> //언어 설정

// <meta http-equiv="refresh" content="5" /> //5초 마다 새로고침

// <meta http-equiv="refresh" content="5; url=http://youtube.com/chooseamenu" /> //5초 후 해당 사이트로 이동

// <meta http-equiv="Pragma" content="no-cache" /> //캐쉬 읽기 방지

// <meta http-equiv="imagetoolbar" content="no" /> //이미지 위에 마우스를 올려도 이미지 관련 툴바작동X

// <meta name="generator" content="저작프로그램" / >

// <meta name="author" contents="제작자 이름" />

// <meta name="keywords" contents="키워드를 구분자(,)로 나열하기" />

// <meta name="description" contents="간략한 설명하기" />

// <meta name="subject" content="홈페이지 주제" />

// <meta name="title" content="홈페이지 이름" />

// <meta name="publisher" content="만든 단체나 회사" />

// <meta name="other" content="웹책임자" />

// <meta name="classification" content="카테고리위치(분류)" />

// <meta name="reply-to" content="메일 주소" />

// <meta name="filename" content="파일명" />

// <meta name="author-date" content="제작일" />

// <meta name="location" content="홈페이지 위치(소속국가)" />

// <meta name="copyright" content="저작권" />

// <meta name="content-language" content="kr" />

// <meta name="viewport" content="width=1100px, user-scalable=yes">

※ 속성

- width : 화면의 넓이를 의미, 값을 device-width로 하면 모바일 장치의 화면 넓이를 따라감

- height : 화면의 높이를 의미, 값을 device-height로 하면 모바일 장치의 화면 높이를 따라감

- initial-scale : 화면의 초기 확대비율

- user-scalable : 사용자가 화면을 확대할 수 있는지 여부를 지정(yes/no)

- minimum-scale : 화면을 축소할 때 최소축소치

- maximum-scale : 화면을 확대할 때 최대확대치

// <meta name="robots" content="all" /> //로봇 검색 허가O

// <meta name="robots" content="none" /> //로봇 검색 허가X

// <meta name="robots" content="index,follow" /> //본문서O 링크문서O

// <meta name="robots" content="noindex,follow" /> //본문서X 링크문서O

// <meta name="robots" content="index,nofollow" /> //본문서O 링크문서X

// <meta name="robots" content="noindex,nofollow" /> //본문서X 링크문서X

// IE에서만 해당 태그 적용이라는대???

<!--[if IE]>

<meta http-equiv="imagetoolbar" content="no">

<![endif]>

[출처] HTML5 메타태그에 관해 질문드려요! (웹카페에서 웹표준을) |작성자 김데레사

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////// LINK /////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

//참조(rel속성) : http://linuxism.tistory.com/633

// 신나고 재밌는 파비콘 만들기 : http://genfavicon.com/

// 파비콘 설정

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

//test.html의 하위 문서임임을 정의

<link rel="subsection" href="test.html" />

//따로 저장된 CSS파일 불러오기

<link rel="stylesheet" type="text/css" href="test.css" />

// media속성 : screen은 Web, print는 print(인쇄), handheld는 무선장치

<link rel="stylesheet" href="../css/services/cas.css" type="text/css" media="screen, print, handheld" />

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////// SCRIPT /////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

// async : window의 load이벤트가 실행 되기 전, 순차적으로 바로바로 실행

<script async src="myAsyncScript.js" onload="myInit()"></script>

// defer :

<script defer src="myDeferScript.js" onload="myInit()"></script>

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////// HTML /////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

// 요소 (Element) : p

// 태그 (Tag) : < >

// 속성 (Attributes) : align="center"

// 예 : <p align="center">

///////////////////////// 주석 /////////////////////////

// 주석 시작 : <!--

// 주석 끝 : -->

// <html>

// <head>

// <title> : 웹페이지 제목

<title>내 홈페이지</title>

// <meta> : 정보를 담음

// <body>

//bgcolor= //leftmagin= //topmagin=

// <p> 파라그래프(paragraph)의 약자, 하나의 문단을 구분

//align= //style=

<p align="center" style="width:200px">

// <br> 개행 (닫기 태그가 없는 대표적인 것이지만, 간혹 시스템에 따라 </br>로 닫을 때가 있음)

// &nbsp 띄어쓰기 (최대 한 칸 이상은 이게 아니면 띄어쓰기가 안됨)

// <h1> ~ <h6> : 큰 글씨

// <hr> 가로줄

// <font> 글씨

//size="3" //color="red" //face="돋음"

<font color="red" size="20" face="궁서">하하하</font>

// <a> 앵커(anchor)의 약자

//name= //href= //target= //title=

<a href="http://www.naver.com/" title="네이버로 가자" target="_blank">네이버</a>

<a href="#top">상단으로</a>

// <table> 테이블(표)

//border= 테두리 굵기 //cellpadding= 격자와의 거리(셀여백) //cellspacing= 격자간의 거리(셀간격)

//width= 가로크기 //height= 세로크기 //align=정렬

// <tr> 행 생성

//rowspan= //colspan= //height= //align=

// <td> 열 생성

//width= // align=

// <ol> 순서가 있는 리스트(1,2,3...)

//type = "A"

// <ul> 순서가 없는 리스트(·,·,·...)

// <li> 리스트 생성

// <iframe> 프레임 생성

<iframe src="menu.html" name="menu"></iframe>

// <frame> 프레임 생성

// <input> 다양한 입력도구들

//name= //type= (text, password, radio, checkbox, file, image, hidden, submit, reset)

// <textarea> 여러줄의 텍스트 입력도구

//name= //rows= //cols=

// <select> 선택형 입력도구

//name=

// <option> 보기 만들기

//selected //value=

// <optgroup> 보기를 그룹으로 묻기(html4부터 적용)

//label=

<select name="hobby">

<option value="10">게임</option>

<option value="20">자기</option>

<optgroup label="스포츠">

<option value="30">축구</option>

<option value="40">농구</option>

<option value="50">걷기</option>

</optgroup>

<option value="60">춤추기</option>

</select>

// <form> 사용자가 입력한 값을 처리하기 위한 양식

//method= 웹서버와의 통신방법(get, post) //action= 입력양식에 입력된 겂을 처리하는 파일지정

<form method="get" action="login.jsp">

</form>

// <span>

<p class="red"> 하하하하 호호호하하하<span class="yellow">하히히</span>히 </p>

저작자표시 비영리 동일조건

'LANGUAGE > HTML & CSS & JS' 카테고리의 다른 글

API - FACEBOOK (0)	2015.05.04
API - GOOGLE MAPS (0)	2015.05.04
JQuery Mobile (0)	2015.05.04
CSS (0)	2015.04.28
JAVASCRIPT (2)	2015.04.28

티스토리툴바