'html5'에 해당되는 글 18건

Programming/HTML CSS
HTML5에 들어서 몇가지 시멘틱(Semantic) 태그(tag)가 등장했는데 이들 태그는 해당 영역이 웹페이지에서 어떠한 역활을 수행하는지를 알려주는 역활을 합니다.
<header>
 <h1>제목</h1>
</header>
<section>
 <article>
  <p>내용~~~~</p>
 </article>
 <article>
  <h1>다른 내용~~~</h1>
  <p>~~~~~~~</p>
 </article>
</section>
▶ 몇가지 시멘틱 태그를 사용한 예제

실제 위 내용을 웹브라우저(Web Browser)에서 살펴보면 시멘틱 태그를 사용하든 안하든 보여지는건 같다는것을 알 수 있습니다.

시멘틱 태그는 사용자에게 보여주기 위해서라기 보다는 태그가 사용된 각 영역이 정확히 어떠한 역활을 하고 있는지를 알려주기위한 용도입니다.

이렇게 하면 검색엔진등에서 웹페이지의 데이터를 수집할때 좀도 효휼적으로 동작하는것이 가능해 지겠죠. 뿐만 아니라 문서의 각영역을 구분하기 위한 다른 용도로도 사용될 수 있을 것입니다.

아래는 대략적인 html5의 시멘틱 태그입니다.

 aside  문서의 사이드 부분
 article  실제적인 내용
 header  문서의 헤더
 nav  문서의 탐색 부분
 footer  문서의 하단 부분
 section  특정 내용의 article 그룹

0 0
Programming/HTML CSS
1. source 사용
<audio controls="controls">
 <source src="sample.mp3" type="audio/mp3" />
 <source src="sampe.ogg" type="audio/ogg" />
</audio>

<video controls="controls">
 <source src="sampe.mp4" type="video/mp4" />
 <source src="sampe.webm" type="video/webm" />
</video>
▶ 오디오나 비디오 파일의 경우 브라우저 마다 재생할 수 있는 파일형식이 다르므로 이에 대응하기 위해 audio태그나 video태그에 source태그를 사용하여 재생할 수 있는 여러 파일 형태를 제공하도록 합니다.

위 예제에서 audio태그는 처음에 mp3 파일을 재생할 수 없는 경우 대신 ogg를 재생할 수 있도록 합니다. 대부분의 경우 mp3와 ogg를 제공하면 거의 모든 브라우저에서 음악을 재생할 수 있습니다.

2. source 속성

(1) type

이 속성이 값으로는 파일타입을 지정합니다. 예를 들어 mp3의 경우 audio/mp3 와 같이 지정하면 됩니다. 이 속성을 지정해 놓으면 브라우저에서는 파일을 실제 로드하지 않고도 지정된 형식을 통해 자신이 재생할 수 있는 파일인지를 판단할 수 있게 됩니다.

성능상 이로운 점이 있으므로 되도록 type을 지정하길 권장합니다.
0 0
Programming/HTML CSS
스프라이트(sprite) 이미지(image)란 아래의 경우처럼 여러 이미지(image)를 한곳에 모아놓은 형태를 말합니다.

▶ 마리오(mario) 관련 스프라이트(sprite)

웹(web)에서 불러와야 하는 이미지(image)가 여러개인 경우 그 만큼의 요청을 해야 하지만 스프라이트(sprite) 이미지(image)를 사용하면 한번 요청으로 여러 이미지(image)를 한번에 받아오는 이점을 갖게 됩니다.

포토샵(photoshop) 등의 툴(tool)등을 사용하여 직접 스프라이트(sprite)를 만들 수도 있으나 아래와 같은 사이트(site)를 이용하면 간단하게 스프라이트(sprite)를 생성할 수 있습니다.

http://csssprites.com/

예제에서는 세개의 이미지(image)를 사용하여 아래와 같은 스프라이트(sprite)를 생성하였습니다.


스프라이트(sprite)가 생성되면 다음과 같이 생성된 스프라이트(sprite) 이미지(image)를 어떻게 사용할 수 있는지에 대한 css 코드(code)도 함께 보여집니다.


해당 css를 참고하여 html을 구성하면 다음과 같이 할 수 있을 것입니다.

#main_div {
   width: 206px;
   height: 50px;
   background: url('result.png');
}
▶CSS
<div id="main_div">
</div>
▶HTML

