개발/HTML에 해당되는 글 7건

HTML5 기본태그 (비디오 태그)

개발/HTML 2013. 11. 26. 11:27

1. <video> ~ </video> 태그
동영상을 삽입해주는 태그이다.
즉, 태그를 이용하여 동영상을 삽입할 수 있다.
HTML5를 이용하여 삽입한 동영상은 자동재생 안되므로 컨트롤도구가 삽입되어야 한다.

 

2.속성

 (1) src
    동영상 화일의 경로 즉, URL을 써주는 속성이다.
    형식

<video src=“화일명” 또는 주소>

(2) controls

동영상 화일을 조절할 수 있는 조절기를 보이게 할 것인지 아닌지를 결정할 수 있다.
컨트롤 막대가 화면에 표시되며 재생/일시정지 단추, 트랙바, 볼륨 조절기 등이 있다.

<video src=“화일명” controls>

(3) Autoplay
    동영상을 자동으로 재생할 것인지를 결정하는 속성
    <video src=“화일명” autoplay>
(4) Loop
    동영상화일을 반복할지 안 할지를 설정할 수 있다.
    <video src=“화일명” loop>
    <video src=“화일명” loop>
(5)Width
    동영상이 재생될 너비를 설정
(6)Height
    동영상이 재생될 높이를 설정

<video src=“화일명”width=      height=   >

(7)preload2.속성
    동영상 파일을 다운로드하여 재생하게하는 방식
    auto: 자동으로 다운로드
    none: 사용자가 컨트롤을 조작하기 전까지 다운로드 금지
    Matadata : 메타데이터를 가져오며 사용자가 컨트롤을 조작하면 실제 비디오부분을 다운한다.

 

'개발 > HTML' 카테고리의 다른 글

HTML5 기본태그 (오디오 태그)  (0) 2013.11.26
HTML5 기본태그 (이미지 태그)  (0) 2013.11.26
HTML5 기본태그 (테이블 태그)  (0) 2013.11.26
HTML5 기본 태그( 목록 태그)  (0) 2013.11.26
HTML5 기본 태그( 글과 관련된 태그)  (0) 2013.11.21
,

HTML5 기본태그 (오디오 태그)

개발/HTML 2013. 11. 26. 11:22

1. <audio> ~ </audio>
웹브라우저에서 플러그인의 도움없이도 음악멀티미디어를 재생할 수 있게 해주는 태그이다.
아직까지는 브라우저마다 재생할 수 있는 음악파일이 동일하지 않기 때문에 종류마다 하나씩 여러 줄의 src의 url을 적어주어야한다.
많은 속성을 동반하지만 중요한 속성 몇가지만 알아보겠다.

 

 

2.속성

(1) src
    음악화일의 경로 즉, URL을 써주는 속성이다.
    형식
        <audio src=“화일명” 또는 주소>
 (2) controls
    소리화일을 조절할 수 있는 조절기를 보이게 할 것인지 아닌지를 결정할 수 있다.
    <audio src=“화일명” controls>
(3) Autoplay
    음악을 자동으로 재생할 것인지를 결정하는 속성
    <audio src=“화일명” autoplay>
(4) Loop
    소리화일을 반복할지 안할지를 설정할 수 있다.
    <audio src=“화일명” loop>
(5) preload
    음악을 재생하기 전에 모두 불러올지를 결정하는 속성이다.
    <audio src=“화일명” preload>

 

'개발 > HTML' 카테고리의 다른 글

HTML5 기본태그 (비디오 태그)  (0) 2013.11.26
HTML5 기본태그 (이미지 태그)  (0) 2013.11.26
HTML5 기본태그 (테이블 태그)  (0) 2013.11.26
HTML5 기본 태그( 목록 태그)  (0) 2013.11.26
HTML5 기본 태그( 글과 관련된 태그)  (0) 2013.11.21
,

HTML5 기본태그 (이미지 태그)

