달력

12

« 2019/12 »

  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  


HTML5 독타입

독타입은 간단히 말하면 브라우저 혹은 다른 파서에게 지금 보고 있는 문서의 종류를 알려주는 수단입니다.

   

HTML5이전 독타입

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd>

HTML5 독타입

<!DOCTYPE html>

   

   

head 요소

HTML5이전 문자 인코딩 표시

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

HTML5 문자 인코딩 표시

<meta charset="UTF-8">

 

Posted by codedragon codedragon

댓글을 달아 주세요

   

색상 표기법

HTML 문서에서 색상을 표현하는 방식은 영문의 색상명, 16진수 RGB 값 2가지가 있습니다.

   

16진수 표기법은 RGB표기법 이라고도 하는데,

R(red) 2자리, G(green) 2자리, B(blue) 2자리 총 6자리로 구성됩니다.

RR

GG

BB

  

  

  

   

   

RGB 컬러 값 (HTML Color Names)

출처: <http://www.w3schools.com/tags/ref_colornames.asp>

Color Name

HEX

Color

Shades

Mix

AliceBlue 

#F0F8FF

  

Shades

Mix

AntiqueWhite 

#FAEBD7

  

Shades

Mix

Aqua 

#00FFFF

  

Shades

Mix

Aquamarine 

#7FFFD4

  

Shades

Mix

Azure 

#F0FFFF

  

Shades

Mix

Beige 

#F5F5DC

  

Shades

Mix

Bisque 

#FFE4C4

  

Shades

Mix

Black 

#000000

  

Shades

Mix

BlanchedAlmond 

#FFEBCD

  

Shades

Mix

Blue 

#0000FF

  

Shades

Mix

BlueViolet 

#8A2BE2

  

Shades

Mix

Brown 

#A52A2A

  

Shades

Mix

BurlyWood 

#DEB887

  

Shades

Mix

CadetBlue 

#5F9EA0

  

Shades

Mix

Chartreuse 

#7FFF00

  

Shades

Mix

Chocolate 

#D2691E

  

Shades

Mix

Coral 

#FF7F50

  

Shades

Mix

CornflowerBlue 

#6495ED

  

Shades

Mix

Cornsilk 

#FFF8DC

  

Shades

Mix

Crimson 

#DC143C

  

Shades

Mix

Cyan 

#00FFFF

  

Shades

Mix

DarkBlue 

#00008B

  

Shades

Mix

DarkCyan 

#008B8B

  

Shades

Mix

DarkGoldenRod 

#B8860B

  

Shades

Mix

DarkGray 

#A9A9A9

  

Shades

Mix

DarkGreen 

#006400

  

Shades

Mix

DarkKhaki 

#BDB76B

  

Shades

Mix

DarkMagenta 

#8B008B

  

Shades

Mix

DarkOliveGreen 

#556B2F

  

Shades

Mix

DarkOrange 

#FF8C00

  

Shades

Mix

DarkOrchid 

#9932CC

  

Shades

Mix

DarkRed 

#8B0000

  

Shades

Mix

DarkSalmon 

#E9967A

  

Shades

Mix

DarkSeaGreen 

#8FBC8F

  

Shades

Mix

DarkSlateBlue 

#483D8B

  

Shades

Mix

DarkSlateGray 

#2F4F4F

  

Shades

Mix

DarkTurquoise 

#00CED1

  

Shades

Mix

DarkViolet 

#9400D3

  

Shades

Mix

DeepPink 

#FF1493

  

Shades

Mix

DeepSkyBlue 

#00BFFF

  

Shades

Mix

DimGray 

#696969

  

Shades

Mix

DodgerBlue 

#1E90FF

  

Shades

Mix

FireBrick 

#B22222

  

Shades

Mix

FloralWhite 

#FFFAF0

  

Shades

Mix

ForestGreen 

#228B22

  

Shades

Mix

Fuchsia 

#FF00FF

  

Shades