각각의 버튼모양을 따로 표시하려면 background-position 속성을 사용합니다.
#main_div_1 {
   width: 64px;
   height: 64px;
   background: url('result.png');
   background-position: 0px, 0px;
}

#main_div_2 {
   width: 64px;
   height: 64px;
   background: url('result.png');
   background-position: -74px, 0px;
}

#main_div_3 {
   width: 64px;
   height: 64px;
   background: url('result.png');
   background-position: -132px, 0px;
}
▶CSS
<div id="main_div_1">
</div>
<br />
<div id="main_div_2">
</div>
<br />
<div id="main_div_3">
</div>
▶HTML
0 0
Programming/HTML CSS
1. track 사용
<video width="200px" class="video-js vjs-default-skin" data-setup="{}" controls="controls">
 <source src="sample.mp4" type="video/mp4" />

 <track kind="subtitles" src="track.srt" srclang="ko" label="korean" />
 <track kind="subtitles" src="track.srt" srclang="en" label="english" />
</video>
▶ track tag는 video tag를 통해 영상을 재생할때 자막을 보여줄 수 있도록 하는 tag입니다. track tag를 통해 자막을 보여주려면 아래와 같은 format으로 이루어진 자막 file을 제공해야 합니다.

1
00:00:000,000 --> 00:00:05,000
<p>안녕하세요.</p>

2
00:00:07,000 --> 00:00:10,000
<h2>반갑습니다.</h2>

첫번째 행의 숫자는 자막번호를 의미하며 두번째 시간은 자막을 표시할 시간입니다. 세번째 행에 실제 보여줄 자막을 넣고 마지막 4번째 행에 빈줄을 하나 추가하는 형식으로 자막을 만들면 됩니다.

여러 언어로된 자막을 제공하는 경우 해당 언어별로 track tag를 다중적으로 사용할 수 있습니다. 자막 file의 확장자는 srt 이며 srt 는 HTML5의 자막 file 확장자를 의미합니다.

track tag를 지원하는 browser가 많지 않습니다만 video.js plug-in을 사용하면 어느정도 문제를 해결할 수 있습니다.

2. track 속성

(1) kind

이 속성은 subtitles가 기본값이며 일반적인 자막을 영상에 보여준다는 의미합니다.

captions 값으로 설정하는 경우는 영상이 음소거상태이거나 영상을 보는 대상이 청각장애등인 경우 등등.. 소리를 들을 수 없는 경우에 자막과는 별도로 영상을 이해하기 위한 여러 음향효과를 보여준다는 것을 의미하게 됩니다.

descriptions은 영상에 대한 설명을 별도의 음성 file로 제공하는 경우에 사용됩니다. 영상을 보는 대상이 시각장애등의 이유로 영상을 제대로 볼 수 없는 경우를 대비합니다.

(2) src

자막파일의 url 경로를 지정합니다. 자막 파일의 확장자는 srt입니다.

(3) srclang

자막파일을 언어별로 제공하는 경우 해당 자막파일의 언어를 지정하도록 합니다.

(4) label

자막파일을 언어별로 제공하는 경우 사용자가 플레이어에서 해당 언어를 선택할때 표시할 내용을 입력합니다.

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

[CSS] 웹폰트(Web font)  (0) 2013.08.19
[CSS3] 초기화 코드 사이트  (0) 2013.07.01
[HTML5] track (video 자막)  (0) 2013.06.28
[CSS3] 선택자 - 상태 선택  (0) 2013.06.24
[HTML] base  (0) 2013.06.20
[CSS3] linear-gradient  (0) 2013.06.19
0 0
Programming/HTML CSS
1. label 사용
<form>
 <label for="user_name">이름을 입력하세요.</label>
 <input type="text" id="user_name" name="user_name" />
 <input type="submit" value="전송" />
</form>
▶ input 태그로 데이터를 입력받을 때 해당 input 태그에 대한 설명을 label태그를 통해 붙여줍니다.

2. label 속성

(1) for

어떤 input 요소를 대상으로 하는지를 알려주기 위해 해당 input의 id를 지정합니다. 이렇게 하면 사용자가 label을 클릭하는등의 선택동작만으로 해당 input에 포커스를 자동으로 맞춰줄 수 있습니다.

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