개발/HTML 2013. 11. 26. 10:20

- Image의 줄임말
- 이미지를 삽입해주는 태그
- 반드시 src라는 속성을 동반한다.
- </img>태그는 기록하지 않아도 된다.
- 사용법
    <img src=“경로/이미지화일 이름”>
    경로 : 상대경로만 사용한다.
    이미지를 삽입하려는 웹페이지와 같은 폴더에 있을 때 : 이미지 화일명만 기록한다.(나머지의 경우는 경로를     써주어야한다.)


 

(1) Src속성
    <img src=“경로/이미지 화일명”> 형식으로 쓰인다.
    1)경로
    웹문서와 이미지가 같은 폴더에 있는 경우
        Src=“이미지 화일명”
    이미지가 웹문서의 바로 하위 폴더에 있는 경우
        Src=“폴더명/이미지 화일명”
    이미지가 웹문서의 바로 상위 폴더에 있는 경우
    Src=“../이미지 화일명”


(2) Alt, title
    - Alt (Alternative) : 이미지가 제대로 로드 되지 않았을 경우 대체 문구를 나타낸다.
    - Title : 이미지 위에 마우스 포인터를 가져다 대었을 때 나타나는 풍선도움말의 문구를 나타낸다.


(3) Align
    -Align =Left, right 의 경우
        정렬과 관련된 속성으로, 텍스트와 이미지가 함께 있을 경우 텍스트에 대한 이미지의 위치를 지정한다
    -Align = top, middle, bottom 의 경우
        역시 정렬과 관계되는 속성이며, 이미지와 텍스트가 함께 있을 경우 이미지에 대한 텍스트의 수직 정렬에         관한 내용이다.


(4) Border
    <img src=“이미지화일명”border=숫자>형식으로 사용된다.
    이미지 테두리를 만들어 준다.
    이미지에 하이퍼링크가 만들어졌을 경우는 border= 0을 입력해 테두리를 없애주어야한다.
     숫자는 픽셀을 의미한다.


(5) Height, Width
    이미지의 너비와 높이를 설정해 주는 속성이다.
    <img src=“이미지화일명” Height=숫자 Width=숫자 >형식으로 사용된다.
    이미지의 크기를 HTML안에서 재설정하는 기능으로 너무 크게 하거나 너무 작게 하면 이미지가 깨지므로

작은 숫자값 안에서 조정해야 한다.  

 

 

'개발 > HTML' 카테고리의 다른 글

HTML5 기본태그 (비디오 태그)  (0) 2013.11.26
HTML5 기본태그 (오디오 태그)  (0) 2013.11.26
HTML5 기본태그 (테이블 태그)  (0) 2013.11.26
HTML5 기본 태그( 목록 태그)  (0) 2013.11.26
HTML5 기본 태그( 글과 관련된 태그)  (0) 2013.11.21
,

HTML5 기본태그 (테이블 태그)

개발/HTML 2013. 11. 26. 10:08

1. 테이블 기본태그
    <table>~</table> 태그는 테이블(표)을 만들어 준다. 행과 열로 구성된다.
    <tr>~</tr> 태그는 각 행을 기술할 때 사용하며 각행을 기술할 때마다 <TR>태그로 정의해 준다.
    <td>~</td>태그는 테이블 안의 데이터를 넣어준다. 즉, 칸을 만들어 준다.
    <th>~</th>태그는 테이블 안의 의 제목을 지정합니다.기본 글꼴은 볼드체,기본 정렬은 중앙정렬이다.
ex)
<!doctype html>
<HTML>
<HEAD><TITLE> 테이블연습</TITLE>
</HEAD>
<BODY>
<TABLE>
   <TR>
       <TD> 1행 1열 </TD>
       <TD> 1행 2열</TD>
   </TR>
   <TR>
       <TD> 2행 1열</TD>
       <TD> 2행 2열</TD>
   </TR>
   <TR>
       <TD> 3행 1열</TD>
       <TD> 3행 2열</TD>
   </TR>
