4. 구문 사용의 기본및 속성 -바닥부터 시작하는 HTML-
Html을 사용하기 위해 알아야할 아주 기본적인 지식들을 추려서 적어 놓았다.
태그는 소문자로 표기한다.
속성들(Attributes)은 이름과 값을 가진다.
언어는 lang속성으로 선언된다.
<html lang="en-US">
링크의 목적지는 href 속성으로 지정된다.
<a href="http://www.w3schools.com">This is a link</a>
<img>태그에는 src, alt, width, height 속성이 있고 기본 단위는 pixel이다.
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
style 속성을 사용하여 width와 height를 지정할 수도 있다. px단위를 사용한다.
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Width, Height 구문과 Style 구문의 비교.
html5에서는 둘 다 유효하지만 style 속성을 사용하는 것을 추천한다.
<p>태그의 title속성은 문장에 mouse over되었을 때 title값이 보여 진다.
title값에 공백이 포함 되었다면 따옴표를 생략해서는 안 된다.
<p title="I'm a tooltip">
전반적으로 속성 값에는 따옴표를 사용하는 것을 권한다.
일반적으로는 겹따옴표를 사용하지만 겹따옴표 자체도 출력문 안에 포함시키려면 홑따옴표를 바깥에 사용한다.
<p title='John "ShotGun" Nelson'>
<p title="John 'ShotGun' Nelson">
html의 스타일 속성은 다음과 같이 사용한다.
속성명(property):값(value);
<tagname style="property:value;">
colspan, rowspan 속성은 태그에서 사용한다.
<th colspan="2">Telephone</th>
<th rowspan="2">Telephone</th>
<table>태그에서 자주 사용되는 CSS 속성들.
CSS에서 border 속성(property)은 border를 정의한다.
CSS에서 border-collapse 속성은 cell의 border들을 없앤다.
CSS에서 padding 속성은 add cell의 padding을 추가한다.
CSS에서 text-align 속성은 cell text를 정렬한다.
CSS에서 border-spacing 속성은 각 cell 사이의 spacing을 지정한다.
CSS의 list-style-type 속성은 <ul>에서 marker를 지정한다.
<ul style="list-style-type:disc">
<ol>에서 type 속성은 태그에서 직접 쓰여서 marker를 지정한다,
<ol type="1">
block-level 태그들
<div>
<h1> - <h6>
<p>
<form>
inline 태그들
<span>
<a>
<img>
<div> element는 style과 class를 사용해서 속성들을 지정한다.
<span> element는 style과 class를 사용해서 속성들을 지정한다.
<iframe>에서 width와 height속성값은 pixel이 기본값이고 %로 쓸 수도 있다.
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
'COMPUTER > HTML' 카테고리의 다른 글
| 6. <div> 태그 -바닥부터 시작하는 HTML- (0) | 2016.12.04 |
|---|---|
| 5. <TABLE> 태그 -바닥부터 시작하는 HTML- (0) | 2016.12.02 |
| 3. <!DOCTYPE> 선언 -바닥부터 시작하는 HTML- (0) | 2016.11.17 |
| 2. HTML의 구성 요소 -바닥부터 시작하는 HTML- (0) | 2016.11.16 |
| 1. 태그 정리 바닥부터 시작하는 HTML- (1) | 2016.11.15 |