[CSS3] linear-gradient  (0) 2013.06.19
[CSS3] 선택자 - 자손 선택  (0) 2013.06.17
[HTML / HTML5] label  (0) 2013.06.13
[HTML5] header, nav, aside, section, article, footer (구조태그)  (0) 2013.06.12
[CSS3] display  (0) 2013.06.11
[CSS3] 선택자 - 태그 선택  (0) 2013.06.10
0 0
Programming/HTML CSS
HTML5 에서 헤더구조에 사용되는 태그는 다음과 같습니다.

1. header

헤더의 전체적인 구조를 나타냅니다. 헤더는 header로 시작해 header로 끝납니다.

2. hgroup

헤더에서 사이트의 제목이나 슬로건이 담겨지는 부분입니다.

3. nav

사이트의 메뉴를 이루는 부분입니다. 메뉴는 사이트의 전체메뉴이거나 특정한 상황에서만 보여지는 메뉴일 수 있으며 필요하다면 header안에서 2개 이상의 nav요소가 사용될 수 있습니다.

4. section

이 태그안에는 화면에 보여일 웹페이지의 주요 컨텐츠를 담아둡니다. 일종의 본문에 해당합니다.

5. article

section 안에서 주제별로 구분되는 본문을 배치합니다.

6. aside

화면의 좌, 우측에 보여지는 컨텐츠를 포함하는 영역입니다.
 
7. footer

사이트의 하단부분을 구성하는 영역입니다.
<body>
 <header>
  <hgroup>
   <h1>CLIEL</h1>
  </hgroup>
  <nav>
   <ul>
    <li>HOME</li>
    <li>MENU1</li>
    <li>MENU2</li>
   </ul>
  </nav>
 </header>
 <div>
  <section>
   <article>A couple of days ago I returned from my trip to the U.S.</article>
   <article>We had traveled on business to Phoenix, AZ.</article>
   <article>Although there were no arrangements to do any flying, I had decided to bring a flight suit with me. I figured, you never know… </article>
  </section>
  <aside>
   How I Flew a Huey in Arizona
  </aside>
 </div>
 <footer>
  HTML5
 </footer>
</body>
위에서 말씀드린 태그는 사이트의 구조에서 각각의 부분이 어떤 역활을 하고 있는지 명확하게 구분하기 위한 목적이 강합니다. 소스상에서 구분(정확히는 검색엔진등에서)되는 용도이므로 태그가 실제 웹 브라우저에서 표시될때 어떤 특별한 처리가 이루어 지지는 않습니다.

그냥 각 태그에 의미를 부여 해놓은 형태인데 이것은 '시멘틱 웹'이라 표현합니다.

실제로 header나 hgroup, nav 태그를 제거해도 브라우저에 표시되는 모양새는 태그를 사용한 경우와 별반 다르지 않습니다. 따라서 필요하다면 개발자나 디자이너가 직접 CSS를 정의하여 목적에 맞게 디자인을 입혀야 합니다.

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

[CSS3] 선택자 - 자손 선택  (0) 2013.06.17
[HTML / HTML5] label  (0) 2013.06.13
[HTML5] header, nav, aside, section, article, footer (구조태그)  (0) 2013.06.12
[CSS3] display  (0) 2013.06.11
[CSS3] 선택자 - 태그 선택  (0) 2013.06.10
[HTML] frameset, frame  (2) 2013.06.07
0 0
Programming/HTML CSS
 1. span 사용
안녕하세요.
<span>우리나라</span>
<span>대한민국</span>
반갑습니다.
▶ inline 형태로 위치하도록 합니다. 이는 화면 특정 너비 전체가 아닌 해당 영역만큼의 공간만 차지함을 의미합니다.

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

