'2015/11'에 해당되는 글 4건

여러 태그02

Programming/Html5 + CSS 2015. 11. 29. 21:53

전 포스팅에 이어서 HTML5 태그를 더 알아봅시다.


<--<img>태그-->

<img>태그는 웹 문서에 이미지를 삽입할 때 쓰이는 태그이다.

 태그

속성 

값 

설명 

 img

 alt 

 설명

 이미지를 대체할 설명을 입력합니다. 

 crossorigin 

 anonymous/

use-credentials

다른 사이트의 이미지를 이용할 수 있게 해준다. 

 height

 픽셀

 이미지의 높이를 픽셀 단위로 지정한다. 

 ismap

 ismap

 서버 측의 이미지맵을 지정한다. 

 src

 URL 

 삽입하려는 이미지의 경로와 파일 이름 지정. 

 usemap

 맵이름 

 사용자 측의 이미지맵을 지정합니다. 

 witdh

 픽셀 

  이미지의 폭을 픽셀 단위로 지정.

Ex)

<body>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSBjR5_BavmJOTFrdKMFgi4xPZmbbY1gavKJO9UjNehmypOEI0I" width = "300" height="300">
</body>

▲ <img>태그를 사용해서 google이미지를 가져와 보았습니다.

△ 크기는 300*300 입니다.


 구분 

 표현방법 

 설명 

 상대 경로

 ../images or ./images 

 HTML문서의 위치와 객체와의 상대적인 위치를 표현합니다. 

 절대 경로

 C:/HTML5CSS3/imgages 

 HTML문서와 상관없이 객체의 절대적인 위치를 표현합니다. 


<--<iframe> 태그-->

<iframe>태그는 웹문서에 다른 웹 문서를 삽입 가능하게 해주는 태그이다.

 태그

 속성 

 값 

