달력

12

« 2019/12 »

  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  

   

   

특수문자

문자 엔티티

특수문자

설명

 

  

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

<

<

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

댓글을 달아 주세요

자바스크립트 소스 파일 생성 방법

마우스 우클릭 > New > Other... >

JavaScript Source File선택 >

Next

   

파일명 입력 >

Finish

   

js파일 생성 완료

   

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

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
HTML5 지원 API  (0) 2014.06.05
Posted by codedragon codedragon

댓글을 달아 주세요