[CSS3] 선택자 - 후손 선택  (0) 2013.06.03
[CSS3] visibility  (0) 2013.05.29
[HTML / HTML5] span  (0) 2013.05.28
[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
[CSS3] 선택자 - 구조 선택  (0) 2013.05.22
[HTML5] video (비디오)  (0) 2013.05.20
0 0
Programming/HTML CSS
1. video 사용
<video src="sample.mp4" controls="controls"></video>
▶지정된 mp4 file을 재생합니다.

표준 tag만 사용하면 browser마다 player의 모양새가 틀릴 수 있으며 HTML5를 지원하지 않는 browser 에서는 동작하지 않을 수도 있습니다. 대신 video.js plug-in(http://videojs.com)을 사용하면 이 문제를 일부 해결할 수 있습니다.

사용방법은 우선 head사이에 아래 두줄의 tag를 추가하고
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
video tag에서 다음과 같이 class와 data-setup을 지정해 두기만 하면 됩니다.
<video width="200px" src="sample.mp4" class="video-js vjs-default-skin" data-setup="{}" controls="controls"></video>
다만 HTML5를 지원하지 않는 경우에는 flash로 대체됩니다. 따라서 flash를 사용할 수 없는 일부 smart phone이나 tablet 등의 mobile기기에서는 작동되지 않을 수 있습니다.(대신 HTML5가 되겠지...^^)

동영상 포멧은 브라우저 마다 지원하는 형태가 달라질 수 있으나 mp4와 ogv 형식을 같이 지원하면 대부분의 브라우저에서 문제없이 재생될 수 있습니다.

2. video 속성

(1) src

재생할 file이 존재하는 url경로를 지정합니다.

(2) poster

video 재생전 보여줄 image의 url을 지정합니다.

(3) preload

video를 모두 load한뒤에 재생하도록 합니다. preload만 입력해도 되고 preload="preload" 처럼 속성을 지정해도 됩니다. 참고로 후자는 XHTML5 표기방법에 해당합니다.

(4) autoplay

자동으로 재생할지를 지정합니다. 속성지정은 preload와 같습니다.

(5) loop

반복재생할지 지정합니다. 속성지정은 preload와 같습니다.

(6) controls

재생, 정지등의 interface를 표시하도록 합니다. 속성지정은 preload와 같습니다.

(7) width

player의 가로 크기를 지정합니다. 값은 pixel단위 정수로 지정합니다.

(8) height

player의 세로 크기를 지정합니다. 속성 지정은 width와 같습니다.

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

[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
[CSS3] 선택자 - 구조 선택  (0) 2013.05.22
[HTML5] video (비디오)  (0) 2013.05.20
[CSS3] opacity  (0) 2013.05.15
[CSS3] 선택자 - 링크 선택  (0) 2013.05.14
[HTML / HTML5] div  (0) 2013.05.13
0 0
Programming/HTML CSS
1. div 사용
안녕하세요.
<div>우리나라</div>
<div>대한민국</div>
반갑습니다.
▶ block 형태로 특정 영역을 나누도록 합니다. 하나의 div 영역이 가로영역을 기준으로 전체를 차지하는 형태입니다.


2. div CSS

(1) width, height

div의 넓이와 높이에 대한 크기를 설정합니다.

(2) margin, padding

padding은 border보다 한단계 더 안쪽에 대한 여백을 지정하며 padding-top(위쪽), padding-bottom(아래쪽), padding-left(왼쪽), padding-right(오른쪽) 속성을 사용합니다.

margin은 가장 외곽에 대한 속성이며 여백을 지정합니다. margin-top은 위쪽, margin-bottom은 아래쪽, margin-right는 오른쪽, margin-left는 왼쪽여백을 의미합니다.

위 두 속성은 margin-bottom, margin-left, margin-right, margin-top 처럼 속성을 지정해 각각의 면에 대한 크기를 지정할 수 있으며 만약 값을 margin: 10px 10px 10px 10px; 처럼 크기를 지정하면 왼쪽부터 top, right, bottom, left 로 적용됩니다. 또는 margin: 10px 10px; 로 두개의 값만을 사용하면 첫번째 값은 top, bottom으로 두번째 값은 left, right로 적용됩니다.

(3) box-sizing

이 속성의 값을 content-box로 지정하면 margin이나 border, padding와 같은 속성을 제외하고 width와 height속성의 값이 내부의 크기만을 지정하도록 합니다. 이 값은 기본값입니다.

반면 border-box로 지정하면 div의 크기에 margin, border, padding까지 모두 합산하여 width와 height 값이 적용되도록 합니다.

(4) box-shadow

박스에 그림자 효과를 주는 속성이며 아래와 같이 속성을 지정합니다.
text-shadow: 5px 3px 10px black;
첫번째 값은 오른쪽에 퍼질 그림자의 크기를 두번째는 아래쪽에 퍼질 그림자의 크기를 의미합니다. 세번째는 그림자의 선명도를 나타내며 마지막 네번째는 그림자의 색상입니다.

만일 여러 색상의 그림자를 동시에 구현하고자 한다면 위의 속성지정을 ,(콤마)를 사용해 원하는 만큼 여러번 작성하면 됩니다.
text-shadow: 5px 5px 10px black, 5px 5px 10px red;
(5) border

이 외에도 border로 시작하는 테두리 관련 CSS속성을 사용할 수도 있습니다. 이 속성은 아래 페이지에서

2013/03/28 - [Programming/HTML/CSS] - [HTML / HTML5 / CSS] table, caption, colgroup, thead, tr, th, td

[4. table, caption, tr, th, td CSS 속성] 부분의 6번을 참고해 주시기 바랍니다.

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

[CSS3] opacity  (0) 2013.05.15
[CSS3] 선택자 - 링크 선택  (0) 2013.05.14
[HTML / HTML5] div  (0) 2013.05.13
[CSS3] 선택자 - 문자 선택  (0) 2013.05.09
[HTML / HTML5] fieldset, legend  (0) 2013.05.07
[CSS3] 선택자 - 동위 선택  (0) 2013.05.06
0 0
Programming/HTML CSS
1. fieldset, legend 사용
<fieldset>
 <legend>회원정보</legend>
 이름 : 홍길동<br />
 나이 : 100<br /><br />
 <input type="button" value="확인" />
</fieldset>
▶ 특정 내용을 group box로 묶어 표시합니다. legend는 filedset으로 생성된 group box의 제목을 표시하는 것으로 생략이 가능합니다.

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

[HTML / HTML5] div  (0) 2013.05.13
[CSS3] 선택자 - 문자 선택  (0) 2013.05.09
[HTML / HTML5] fieldset, legend  (0) 2013.05.07
[CSS3] 선택자 - 동위 선택  (0) 2013.05.06
[CSS] z-index, top, left, zoom, float  (0) 2013.05.01
[CSS3] 선택자 - 반응 선택  (0) 2013.04.29
0 0
Programming/HTML CSS
1. ruby, rt, rp 사용
<ruby>
 <span>CLIEL</span>
 <rp>(</rp>
 <rt>클리엘</rt>
 <rp>)</rp>
</ruby>
▶ 일본어 등에서 많이 사용되는 형태의 글자를 표현합니다.


ruby안에 원하는 내용 span태그안에 쓰고 해당 내용위에 표시될 설명부분을 rt 태그안에 씁니다.

rp태그는 혹시 ruby를 지원하는 않는 브라우저의 경우 대신 표시할 형태를 지정하는 것인데 위 예제처럼 사용된 경우 ruby를 지원하는 않으면 'CLIEL(클리엘)' 과 같은 형식으로 표시하게 됩니다.
0 0
Programming/HTML CSS
1. a 사용
<a href="http://www.cliel.com">CLIEL</a>
<a href="#target">이동</a>
.
.
.
<a name="target">지점</a>
▶ 문서내에서 링크를 생성합니다. HTML5에서도 같은 용도로 사용되는 표준태그입니다.
 
2. a 속성

(1) href

a 링크에서 이동할 웹주소나 같은 페이지내 이동할 위치를 지정합니다. 다른 웹 주소로 이동하고자 하는 경우 <a href="http://www.cliel.com/">cliel.com</a> 형식으로 지정하며 문서내에 이동하고자 하는 경우 #target 처럼 #을 사용하여 이동할 해당 영역을 지정하면 됩니다.

a 에서 #을 사용해 위치를 지정하는 경우 이동될 해당 위치는 a 태그를 통해 name 속성이 지정되어 있어야 합니다.

만약 같은 문서가 아닌 다른 웹페이지의 위치로 이동하고자 하는 경우에는 <a href="http://www.cliel.com/#target">www.cliel.com#target</a> 처럼 웹주소 다음에 #을 사용하여 이동할 위치의 이름을 붙여 href속성을 지정하면 됩니다.

경우에 따라 href를 제거한 빈 링크를 생성해야 하는 경우도 있습니다. 다만 href속성이 필요없는 경우 href속성을 사용하지 않는 것이 아니라 href="#" 과 같이 #으로 속성을 지정해야 합니다. 이것은 웹표준을 따르는 것입니다.

(2) name

같은 문서안에서 #[이름] 처럼 href 속성이 지정되었을때 실제 a 링크를 클릭하여 이동해올 위치를 이 속성으로 지정합니다. 예를 들어 #target 로 href가 지정된 경우 이동할 위치의 a 태그 name 속성은 target 여야 합니다.

(3) target

링크된 화면을 어디에 표시할지를 지정하는 속성입니다. _blank(새창), _self(현재창), _parent(부모frame), _top(frame전체) 값을 설정할 수 있습니다.

_parent는 현재 화면이 frame으로 구성되어 있을 경우 부모frame에 화면을 표시하며 _top은 frame으로 구성된 화면에서 이 frame을 무시하고 화면 전체로 링크된 화면을 표시하도록 합니다.

화면이 frame으로 구성되어 있다면 target 속성에 frame의 이름을 값으로 지정하여 해당 frame에 링크화면을 표시할 수도 있습니다. 예를 들어 특정 frame의 name속성이 view1 이라는 이름으로 지정되어 있다면 target 속성을 view1로 하여 view1이라는 이름을 가진 frame영역에 링크된 화면을 표시하도록 합니다.

(4) id

위 2번과 같이 지점을 나타낼때는 a 태그에 name을 지정할 수도 있는데 좀 다르게 특정 태그에 id를 a의 name속성과 같이 지정할 수도 있습니다.
<h2 id="target">대상 항목</h2>
위와 같이 하면 a 에서 name을 지정한 것과 같은 방식으로 동작하게 됩니다.

만약 같은 id가 여러개 존재하면 제일 먼저 나오는 항목에 위치하게 되지만 표준에서 벗어나므로 권장하지 않습니다.

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

[HTML / HTML5] ruby, rt, rp (루비문자)  (0) 2013.04.22
[HTML / HTML5] form, input, select, textarea  (0) 2013.04.18
[HTML / HTML5] a (링크)  (0) 2013.04.17
[HTML5] audio (오디오)  (0) 2013.04.16
[CSS] color  (0) 2013.04.15
[HTML / HTML5] br (개행)  (0) 2013.04.12
0 0
Programming/HTML CSS
1. audio 사용
<audio src="sample.mp3" controls="controls"></audio>
▶ 음악을 재생합니다.

2. audio 속성

(1) src

재생할 음악의 url 경로를 지정합니다.

(2) preload

src에 지정된 음악을 모두 불러오고 난 뒤에 음악을 재생하도록 합니다. preload만 입력해도 되고 preload="preload" 처럼 속성을 지정해도 됩니다. 참고로 후자는 XHTML5 표기방법에 해당합니다.

(3) autoplay

자동으로 음악을 재생할지 지정합니다. 속성지정은 preload와 같습니다.

(4) loop

음악을 반복적으로 재생할지 지정합니다. 속성지정은 preload와 같습니다.

(5) controls

플레이어에 재생, 정지등의 인터페이스를 표시할지 지정합니다.속성지정은 preload와 같습니다.

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

[HTML / HTML5] form, input, select, textarea  (0) 2013.04.18
[HTML / HTML5] a (링크)  (0) 2013.04.17
[HTML5] audio (오디오)  (0) 2013.04.16
[CSS] color  (0) 2013.04.15
[HTML / HTML5] br (개행)  (0) 2013.04.12
[HTML] embed  (0) 2013.04.11
0 0
Programming/HTML CSS
1. br 사용
안녕<br />
하세요.
▶ 한칸 개행합니다. HTML5에서도 같은 용도로 사용됩니다.

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

[HTML5] audio (오디오)  (0) 2013.04.16
[CSS] color  (0) 2013.04.15
[HTML / HTML5] br (개행)  (0) 2013.04.12
[HTML] embed  (0) 2013.04.11
[HTML] iframe  (0) 2013.04.09
[HTML / HTML5] hr (수평선)  (0) 2013.04.08
0 0
Programming/HTML CSS
1. hr 사용
<hr width="100">
▶ 수평선을 긋습니다. HTML5에서도 같은 용도로 사용됩니다.

2. hr 속성

(1) size

정수로 값을 지정하며 두께를 설정합니다.

(2) width

정수로 값을 지정하며 길이를 설정합니다.

(3) align

left, center, right 값을 지정하며 수평선의 정렬상태를 지정합니다.

(4) noshade

값이 없는 속성이며 음영효과를 제거합니다.

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

[HTML] embed  (0) 2013.04.11
[HTML] iframe  (0) 2013.04.09
[HTML / HTML5] hr (수평선)  (0) 2013.04.08
[HTML / HTML5 / CSS] img (이미지)  (0) 2013.04.05
[CSS] background  (0) 2013.04.04
[CSS] letter-spacing  (0) 2013.04.03
0 0
Programming/HTML CSS
1. img 사용
<img src="sample.jpg">
▶sample.jpg 이미지를 표시합니다. HTML5에서도 같은 용도로 사용됩니다.

img 사용시 아직 존재하지 않는 이미지를 처리해야 하는 경우 placehold.it 을 사용하면 됩니다. src 속성에

http://placehold.it/300x200

위와 같이 placehold.it 주소와 뒤에 원하는 크기를 지정하면 해당 크기만큼의 이미지를 생성하게 됩니다.

2. img 속성

(1) src

표시할 이미지가 있는 위치를 url형태로 지정합니다. 만약 이미지에 대한 크기만 알고 실제 이미지가 없는 경우 src속성에 'http://placehold.it/300x100' 과 같이 지정하면 해당 크기에 맞는 대체이미지를 표시해 줍니다.

(2) alt

해당 이미지를 표시할 수 없는 경우 대신 표시할 내용을 문자열 형태로 지정합니다.

(3) align

이미지의 정렬 방식을 지원하며 left(왼쪽), center(가운데), right(오른쪽)값을 사용할 수 있습니다. 만약 이미지가 텍스트와 같이 사용되는 경우라면 top(위쪽), middle(가운데), bottom(아래쪽)값을 사용해 텍스트가 표시될 상대적인 위치를 지정할 수도 있습니다.

(4) height

이미지를 표시할때 이미지의 높이값을 나타냅니다. 성능상 이 속성을 지정하는 것이 좋습니다.

(5) width

이미지를 표시할때 이미지의 넓이값을 나타냅니다. 성능상 이 속성을 지정하는 것이 좋습니다.

(6) hspace

이미지의 가로 여백을 지정합니다.

(7) vspace

이미지의 세로 여백을 지정합니다.

(8) border

이미지를 표시할때 외곽선의 굵기를 지정합니다. 기본값은 0이며 px단위입니다.

3. CSS img 사용
.css_img {
 width:100px;
 height:100px;
}
4. CSS img 속성

(1) width

이미지의 가로 크기를 지정합니다. 크기 단위는 in(인치), cm(센치미터), mm(밀리미터), pt(포인터), pc(피카스), em, ex(em대비 1/2크기), px(픽셀), %(%단위)등의 상대적 단위크기를 사용하기도 합니다.

(2) height

이미지의 세로 크기를 지정합니다. 단위는 width와 같습니다.

(3) vertical-align

이미지가 텍스트와 함께 사용되는 경우 텍스트의 위치를 지정하는 속성입니다. top(위쪽), middle(가운데), bottom(아래쪽) 값을 사용할 수 있습니다.

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

[HTML] iframe  (0) 2013.04.09
[HTML / HTML5] hr (수평선)  (0) 2013.04.08
[HTML / HTML5 / CSS] img (이미지)  (0) 2013.04.05
[CSS] background  (0) 2013.04.04
[CSS] letter-spacing  (0) 2013.04.03
[CSS] line-height  (0) 2013.04.02
0 0
Programming/HTML CSS
1. dl, lh, dt, dd 사용
<dl>
 <lh>목록제목</lh>
 <dt>용어1</dt>
 <dd>용어1 설명</dd>
 <dt>용어2</dt>
 <dd>용어2 설명</dd>
</dl>
▶ 용어에 대한 설명 목록을 만듭니다. HTML5에서도 같은 용도로 사용되는 표준태그입니다.

2. dl, dt 속성

(1) compact

값이 없으며 dt 다음에 줄바꿈을 하지 않고 바로 옆에 dd의 내용을 표시하도록 합니다.
dd, dl, DT, html, html5, LH
0 0
Programming/HTML CSS
b (굵게), i (기울임), u (밑줄), ins (밑줄), tt (타자체), sup (위첨자), sub (아래첨자), s (가로선), del (가로선), small (작게), big(크게)
<b>굵게</b><br />
<i>이탤릭</i><br />
<u>밑줄</u><br />
<ins>밑줄</ins><br />
<tt>타자</tt><br />
위첨자<sup>위첨자</sup><br />
아래첨자<sub>아래첨자</sub><br />
<s>가로선</s><br />
<del>가로선</del><br />
<small>한단계 작게</small><br />
<big>한단계 크게</big>
small, big는 웹브라우저에 설정된 크기를 기준으로 합니다.


b, i, small, sub, sup, ins, del 태그는 HTML5에서 같은 용도로 사용되는 표준태그입니다.
b, Big, css, html, html5, I, s, small, Sub, SUP, TT, U
0 0
1
블로그 이미지

클리엘