Mix

Gainsboro 

#DCDCDC

  

Shades

Mix

GhostWhite 

#F8F8FF

  

Shades

Mix

Gold 

#FFD700

  

Shades

Mix

GoldenRod 

#DAA520

  

Shades

Mix

Gray 

#808080

  

Shades

Mix

Green 

#008000

  

Shades

Mix

GreenYellow 

#ADFF2F

  

Shades

Mix

HoneyDew 

#F0FFF0

  

Shades

Mix

HotPink 

#FF69B4

  

Shades

Mix

IndianRed  

#CD5C5C

  

Shades

Mix

Indigo  

#4B0082

  

Shades

Mix

Ivory 

#FFFFF0

  

Shades

Mix

Khaki 

#F0E68C

  

Shades

Mix

Lavender 

#E6E6FA

  

Shades

Mix

LavenderBlush 

#FFF0F5

  

Shades

Mix

LawnGreen 

#7CFC00

  

Shades

Mix

LemonChiffon 

#FFFACD

  

Shades

Mix

LightBlue 

#ADD8E6

  

Shades

Mix

LightCoral 

#F08080

  

Shades

Mix

LightCyan 

#E0FFFF

  

Shades

Mix

LightGoldenRodYellow 

#FAFAD2

  

Shades

Mix

LightGray 

#D3D3D3

  

Shades

Mix

LightGreen 

#90EE90

  

Shades

Mix

LightPink 

#FFB6C1

  

Shades

Mix

LightSalmon 

#FFA07A

  

Shades

Mix

LightSeaGreen 

#20B2AA

  

Shades

Mix

LightSkyBlue 

#87CEFA

  

Shades

Mix

LightSlateGray 

#778899

  

Shades

Mix

LightSteelBlue 

#B0C4DE

  

Shades

Mix

LightYellow 

#FFFFE0

  

Shades

Mix

Lime 

#00FF00

  

Shades

Mix

LimeGreen 

#32CD32

  

Shades

Mix

Linen 

#FAF0E6

  

Shades

Mix

Magenta 

#FF00FF

  

Shades

Mix

Maroon 

#800000

  

Shades

Mix

MediumAquaMarine 

#66CDAA

  

Shades

Mix

MediumBlue 

#0000CD

  

Shades

Mix

MediumOrchid 

#BA55D3

  

Shades

Mix

MediumPurple 

#9370DB

  

Shades

Mix

MediumSeaGreen 

#3CB371

  

Shades

Mix

MediumSlateBlue 

#7B68EE

  

Shades

Mix

MediumSpringGreen 

#00FA9A

  

Shades

Mix

MediumTurquoise 

#48D1CC

  

Shades

Mix

MediumVioletRed 

#C71585

  

Shades

Mix

MidnightBlue 

#191970

  

Shades

Mix

MintCream 

#F5FFFA

  

Shades

Mix

MistyRose 

#FFE4E1

  

Shades

Mix

Moccasin 

#FFE4B5

  

Shades

Mix

NavajoWhite 

#FFDEAD

  

Shades

Mix

Navy 

#000080

  

Shades

Mix

OldLace 

#FDF5E6

  

Shades

Mix

Olive 

#808000

  

Shades

Mix

OliveDrab 

#6B8E23

  

Shades

Mix

Orange 

#FFA500

  

Shades

Mix

OrangeRed 

#FF4500

  

Shades

Mix

Orchid 

#DA70D6

  

Shades

Mix

PaleGoldenRod 

#EEE8AA

  

Shades

Mix

PaleGreen 

#98FB98

  

Shades

Mix

PaleTurquoise 

#AFEEEE

  

Shades

Mix

PaleVioletRed 

#DB7093

  

Shades

Mix

PapayaWhip 

#FFEFD5

  

Shades

Mix

PeachPuff 

#FFDAB9

  

Shades

Mix

Peru 

#CD853F

  

Shades

Mix

Pink 

#FFC0CB

  