</TABLE>
</BODY></HTML>

 

2. 테이블의 속성
    (1) BORDER, BORDERCOLOR
       1) BORDER=n 
            테이블의 테두리 굵기를 정의한다.
            N은 픽셀값을 의미
        2)BORDERCOLOR
            테이블의 테두리의 색을 지정한다.
            BORDERCOLOR="색명 또는 RGB값“의 형식으로 사용한다.

 

(2) WIDTH ,HEIGHT
    1)WIDTH
        테이블의 너비를 설정한다.
        WIDTH=n(n%)의 형식으로 사용한다.
        n은 픽셀이나 퍼센트 값을 설정할 수 있는데, 픽셀은 절대값을 나타내고, 퍼센트는 실행되는 창의

  비율로 나타낸다.

2)HEIGHT=n(n%)
    테이블의 높이를 설정한다.
    HEIGHT=n(n%) 의 형식으로 사용한다.
    n은 픽셀이나 퍼센트 값을 설정할 수 있는데, 픽셀은 절대값을 나타내고, 퍼센트는 실행되는 창의     비율로 나타낸다.


(3) ALIGN
    ALIGN=LEFT/CENTER/RIGHT : 각각 좌측, 중앙, 우측 정렬을 지정합니다.
    1)<table align=“ “>
        테이블 자체에대한 정렬이다. 즉, 실행되는 창에 대한 테이블의 위치이다.
    2)<tr align=“ “>
        한 줄에 대한 정열. 해당되는 줄의 셀에 위치하는 내용에 대한 정렬이다.
    3)<td align=“ “>
        한 칸에 대한 정열. 해당되는 칸의 셀에 위치하는 내용에 대한 정렬이다.

 

(4) BGCOLOR
    BGCOLOR="색상명 또는 RGB값" 
        1)<table bgcolor=“ “>
             테이블 전체의 바탕색을 지정합니다.
        2)<tr bgcolor=“ “>
             테이블 한 줄의 바탕색을 지정합니다.
        3)<td bgcolor=“ “>
             테이블 한 칸의 바탕색을 지정합니다.

 

(5) CELLSPACING, CELLPADDING
    1) CELLSPACING=n 
        <table>태그의 속성으로 테이블의 셀과 셀 사이의 간격을 n 픽셀 단위로 지정합니다.
         실무에서는 cellspacing=0 값이 주로 사용된다.
     2) CELLPADDING=n 
         <table>태그의 속성으로 테이블에서 문자와 셀 사이의 간격을 n 픽셀 단위로 지정합니다 
        실무에서는 cellpadding=0 값이 주로 사용된다


(6) COLSPAN, ROWSPAN
    1)COLSPAN=n
        칸(column)을 합침.
        즉, 오른쪽으로 n개 만큼의 셀을 하나로 합친다.(기본값은 1)
    2)ROWSPAN=n 
        줄(row)을  합침.
        즉, 아래쪽으로 n개 만큼의 셀을 하나로 합친다.(기본값은 1)


(7) NOWRAP

 

'개발 > HTML' 카테고리의 다른 글

HTML5 기본태그 (오디오 태그)  (0) 2013.11.26
HTML5 기본태그 (이미지 태그)  (0) 2013.11.26
HTML5 기본 태그( 목록 태그)  (0) 2013.11.26
HTML5 기본 태그( 글과 관련된 태그)  (0) 2013.11.21
HTML5 기본 문서  (0) 2013.11.21
,

HTML5 기본 태그( 목록 태그)

개발/HTML 2013. 11. 26. 09:47

1. <li>태그
    -<LI>~</LI> : 항목을 추가할 때 쓰며 종료 태그 </LI>는 생략할 수 있다.
                         리스트에 독립적인 번호를 부여할 때 사용한다.
    -(순서 없는 목록)TYPE=disc,circle,square(소문자로 사용)
    -DISC: ●
    -CIRCLE:○
    -SQUARE:■