` 설명 

 iframe 

 height

 픽셀 / %

 <iframe>의 높이 지정 .

 name

 이름

 <iframe>의 이름을 지정. 

 sandbox 

 "/allow-forms/allow-same-origin/allow-scripts/allow-top-navigation

<iframe>의 내용 제한 설정. 

 src

 URL

 웹 문서의 주소 지정. 

 srcdoc

 HTML cdoe

 <iframe>에 보여줄 HTML코드 지정. 

 width

 픽섹 / % 

 크기 지정.

 seamless

 seamless 

 문서의 일부처럼 보이도록 지정. 

Ex)

<body>
<iframe src="http://www.daum.net/" width="100%" height="50" ></iframe> 
</body>

▲위 처럼 다른 웹 문서를 불러 올 수 있다.

△왠지 모르겠는데 naver하려다 안됨.


<--<embed>태그-->

<edbed>태그는 HTML5가 생기면서 생긴 태그이며, 웹 문서에 플래시, 동영상, 음악 파일등을 삽입할 수 있는 태그이다.

 태그

속성 

값 

설명 

 embed

 height

 픽셀 

 재생 매체의 높이 지정. 

 src

 URL 

 삽입하려는 파일의 경로나 파일이름 지정. 

 type

 MIME type

 삽입하려는 파일의 MIME 타입 지정 

 width

 픽셀

 재생 매체의 폭 지정. 

Ex)

<body>
<embed src="http://player.music.naver.com/naverPlayer/posting/12693974/BA" width = "400" height = "300"></embed>
</body>


▲위 처럼 여러 플래시,동영상,음악 파일들을 불러 올 수 있다.
△잘 안되네..

<--<video> & <audio> 태그-->

웹에 오디오나 동영상을 삽입하려면 <embed>태그 이외에 <video> & <audio>태그를 사용할 수있고, <audio>는  MP3, WAV, OGG파일 형식을 지원하고, <video>는 MP4, WebM, OGG 파일 형식을 지원한다.

<-- 태그 형식 -->

<audio autoplay controls src="파일 경로"></audio>
<video autiplay controls src="파일 경로" width="가로 폭"></video>

<--태그 속성-->

태그 

속성 

값 

설명 

 audio

 autoplay

 autoplay 

 자동 플레이 되도록 지정 

 controls

 controls 

 오디오의 컨트롤 기능이 나타나도록 지정. 

 loop

 loop

 반복 재생.

 muted

 muted 

 재생 시 소리가 나지 않도록 지정 

 preload

 auto/metadata/none 

 오디오 로드 전 해야 할 것 지정.

 src

 URL 

 파일의 경로와 파일 이름 지정 

 video

 autoplay

 autoplay 

 자동 플레이 되도록 지정 

 controls

 controls 

 동영상의 컨트롤 기능이 나타나도록 지정 

 height

 픽셀 

 동영상의 높이 지정 

 loop

 loop 

 동영상을 반복하여 재쟁. 

 muted

 muted 

 동영상 재생시 소리가 안나도록 지정. 

 poster

 URL 

 동영상의 이미지 지정 

 preload

 auto/metadata/none

 동영상 로드 전 해야 할 것 지정. 

 src

 URL 

 삽입하려는 파일의 경로와 피일이름 지정 

 width

 픽셀 

 동영상의 폭을 픽셀 단위로 지정. 

Ex)

<audio autoplay controls src = "demo.mp3"></audio>
<video autoplay controls src = "demo.mp4"></video>

△웹에서 mp4, mp3파일을 못 찾아서 이 예제 밖에 못보여주네요..


<--<map> & <area> 태그-->

<map> 태그는 웹 문서에 사용자 이미지맵을 삽입하고, <area>태그는 이미지맵의 클릭할 수 있는 영역을 지정할 때 사용한다.

 태그

속성 

값 

 설명 

 map

 name 

 이름  

 이미지맵의 이름을 입력합니다. 

 area

 alt 

 설명 

 영역을 대체할 설명을 입력한다. 

 coords 

 coordinates   

 영역의 좌표를 지정한다. 

 download 

 파일명  

 하이퍼링크를 클릭하면 다운로드 되도록 지정. 

 hreflang 

 languge_code 

 하이퍼링크 대상의 언어를 지정합니다. 

 media

 media query 

 대상 URL에 최정화된 미디어나 디바이스를 지정. 

 nohref 

 value 

 하이퍼링크가 없음을 지정한다. 

 ret

 aliternate/author

/bookmark/help/

license/next/...

현재 문서와 대상 URL간의 관계를 지정한다.

 shape

 default/rect/
circle/poly 

 영역의 모양을 저정합니다. 

 target

 _blank/ _parent/

_self/_top/ ... 

 대상 URL의 열 위치를 지정한다.

 type

 MIME type 

 대상URL의 MINE타입을 지정한다. 



<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRwIJfxVtADUJ8Q-Nlbsr2uE_fU0hT_Y14a84xZirMzUnh3LtjSAg" width="300" usemap="#sitemap">

<map name="sitemap">
	<area shape="rect" coords="50,60,160,160" href="http://www.ggtour.or.kr" alt="Hello!"></area>


Hello!
▲이미지에서 마우스를 휘젓다 보면 클릭이 가능한 부분을 발견할 수 있을 것 이다.



'Programming > Html5 + CSS' 카테고리의 다른 글

CSS3 기초  (1) 2015.12.02
여러 태그03  (0) 2015.12.02
HTML5 시멘틱 구조 및 여러 태그  (0) 2015.11.25
HTML5기본 구조 & Meta 테그  (0) 2015.11.25
Html5+CSS3 시작!  (0) 2015.11.25
블로그 이미지

KimMinSung

,

HTML5 시멘틱 구조 및 여러 태그

Programming/Html5 + CSS 2015. 11. 25. 16:55

<--시멘틱 웹 이란?-->

웹 문서를 쉽고 의미 있게 검색하기 위해 시멘틱 웹이라는 개념이 만들어 졌다. 시멘틱 웹이란, 사용자가 정보를 따라 검색하면 컴퓨터가 정보를 찾아 정보의 뜻을 이해하고, 추론까지 하는 차세대 지능형 웹 기술을 말한다.


<--구획 정의를 위한 태그-->

 태그

설명 

article  

여러개의 내용으로 나누는 구분을 의미한다. 본문 내의 세부 절 등에 사용 된다. 

aside 

주요 내용 이외의 문서 내용을 의미한다. 블로그의 사이드 바 등에 사용된다. 

footer 

문서의 푸처를 의미한다. 저작자나 저작권 정보 등에 사용된다. 

header

문서의 헤더를 의미한다. 사이트소개나 로고 등에 사용된다.

nav 

내비게이션을 의미한다. 웹 문서 내의 메뉴 등에 사용된다. 

section 

문서의 내용을 의미한다. 웹 문서의 본문 등에 사용된다. 


▲위 그림 처럼 만들어 지는게 보통이다.(저기서 바뀔 수 도있다.)


<--의미를 명확하게 하는 태그-->

 태그

설명 

figure 

이미지 등의 캡션 그룹을 지정한다. 

figurecaption 

이미지 등의 캡션을 지정합니다. 

time

문서 작성 날짜와 시간을 의미한다. 

mark 

강조를 의미한다. 


<--정리 태그-->

Ex)

<p> Hello. <br> My name is Ms_Kim. 

<hr>My name is luc3773.

</p>

-출력 결과-

Hello.

My name is Ms_Kim.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

My name is luck3773.


<--<div>와 <span>태그-->

<div>와 <span>태그는 웹의 내용을 나누거나 그룹을 지정한느 용도로 사용한다. 여러 그룹을 묶는 용도로 사용한다.

 태그

 설명 

 div

 웹 문서의 블록을 지정한다. 

 span 

 웹 문서의 인라인 블록을 지정한다. 


Ex)

▲이렇게 <div class or id로 각 문단을 나누는 것을 볼 수 있다.>



△다른 것도 보고 싶다면 자신이 원하는 웹에 들어가서 F12키를 눌러보아라.


<--목록을 만드는 태그-->

 태그

설명

 ul

 번호 없는 목록을 만든다.

 ol

 번호 있는 목록을 만든다. 

 li

 <ul>과 <ol>태그의 항목을 만든다. 

 속성

 

 속성

값 

설명 

 ol

reversed 

reversed 

항목의 숫자를 역순으로 표시. 

 start

숫자 

항목의 시작 줏자를 지정. 

 type

1/A/a/l/i 

항목에 사용할 번호 종류 설정. 

 li

 value

숫자 

번호 있는 목록에서 항목의 번호 지정. 

 




<!DOCTYPE html>
<html>
<head>
	<title>Meta tag</title>
</head>
<body>
	<li>HTML5</li>
	<li>CSS3</li>
	<li>JavaScript</li>
</ul>
<ol>
	<li>Backgraund</li>
	<li>Border</li>
	<li>Animation</li>	
</ol>
 </body>
</html>


<--계층 구조를 만드는 태그-->

 태그

 설명 

 dl

 정의돈 내용을 설명하거나 계층 구조 목록은 만든다. 

 dt

 설명 리스트의 이름을 표시한다. 

 dd 

 설명리스트에 대한 세부 내용을 표시한다. 


<--글씨를 꾸며주는 태그-->

 태그

설명 

 b

 문자를 굵게 표시한다. 

 u 

 문자에 밑줄을 표시한다. 

 i 

 문자를 이텔릭체로 표시한다. 

 sub 

 아랫첨자로 표시한다. 

 sup 

 윗 첨자로 표시한다. 

 small

 문자를 조금 작게 표시한다.

 kbd

 키보드 입력으로 표시한다. 

 code

 컴퓨터의 코드로 표시한다. 



Ex)


<b>test</b><br />
<u>test</u><br />
<i>test</i><br />
hello 1<sub>test</sub><br />
hello 2<sup>test</sup><br />
<small>test</small></p>
<p><br /></p>
<p><br /></p>

test
test
test
hello 1test
hello 2test
test

▲이렇게 위 처럼 나오게 된다.

※<kbd>와 <code>는 잘 쓸줄 몰라서 쓰지는 않았다.


<--글자 위의 주석 태그-->

 태그

 설명 

 ruby

 문자 및 단어에 대한 루비 주석을 표현. 

 rt

 문자에 대한 설명이나 발음을 표현 

 rp 

 <ruby>태그를 지원하지 않을 경우 표시 형태를 정의 한다. 

 


<ruby>
	Korean
	<rt>코리아</rt>
</ruby>
Korean 코리아


'Programming > Html5 + CSS' 카테고리의 다른 글

CSS3 기초  (1) 2015.12.02
여러 태그03  (0) 2015.12.02
여러 태그02  (0) 2015.11.29
HTML5기본 구조 & Meta 테그  (0) 2015.11.25
Html5+CSS3 시작!  (0) 2015.11.25
블로그 이미지

KimMinSung

,

HTML5기본 구조 & Meta 테그

Programming/Html5 + CSS 2015. 11. 25. 14:50

<--HTML5의 기본 구조를 알아 봅시다!-->

 

<!DOCTYPE html>
<html>
<head>
	<title>타이틀 명</title>
</head>
<body>
 HTML5의 코드 들이나 자바 스크립트 등이 들어간다.
</body>
</html>

▲기본 구조는 위와 같다


<--HTML5문서의 규칙-->

1.HTML문서는 <html>로 시작하여 </html>로 끝나여 하고, 그 사이에는 <body>와 </body> 가 있다.

2.<head>영역은 <head>로 시작해서 </head>로 끝난다. 일반적으로는 웹 문서의 제목, 키워드 문자셋, 등 웹브라우저나 검색 엔진에 제공할 정보를 입력한다.

3.<head>영역 사이에는 <title>로 시작해서 </title>로 끝나는 태그가 올 수 있다. 여기에는 웹브라우저의 제목 표시줄에 나타나는 내용을 입력한다.

4.<body>영역에는 웹 문서의 실질적인 코드를 입력한다.

※사실 대부분 <이름>로 시작해서 </이름>으로 끝난다.


<--HTML5연습 하기-->


 
<!DOCTYPE html>
<html>
<head>
	<title>Hello Html5!</title>
</head>
<body>
<p>Hello Html5 world</p>
</body>
</html>

▲위는 간단하게 title제목을 Hello Html5라고 했고,  body에는 Hello Html5 world를 웹에 띄워주는 코드이다.

-Tip : 처음 빈 화면에서 html이라고 친 뒤 Tap키를 누르면 자동완성 기능이 작동한다.

-서브라임택스트를 사용하기 때문에 코드를 쓴 뒤 Ctrl+S를 눌러 저장하고 실행하였음.


<--Meta 태그-->

메타 태그는 일반적으로 <head>태그 안에 들어가는 태그인데, 웹 문서의 키워드, 주제 , 문자 셋 등을 정의 할 때 사용된다.

▲위에 보이는 빨간 박스가 그 예이다.


<--Meta 태그 구성-->


<!DOCTYPE html>
<html>
<head>
	<title>Meta tag</title>
</head>
<body>
 <meta name = "generator" content = "Edge Code">
->웹 사이트를 제작할 떄 어떤 툴을 사용했는지 표시
 <meta name = "author" content = "MS_Kim">
->웹 사이트의 저작자를 표시
 <meta name = "keywords" content = "HTML5 CSS3">
-> 검색엔진에서 검색할 웹 사이트의 키워드를 표시한다.
 <meta name = "descroption" content = "Make Web">
-> 웹 사이트의 주제를 표시합니다.

<meta http-equiv="content-type" content="text/html charset=euc-kr">
->문자 셋을 표시한다.
 </body>
</html>


▲태그의 구성은 위와 같이 되어있다.


<--Meta 태그 -->


 속성

값 

설명 

 name

 application-name

 웹의 이름을 표시.

 author

 문자의 저자를 표시 .

 description

 문서의 설명 표시.

 generator

 제작 툴을 표시.

 keywords

 문서의 키워드를 표시. 

 http-equiv

 content-type

 문서의 인코딩을 선언 .

 default-style 

 대체 스타일시트를 선언 .

 refresh

 문서의 새로 고침 주기 및 이동을 선언. 

 content

 텍스트

 http-equiv나 name의 속성 값을 표시.

 charset 

 문자 셋 

 문서의 문자 셋을 선언.


Tip: Html에서 한국어가 깨질 때 가있다. 그럴때 <meta charset="utf-8">을 <head>에 넣어 주면 깨지지 않고 잘 작동 될 것 이다.

'Programming > Html5 + CSS' 카테고리의 다른 글

CSS3 기초  (1) 2015.12.02
여러 태그03  (0) 2015.12.02
여러 태그02  (0) 2015.11.29
HTML5 시멘틱 구조 및 여러 태그  (0) 2015.11.25
Html5+CSS3 시작!  (0) 2015.11.25
블로그 이미지

KimMinSung

,

Html5+CSS3 시작!

Programming/Html5 + CSS 2015. 11. 25. 11:36

책은 학교에있는 "HTML5+CSS3 실무 테크닉" 책으로 공부하였다.

예제 파일 : http://www.cyber.co.kr


<--HTML5 소개-->

HTML5는 웹 문서를 만들기 위한 기본 프로그래밍 언어 HTML의 최신 기술이고 현재 웹 개발에 많이 사용되는 언어 이다.


<--HTML5 주요 기능-->

 주요 기능

설명 

 비디오/오디오 

자체적으로 비디오 및 오디오 지원 

 웹 폼 

사용자의 정보를 입력받기 위해 사용되는 다양한 형태의 인터페이스 지원 

 CSS3 

다양한 스타일 및 효과 제공

 시멘틱 

 웹 문서의 내용이 의미를 가질 수 있도록 시멘틱 태그를 추가하고, 이를 토앻 웹 문서의 효율적인 검색이 가능하도록 지원

 캔버스

캔버스 기능을 이용하여 그래프,차트,2D,3D 객체 등과 같은 복잡한 이미지를 처리하도록 지원 

 장치 제어

별도의 플러그인 및 프로그램 설치 없이 장치를 제어할 수 있도록 지원 

 오프라인 웹 애플리케이션  및 로컬 저장소

인터넷이 연결되어 있지 않은 경우에도 웹 애플리케이션이 정상적으로 수행될 수 있도록 지원 

 위치 정보

사용자의 지리적 위치 정보를 제공하도록 지원 


<--CSS3 소개-->

HTML5만 하면 웹이 멋져보이지 않지만 CSS3를 적용하면 더 자연스러워지고 멋지게 만들 수 있다.

<--CSS 개념-->

HTML에 다양한 모양을 추가하거나 변경하여 웹 사이트에 통일감을 부여하고 글자 크기나 모양, 줄 간격, 배경 색상 등을 자유롭게 제어할 수 있도록 한 것이 바로 CSS이다

<--CSS3 주요 기능-->

 주요 기능

설명 

 selector 

사용자 정의 형태를 추가 

 box 

박스에 관련된 속성을 지정 

 background, border 

배경 이미지와 테두리에 관련된 속성을 지정 

 텍스트 효과

텍스트 효과에 관련된 속성을 지정

 2D & 3D 

위치와 모양에 관련된 속성을 지정  

 애니매이션 

애니메이션 효과에 관련된 속성을 지정 

 멀티 컬럼 레이아웃

여러 개의 컬럼 레이아웃 속성을 지정 

 사용자 인터페이스 

사용자 인터페이스에 관련된 속성을 지정 


<--Java Script 소개-->

CSS가 모양이라면, JavaScript는 HTML을 동적으로 움직일 수 있개 하는 기능을 담당한다.


<--Web문서 작성 시 지켜야할 규칙-->

1.웹 문서에서 블록의 의미를 알 수 있는 태그를 사용하여 블록을 묶어준다. 대표적인 예로는 header, footer, nav, section등이 있다.

2.웹 문서의 제목에는 <h1>~<h6>태그를 사용한다.

3.HTML태그 내에 모양을 위해 사용하던 속성은 모두 CSS로 표현한다. 글자 크기,색상, 배경 등에서 사용하던 요소들이 이에 해당한다.

4.웹 문서의 모양을 표현하는 것들은 모두 CSS 문서에 작성하고, HTML문서와 CSS 문서는 반드시 분리해야 한다. 그래야만 추후 웹 문서를 수정하기가 수얼하다. 예를 들어 웹 문서 100개의 글자 색상을 바꿔야 한다고 가정했을 때, CSS 문서가 분리되어 있지 않다면 100개의 HTML문서를 모두열어 수정해야 하지만, 분리되어 있다면 CSS문서 하나만 열어 수정하면 우리가 원하는 작업을 간단히 끝낼 수 있기 때문이다.

5.웹 문서의 액션을 담당하는 JavaScript에서 공통으로 사용되는 기능은 웹 문서 내에 작성하지 않고 공통 JavaScript파일을 만들어 반드시 분리해야 된다.


<--Web IDE-->

웹의 IDE (개발 툴)로는 대표적으로 웹 스톰과 서브라임텍스트등이 있다.

서브라임텍스트3 : http://www.sublimetext.com/3 

웹 스톰 : https://www.jetbrains.com/webstorm/

'Programming > Html5 + CSS' 카테고리의 다른 글

CSS3 기초  (1) 2015.12.02
여러 태그03  (0) 2015.12.02
여러 태그02  (0) 2015.11.29
HTML5 시멘틱 구조 및 여러 태그  (0) 2015.11.25
HTML5기본 구조 & Meta 테그  (0) 2015.11.25
블로그 이미지

KimMinSung

,

공지사항

태그목록

최근에 받은 트랙백

글 보관함

달력

«   2015/11   »
일 월 화 수 목 금 토
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

티스토리툴바