Shades

Mix

Plum 

#DDA0DD

  

Shades

Mix

PowderBlue 

#B0E0E6

  

Shades

Mix

Purple 

#800080

  

Shades

Mix

Red 

#FF0000

  

Shades

Mix

RosyBrown 

#BC8F8F

  

Shades

Mix

RoyalBlue 

#4169E1

  

Shades

Mix

SaddleBrown 

#8B4513

  

Shades

Mix

Salmon 

#FA8072

  

Shades

Mix

SandyBrown 

#F4A460

  

Shades

Mix

SeaGreen 

#2E8B57

  

Shades

Mix

SeaShell 

#FFF5EE

  

Shades

Mix

Sienna 

#A0522D

  

Shades

Mix

Silver 

#C0C0C0

  

Shades

Mix

SkyBlue 

#87CEEB

  

Shades

Mix

SlateBlue 

#6A5ACD

  

Shades

Mix

SlateGray 

#708090

  

Shades

Mix

Snow 

#FFFAFA

  

Shades

Mix

SpringGreen 

#00FF7F

  

Shades

Mix

SteelBlue 

#4682B4

  

Shades

Mix

Tan 

#D2B48C

  

Shades

Mix

Teal 

#008080

  

Shades

Mix

Thistle 

#D8BFD8

  

Shades

Mix

Tomato 

#FF6347

  

Shades

Mix

Turquoise 

#40E0D0

  

Shades

Mix

Violet 

#EE82EE

  

Shades

Mix

Wheat 

#F5DEB3

  

Shades

Mix

White 

#FFFFFF

  

Shades

Mix

WhiteSmoke 

#F5F5F5

  

Shades

Mix

Yellow 

#FFFF00

  

Shades

Mix

YellowGreen 

#9ACD32

  

Shades

Mix

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