ex)
<!doctype html>
<html>
<head><title> 목록태그연습</title></head>
<body>
<h2>리스트 작성하기 </h2>
<hr>
<br>
<font size=5 color=blue> 방 향 </font>
<li> 동(east)</li>
<li> 서(west)</li>
<li> 남(south)</li>
<li> 북(north)</li>
</body>
</html>

 

2. 순서 있는 목록 만들기
    - Ordered List의 단어를 줄여서 만든 태그.
    - <OL>~</OL>태그를 이용해서 작성한다.
    - 순서 있는 목록 즉, 목록 앞에 숫자를 붙여서 순서를 가지는 목록을 만들 때 사용합니다.(기본값은 숫자) 
     -TYPE 속성
        TYPE=A, a, I(i), i, 1 의 값을 가질 수 있다. 
        A: 대문자 알파벳  a: 소문자 알파벳 
        I: 대문자 로마숫자  i: 소문자 로마숫자 
        1: 숫자
        START=n  리스트의 시작 번호를 임의로 바꿀 수 있다.

ex)

<!doctype html>
<html>
<head><title> 목록만들기 </title></head>
<body>
<h2> 순서 있는 목록 </h2>
<hr color=orange noshade>
<br><font size=4 color= red><b> 요일</b></font>
<font size=4 color= blue>
<OL type=1>
<li> 월요일</li>
<li> 화요일</li>
<li> 수요일</li>
<li> 목요일</li>
<li> 금요일</li>
<li> 토요일</li>
<li> 일요일</li> </font>
</OL></body></html>

 

3. 순서 없는 목록 만들기
    - Unordered List의 단어를 줄여서 만든 태그.
    - <UL>~</UL>태그를 이용해서 작성한다.
    - 목록 앞에 기호를 붙여서 순서 없는 목록을 만들 때 사용합니다.(기본값은 DISC) 
    - TYPE=disc, cir cle, square     
        DISC: ●
        CIRCLE:○
        SQUARE:■
ex)

<!doctype html>
<html>
<head><title> 목록만들기</title></head>
<body>
<h2> 순서 없는 목록 </h2>
<hr color=orange noshade>
<br><font size=4 color= red><b> 요일</b></font>
<font size=4 color= blue>
<UL type=square>
<li> 월요일</li>
<li> 화요일</li>
<li> 수요일</li>
<li> 목요일</li>
<li> 금요일</li>
<li> 토요일</li>
<li> 일요일</li> </font>
</UL></body></html>

'개발 > HTML' 카테고리의 다른 글

HTML5 기본태그 (오디오 태그)  (0) 2013.11.26
HTML5 기본태그 (이미지 태그)  (0) 2013.11.26
HTML5 기본태그 (테이블 태그)  (0) 2013.11.26
HTML5 기본 태그( 글과 관련된 태그)  (0) 2013.11.21
HTML5 기본 문서  (0) 2013.11.21
,

HTML5 기본 태그( 글과 관련된 태그)

개발/HTML 2013. 11. 21. 20:58

1. <Hn> ~ </Hn>태그

-제목을 나타내는 태그

-H1 에서 H6까지 있으며 글씨 크기는 뒤로 갈수록 작아진다

 

2. <p> ~ </p>태그

-paragraph을 의미한다.

-단락을 만들어주는 태그

-<p>태그는 두번 엔터키를 친 효과가 있고 <br>태그는 한번 엔터한 효과가 있다

 

3. <br>태그

-콘텐츠의 줄을 분리하는 역학을 한다.

-개행태그 불린다

 

4. <a>태그

-하이퍼 텍스트를 만들어주는 태그이다

-Href 속성을 이용해서 하이퍼링크가 될 페이지를 지정한다.

<a href="#"> ~ </a>

 

5. 글자 스타일

-<b> ~ </b> : bold체를 만든다