HTML 요소를 선택자로 사용시  (0) 2015.01.01
참고 & 출처 HTML5, CSS, XML  (0) 2014.11.25
색상 태그  (0) 2014.11.20
CSS 선언  (0) 2014.11.14
특수문자  (0) 2014.11.13
문단 태그  (0) 2014.10.26
TAG #000000, #000080, #00008B, #0000CD, #0000FF, #006400, #008000, #008080, #008B8B, #00BFFF, #00CED1, #00FA9A, #00FF00, #00FF7F, #00FFFF, #191970, #1E90FF, #20B2AA, #228B22, #2E8B57, #2F4F4F, #32CD32, #3CB371, #40E0D0, #4169E1, #4682B4, #483D8B, #48D1CC, #4B0082, #556B2F, #5F9EA0, #6495ED, #66CDAA, #696969, #6A5ACD, #6B8E23, #708090, #778899, #7B68EE, #7CFC00, #7FFF00, #7FFFD4, #800000, #800080, #808000, #808080, #87CEEB, #87CEFA, #8A2BE2, #8B0000, #8B008B, #8B4513, #8FBC8F, #90EE90, #9370DB, #9400D3, #98FB98, #9932CC, #9ACD32, #A0522D, #A52A2A, #A9A9A9, #ADD8E6, #ADFF2F, #AFEEEE, #B0C4DE, #B0E0E6, #B22222, #B8860B, #BA55D3, #BC8F8F, #BDB76B, #C0C0C0, #C71585, #CD5C5C, #CD853F, #D2691E, #D2B48C, #D3D3D3, #D8BFD8, #DA70D6, #DAA520, #DB7093, #DC143C, #DCDCDC, #DDA0DD, #DEB887, #E0FFFF, #E6E6FA, #E9967A, #EE82EE, #EEE8AA, #F08080, #F0E68C, #F0F8FF, #F0FFF0, #F0FFFF, #F4A460, #F5DEB3, #F5F5DC, #F5F5F5, #F5FFFA, #F8F8FF, #FA8072, #FAEBD7, #FAF0E6, #FAFAD2, #FDF5E6, #FF0000, #FF00FF, #FF1493, #FF4500, #FF6347, #FF69B4, #FF7F50, #FF8C00, #FFA07A, #FFA500, #FFB6C1, #FFC0CB, #FFD700, #FFDAB9, #FFDEAD, #FFE4B5, #FFE4C4, #FFE4E1, #FFEBCD, #FFEFD5, #FFF0F5, #FFF5EE, #FFF8DC, #FFFACD, #FFFAF0, #FFFAFA, #FFFF00, #FFFFE0, #FFFFF0, #FFFFFF, 16진수, Aliceblue, AntiqueWhite, aqua, Aquamarine, Azure, bb, Beige, Bisque, black, BlanchedAlmond, Blue, BlueViolet, Brown, BurlyWood, CadetBlue, Chartreuse, Chocolate, Coral, CornflowerBlue, Cornsilk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGoldenRod, DarkGray, DarkGreen, DarkKhaki, DarkMagenta, DarkOliveGreen, DarkOrange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen, DarkSlateBlue, DarkSlateGray, DarkTurquoise, DarkViolet, DeepPink, DeepSkyBlue, DimGray, DodgerBlue, FireBrick, FloralWhite, ForestGreen, fuchsia, Gainsboro, GG, GhostWhite, GOLD, GoldenRod, GRAY, green, GreenYellow, HoneyDew, HotPink, HTML, html5, IndianRed, indigo, Ivory, Khaki, Lavender, LavenderBlush, LawnGreen, LemonChiffon, LightBlue, LightCoral, LightCyan, LightGoldenRodYellow, LightGray, LightGreen, LightPink, LightSalmon, LightSeaGreen, LightSkyBlue, LightSlateGray, LightSteelBlue, LightYellow, lime, LimeGreen, Linen, Magenta, maroon, MediumAquaMarine, MediumBlue, MediumOrchid, MediumPurple, MediumSeaGreen, MediumSlateBlue, MediumSpringGreen, MediumTurquoise, MediumVioletRed, MidnightBlue, MintCream, MistyRose, Moccasin, NavajoWhite, navy, OldLace, Olive, OliveDrab, Orange, OrangeRed, Orchid, PaleGoldenRod, PaleGreen, PaleTurquoise, PaleVioletRed, PapayaWhip, PeachPuff, Peru, pink, Plum, PowderBlue, purple, Red, rgb, RosyBrown, RoyalBlue, RR, SaddleBrown, Salmon, SandyBrown, SeaGreen, SeaShell, Sienna, silver, SkyBlue, SlateBlue, SlateGray, snow, SpringGreen, SteelBlue, Tan, teal, Thistle, Tomato, Turquoise, Violet, Wheat, white, WhiteSmoke, yellow, YellowGreen, 색상, 색상명, 표기법
Posted by codedragon codedragon

댓글을 달아 주세요

   

   

특수문자

문자 엔티티

특수문자

설명

&nbsp;

  

non-breaking space의 약어. 공백문자 하나를 추가한다.

&lt;

<

Less than 의 약어. <를 표시한다.

&gt;

>

Greater than의 약어. >를 표시한다.

&amp;

&

Ampersand의 약어. &부호를 표시한다.

&quot;

"

quotation maker의 약어. "를 표시한다.

&copy;

Copyright의 약어. 저작권,판권을 표시한다.

&trade;

Trademark의 약어. 상표를 표시한다.

   

   

<pre> 태그와 <xmp> 태그

  

<pre>

<xmp>

주용도

눈에 보이는 대로 출력

태그를 문자로 취급하여 출력

위지윅

O

O

태그 적용 여부

O

X

 

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

색상 태그  (0) 2014.11.20
CSS 선언  (0) 2014.11.14
특수문자  (0) 2014.11.13
문단 태그  (0) 2014.10.26
CSS 기본 구성요소  (0) 2014.10.25
시멘틱 태그- 01.html  (0) 2014.10.17
Posted by codedragon codedragon

댓글을 달아 주세요

   

문단 관련 태그

  • <br>
  • <p>
  • <div>
  • <h숫자>
  • <center>

   

   

<p> 태그와 <br> 태그 비교

내용1<p>내용2 = <p>내용1</p>내용2 = 내용1<br><br>내용2

   

   

내용을 가운데 정렬

<center>내용</center>

<p align=center>내용</p>

<div align=center>내용<div>

<h4 align=center>내용</h4>

   

   

<body> 태그

<body> 태그 속성

bgcolor

background

text

link

vlink

alink

leftmargin

topmargin

oncontextmenu

onselectstart

bgproperties

scroll

   

   

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

CSS 선언  (0) 2014.11.14
특수문자  (0) 2014.11.13
문단 태그  (0) 2014.10.26
CSS 기본 구성요소  (0) 2014.10.25
시멘틱 태그- 01.html  (0) 2014.10.17
태그  (0) 2014.10.11
Posted by codedragon codedragon

댓글을 달아 주세요

시멘틱 태그

   

sematic

무의미한 태그가 아니라

'의미를 갖는다'는 뜻으로, 각 태그가 스스로 의미를 지닌다는 뜻

   

   

시멘틱 태그

태그

설명

header

사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함됨

hgroup

제목과 부제목을 묶는 역할

nav

사이트나 메뉴나 링크 같은 내비게이션 요소들이 포함

section

실제 문서 내용이 들어감

article

문서 내용이 많을 경우 여러 개의 <article>요소로 나눌 수 있음

aside

문서의 주요 내용 외의 내용들을 넣어 문서의 주 영역 주변에 배치

footer

작성자 정보나 저작권 정보, 또는 관련 문서 링크 등 부가 정보들을 담고 있음

   

   

표현을 위한 태그

태그

설명

mark

특정 텍스트를 강조하고자 할 때 사용하는 태그

   

   

소스코드

<html>

<head>

<meta charset="UTF-8">

<title>시멘틱 태그</title>

</head>

<body>

<header id="page_header">

<hgroup>

<h1>대한 대학교 홈페이지</h1>

<h4>세계를 향상 지식의 공간</h4>

</hgroup>

<nav>

<ul>

<li><a href="">1학년</a></li>

<li><a href="">2학년</a></li>

<li><a href="">3학년</a></li>

<li><a href="">4학년</a></li>

</ul>

</nav>

</header>

<section>

<header>

<h3>이달의 소식</h3>

</header>

<article>

네셔널 컨테스트에서 <strong>대상 수상</strong> 하여 대한 대학교를 알렸습니다. 수상자는 <mark>홍길동</mark>입니다.

</article>

</section>

<footer>

2020 대한 대학교

</footer>

</body>

</html>

   


   

   

   

   

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

문단 태그  (0) 2014.10.26
CSS 기본 구성요소  (0) 2014.10.25
시멘틱 태그- 01.html  (0) 2014.10.17
태그  (0) 2014.10.11
CSS Color Names  (0) 2014.10.09
CSS 용어  (0) 2014.10.03
Posted by codedragon codedragon

댓글을 달아 주세요

   

   

<head> 태그 사이에 기록되는 문서 정보

<title>

홈페이지를 대표할 수 있는 문서 제목을 지정합니다

<meta>

다양한 속성을 가지고 있어 다양한 역할을 합니다.

<script>

홈페이지를 역동적으로 변화시킵니다.

<style>

문서 전체의 레이아웃을 결정하여 문서에 통일감을 줍니다

<html>

<head>

<title></title>

</head>

<body> </body>        

</html>

   

   

   

태그의 구성 요소

복합 태그

<태그명> 내용 </태그명>

속성을 가지는 태그

<태그명 속성명=값> 내용 </태그명>

단독 태그

<태그명>

사용 예

여러분을 <font size=5 color=blue>HTML 강의</font>를 시작합니다!

   

   