-<i> ~ </i> :이탤릭체를 만든다.

-<sub> ~ </sub> : 아래첨자를 만든다

-<sup> ~ </sup> : 위첨자를 만든다

-<ins> ~ </ins> : 밑줄그은 문자를 만든다

-<del> ~ </del> : 취소선을 만든다(가운데 선)

 

6. 루비문자 (ruby character)

-일본어에서 자주 사용되는 글자형식

-<ruby> ~ <ruby>, <rt> ~ </rt> 태그

-<rt> 를 지원하지 않는 브라우저에서는 <rp>를 사용한다.

'개발 > HTML' 카테고리의 다른 글

HTML5 기본태그 (오디오 태그)  (0) 2013.11.26
HTML5 기본태그 (이미지 태그)  (0) 2013.11.26
HTML5 기본태그 (테이블 태그)  (0) 2013.11.26
HTML5 기본 태그( 목록 태그)  (0) 2013.11.26
HTML5 기본 문서  (0) 2013.11.21
,

HTML5 기본 문서

개발/HTML 2013. 11. 21. 19:41

1. 시맨틱 (semantic)태그의 의미

-시맨틱의 단어 뜻은 의미를 부여했다는 뜻

-HTML5에서는 태그만 보고도 문서를 쉽게 이해 할 수 있도록 의미를 가지는 태그를 도입

-종류 : <header> <hgroup> <nav> <article> <section> <aside> <footer> 등

 

2. <header>
     -사이트 전체의 머리부분이 된다.
     -<head>태그와의 차이점 
             <head>태그는 문서에서 단 한번만 사용하지만 <header>는 여러번 사용 가능
     -<head>태그는 <html>태그 다음에 입력하나,<header>태그는 본문 <body>태그 안에서 사용가능 하다

 

3. <hgroup>

-<hgroup>태그는 제목과 그의 관련된 부제목을 묶어주는 역할 담당

-<header>와의 차이점

<header>태그는 페이지를 구성하기 위한 구분단위, 즉 내용에 따른 페이지 구성분류 단위이고

<hgroup>은 페이지 전체 구조에 대한 개념으로 쉽게 눈에 들어오게하는 역할을 담당

 

4. <nav>

-<nav> 네비게이션 표현을 위한 태그

-<nav>는 본문 위치에 영향을 받지 않는다, <header><footer><aside>중 어느 위치도 상관없다.

즉 <body>태그 안에는 어디든 사용할 수가 있다.

 

5. <article>

-<article>태그는 웹페이지 상에서의 실제 내용을 의미

-이 태그를 사용한 웹컨텐츠는 다른곳에 배포하거나 재사용가능

-검색엔진의 검색로봇에서는 이 태그가 사용된 컨텐츠를 배포할 수 있는 컨텐츠로 인식

 

6. <section>

-이 태그는 웹컨텐츠들을 그룹으로 묶어주는 역할 담당

-<article>태그와는 달리 <section>태그로 묶은 컨텐츠는 재배포 할 수 없다.

   단, <section>태그 안에 <article>태그를 사용할 수 있다.

   또 <article>안에 <section>사용도 가능하다

 

7. <aside>

-웹 컨텐츠 제작시 주 내용이 아닌 왼쪽이나 오른쪽에 부수적인 내용이 들어가는 부분에 사용

 

8. <footer>

-웹사이트의 저작권 정보나 저작권표기와 같은 내용이 들어가는 부분

 

 

 

 

'개발 > HTML' 카테고리의 다른 글

HTML5 기본태그 (오디오 태그)  (0) 2013.11.26
HTML5 기본태그 (이미지 태그)  (0) 2013.11.26
HTML5 기본태그 (테이블 태그)  (0) 2013.11.26
HTML5 기본 태그( 목록 태그)  (0) 2013.11.26
HTML5 기본 태그( 글과 관련된 태그)  (0) 2013.11.21
,
1

티스토리툴바