태그 사용 규칙

  • <태그명></태그명>과 같이 여는 태그와 닫는 태그가 쌍으로 사용됩니다.
    • 닫을 때는 태그명으로만 닫습니다.
  • 태그명과 속성명, 속성명과 속성명 사이는 한 칸씩 띄웁니다. 그 외 공백을 두어서는 안 됩니다.
    • 속성명과 값은 = 부호를 사용하여 표시합니다.
    • 값이 두 단어 이상일 경우는 ""로 묶어서 표시합니다.
  • 속성이 있는 태그가 있고 없는 태그가 있습니다.
    • 속성을 반드시 하나 이상 사용해야 하는 태그도 있고 생략해도 되는 태그도 있습니다.
    • 여는 태그만 독립적으로 존재하는 태그도 있습니다.
  • 태그를 중첩해서 사용할 경우 먼저 열어준 태그를 나중에 닫아줍니다.

   

태그 사용 예

<font size=5 color=blue>환영합니다!</font><p>

<b>하늘은 <u>높고</u> 바람은 산들산들 ^^ </b><br>

<p align=center>알찬 내용들로 조금씩 채워가겠습니다. ^^</p>

 

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

CSS 기본 구성요소  (0) 2014.10.25
시멘틱 태그- 01.html  (0) 2014.10.17
태그  (0) 2014.10.11
CSS Color Names  (0) 2014.10.09
CSS 용어  (0) 2014.10.03
HTML 기본 구조  (0) 2014.10.01
Posted by codedragon codedragon

댓글을 달아 주세요

HTML 기본 구조

<html>

<head>

<title></title>

</head>

<body> </body>        

</html>

   

웹 문서 구조

   

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

CSS Color Names  (0) 2014.10.09
CSS 용어  (0) 2014.10.03
HTML 기본 구조  (0) 2014.10.01
CSS 개요  (0) 2014.09.25
01.html-Hello World  (0) 2014.09.13
HTML Color Names  (0) 2014.09.05
Posted by codedragon codedragon

댓글을 달아 주세요

프로젝트 생성

File > New > Dynamic Web Project

   

File > New > Folder

   

ch01-first폴더 선택 > 마우스 우클릭 > New > HTML file

   

New HTML File (5) 선택

Finish

   

   

소스 코드

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Hello HTML5</title>

</head>

<body>

<h1>Hello World!</h1>

<p>Hi HTML5</p>

</body>

</html>

   


   

   

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

HTML 기본 구조  (0) 2014.10.01
CSS 개요  (0) 2014.09.25
01.html-Hello World  (0) 2014.09.13
HTML Color Names  (0) 2014.09.05
HTML파일 인코딩 변경하기  (0) 2014.08.27
자바스크립트 소스 파일(.js) 생성 방법  (0) 2014.08.20
Posted by codedragon codedragon

댓글을 달아 주세요

http://www.w3schools.com/tags/ref_colornames.asp

   

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

CSS 개요  (0) 2014.09.25
01.html-Hello World  (0) 2014.09.13
HTML Color Names  (0) 2014.09.05
HTML파일 인코딩 변경하기  (0) 2014.08.27
자바스크립트 소스 파일(.js) 생성 방법  (0) 2014.08.20
웹표준  (0) 2014.06.09
Posted by codedragon codedragon

댓글을 달아 주세요

메뉴 > Window > Web-HTML Files >

Creating files-Encoding: ISO 10646/Unicode(UTF08)선택 >

Apply

OK

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

01.html-Hello World  (0) 2014.09.13
HTML Color Names  (0) 2014.09.05
HTML파일 인코딩 변경하기  (0) 2014.08.27
자바스크립트 소스 파일(.js) 생성 방법  (0) 2014.08.20
웹표준  (0) 2014.06.09
HTML5와 CSS3 사용의 장점  (0) 2014.06.05
Posted by codedragon codedragon

댓글을 달아 주세요