Download - HTML & CSS
HTML & CSS
?
SPARCS 11 SunGuard
매우 ! 기초적인 !
HTML
Hyper Text Markup Lan-guage
나는 누굴까요 ?
HTML
- Hyper Text?문자 , 그래픽 , 음성 및 영상 등을 하나로 묶어사용자가 원하는 정보를 제목만으로도 검색이가능하도록 해주는 것 . 일종의 링크 (Link) 이자정보의 집합체입니다 .
- Markup Language?어떤 정보를 문서 상에서 어디에 배치하여 어떻게 보여줄 것인지에 대한 서술 구문이다 .웹 브라우저는 이 마크업 언어를 해석하여 , 각 정보들을 알맞게 배치하여 준다 .
나는 누굴까요 ?
HTML
<html><body>
<em>SPARCS 2011 Autumn
</em></body>
</html>
나는 누굴까요 ? – 예를 들어 ...
HTML
<html><body>
<em>SPARCS 2011 Autumn
</em></body>
</html>
나는 누굴까요 ? – 예를 들어 ...
Hyper Text.여기서는 문자 정보
HTML
<html><body>
<em>SPARCS 2011 Autumn
</em></body>
</html>
나는 누굴까요 ? – 예를 들어 ...
Markup Language.강조 표시해 준다 .
HTML
<html><body>
<em>SPARCS 2011 Autumn
</em></body>
</html>
나는 누굴까요 ? – 예를 들어 ...
합쳐서 ...HTML
HTML
Document Type Declaration= DOCTYPE
문서 형식 선언 !
나는 누굴까요 ? – 나를 나누면 ?!
멍청한 브라우저에게내가 어떤 놈인지를 먼저 알려줄 필요가 있어요 .
즉 , 앞으로 내가 어떻게 표현될 지를 알려줘요 .
HTML
HTML 4.01 기준
나는 누굴까요 ? – 나를 나누면 ?!
Strict
Transitional
Frameset
어우 , 이름만 들어도 딱딱해 !
요 녀석은 약간 느슨해 보이는데 ?
Frame? 틀을 위한 건가 ?
HTML
HTML 4.01 기준
나는 누굴까요 ? – 나를 나누면 ?!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“ ”http://www.w3.org/TR/html4/strict.dtd">
↑STRICT DOCTYPE표현 효과 위주의 마크업 태그들 (<b>, <i> 등 ) 을 금지한다 . 그리고 대부분속성들의 사용이 불가하다 . ex) height, width, ...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ "http://www.w3.org/TR/html4/loose.dtd">
↑TRANSITIONAL DOCTYPE대부분의 태그를 허용하고 , 가장 많이 쓰이는 DOCTYPE 이다 .
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
↑FRAMESET DOCTYPEFrame structure 를 지원하는 DOCTYPE 이다 .
HTML 나는 누굴까요 ? – 나를 나누면 ?!
나 (DTD) 에 대해 더 알고 싶어요 ?
날 가져요!
빨리! 하악하악!
날 가지라니까요!
HTML
이제 저의 속을 좀 보여드리죠 .
나는 누굴까요 ?
콩 닥 콩 닥
HTML
Element – HTML 에서 시작태그와 종료 태그로 이루어진 모든 명령어들을 의미합니다 .
나는 누굴까요 ? – 구성 성분 ?!
Tag – 시작 태그와 종료 태그가 있는데 ... 종료 태그가 없는 것도 있어요 .
Attribute – 요소의 시작 태그 안에서 사용되는 것으로 좀 더 구체화 된 명령어 체계 ! 어렵다 ... 쉽게 말하면 , 그 태그의 속성 ! ( 자세한 모양을 결정해줘요 !)
Argument – 속성에 주는 값 ! 입니다 . 한 Attribute 에는 여러 가지의 Arguments 가 존재하죠 !
HTML 나는 누굴까요 ? – 구성 성분 ?!
말로 하면 어려워요 ... 보면 쉬워요 !
<a href=“http://sparcs.org/”>Go to SPARCS!</a>
Element
HTML 나는 누굴까요 ? – 구성 성분 ?!
말로 하면 어려워요 ... 보면 쉬워요 !
<a href=“http://sparcs.org/”>Go to SPARCS!</a>
Tag
HTML 나는 누굴까요 ? – 구성 성분 ?!
말로 하면 어려워요 ... 보면 쉬워요 !
<a href=“http://sparcs.org/”>Go to SPARCS!</a>
Attribute
HTML 나는 누굴까요 ? – 구성 성분 ?!
말로 하면 어려워요 ... 보면 쉬워요 !
<a href=“http://sparcs.org/”>Go to SPARCS!</a>
Argument
HTML 나는 누굴까요 ? – 구성 성분 ?!
말로 하면 어려워요 ... 보면 쉬워요 !
<a href=“http://sparcs.org/”>Go to SPARCS!</a>
Element
Tag
Attribute
Argument
HTML
Element – HTML 에서 시작태그와 종료 태그로 이루어진 모든 명령어들을 의미합니다 .
나는 누굴까요 ? – 구성 성분 ?!
Tag – 시작 태그와 종료 태그가 있는데 ... 종료 태그가 없는 것도 있어요 .
Attribute – 요소의 시작 태그 안에서 사용되는 것으로 좀 더 구체화 된 명령어 체계 ! 어렵다 ... 쉽게 말하면 , 그 태그의 속성 ! ( 자세한 모양을 결정해줘요 !)
Argument – 속성에 주는 값 ! 입니다 . 한 Attribute 에는 여러 가지의 Arguments 가 존재하죠 !
HTML 나는 어떻게 생겼을까요 ?
구조는 어떻게 될까요 ?!
HEAD 와 BODY, 끝
HTML
<html> <head> <title>HTML&CSS</title> </head> <body> <div> <table> <tr> <td> 참 재밌죠 ?</td> </tr> </table> </div> </body></html>
나는 어떻게 생겼을까요 ?
<html>...</html>
<head>...</head>
<title>HTML&CSS</ti-tle>
<body>...</body>
<div>...</div>
<table>...</ta-ble><tr>...</tr>
<td> 참 재밌죠 ?</td>
HTML
<html> <head> <title>HTML&CSS</title> </head> <body> <div> <table> <tr> <td> 참 재밌죠 ?</td> </tr> </table> </div> </body></html>
나는 어떻게 생겼을까요 ?
<html>...</html>
<head>...</head>
<title>HTML&CSS</ti-tle>
<body>...</body>
<div>...</div>
<table>...</ta-ble><tr>...</tr>
<td> 참 재밌죠 ?</td>
HTML 나는 어떻게 생겼을까요 ?
“ 태그 안에 태그 있다 ~”
HTML NEXT TIME...
여러 기본 태그를 배워보자
HTML 나의 어여쁜 자식들 – 텍스트 관련
HTML 태그의 가장 기초
TEXT
TAG
HTML 나의 어여쁜 자식들 – 텍스트 관련
Text Tag
Physical Tag & Logical Tag
말 그대로 보이는 태그 ! 보인다기 보다는 의미 있는 태그 !
HTML 나의 어여쁜 자식들 – 텍스트 관련
Text Tag__Physical Tag<i>SPARCS</i>
<b>SPARCS</b>
<tt>SPARCS</tt>
<u>SPARCS</u>
<s>SPARCS</s>
Italic – 기울임 글꼴
Bold – 굵은 글꼴
TeleType – 타자기 글꼴
Underline – 밑줄 친 글꼴
Strikethrough – 취소선<strike>SPARCS</strike>
Strikethrough – 취소선=
HTML 나의 어여쁜 자식들 – 텍스트 관련
Text Tag__Physical Tag<sub>SPARCS</sub>
<sup>SPARCS</sup>
<big>SPARCS</big>
<small>SPARCS</small>
Subscript – 아래 첨자
Superscript – 위 첨자
Bigger font(one size bigger) – 폰트 크기 한 단계 크게
Smaller font(one size smaller) – 폰트 크기 한 단계 작게
HTML 나의 어여쁜 자식들 – 텍스트 관련
Text Tag__Logical Tag<h#>SPARCS</h#>
<abbr>SPARCS</abbr>
<acronym>SPARCS</acronym>
<cite>SPARCS</cite>
Header(1~6) – 헤드 라인 ( 헤더 ) 태그
Abbreviation – 약어 ( 줄임말 )
Acronym – 두문자 ( 頭文字 ), 머리 글자만 따서 만든 단어
Citation – 인용문
<code>SPARCS</code>
Code – 코드
HTML 나의 어여쁜 자식들 – 텍스트 관련
Text Tag__Logical Tag<dfn>SPARCS</dfn>
<em>SPARCS</em>
<kbd>SPARCS</kbd>
<q>SPARCS</q>
Definition – 정의
Emphasis – 강조
Key Board – 키보드 글씨체 (?)
Quotation mark – 따옴표
<samp>SPARCS</samp>
Sample text – 예제 텍스트 , 예시
HTML 나의 어여쁜 자식들 – 텍스트 관련
Text Tag__Logical Tag<strong>SPARCS</strong>
<var>SPARCS</var>
Strong emphasis – 강한 강조
Programming Variable – 변수
HTML 나의 어여쁜 자식들 – 텍스트 관련
한 줄로만 적으면 식상하다 ! 그래서 ...
<p></p> ( Paragraph 태그 )
<br></br> (Line Break 태그 )
코드에 Enter 도 쳐보고 Space 를 아무리 쳐도 ,실행시키면 , 하나의 공백만이 있을 뿐 ...
그래서 아래의 태그를 써야 합니다 .
HTML 나의 어여쁜 자식들 – Anchor Tag
Anchor Tag<a href=“”> 어디로 갑니까 ?</a>
1. 내부 링크<a name=“#top”> 여긴 TOP</a> 혹은 id 를 설정해도 된다 ....<a href=“#top”>TOP 으로 이동 </a>
2. 외부 링크<a href=“http://sparcs.org/” target=“_blank”>SPARCS HOME</a>
target 속성 : _self ( 현재 프레임에 출력 ), _parent ( 상위 프레임에 출력 ) _top ( 화면의 모든 프레임을 지우고 , 전체 화면에 출력 ) _blank ( 현재 창을 그대로 두고 , 새로운 창에 출력 )
HTML 나의 어여쁜 자식들 – Image Tag
Image Tag<img src=“ 이미지가 어디에 있니 ?” alt=“ 이미지 설명” />
Image Tag Example
HTML 나의 어여쁜 자식들 – List Tag
List Tag
<ol> <li>Ordered List 01</li> <li>Ordered List 02</li> <li>Ordered List 03</li></ol>
<ul> <li>Unordered List 01</li> <li>Unordered List 02</li> <li>Unordered List 03</li></ul>
1. Ordered List 012. Ordered List 023. Ordered List 03
• Unordered List 01• Unordered List 02• Unordered List 03
HTML 나의 어여쁜 자식들 – List Tag
List Tag
• Unordered List 01• Unordered List 02• Unordered List 03
Unordered List 01 Unordered List 02 Unordered List 03
HOW?By changing the Background img of list.
e.g.) style=“list-style:none; background:url(check.jpg) no-repeat 0 0;”
HTML 나의 어여쁜 자식들 – Def list Tag
Definition List Tag
<dl> <dt>Definition Term 1</dt> <dd>Definition Description 1-1</dd> <dd>Definition Description 1-2</dd>
<dt>Definition Term 2</dt> <dd>Definition Description 2</dd>
<dt>Definition Term 3</dt> <dd>Definition Description 3</dd></dl>
Definition List
Definition Term
Definition Description
HTML & CSS ...LAYOUT DESIGN
이제 여러 가지 요소들을 알맞은 자리에 배치해야겠죠 ?
그리고 그 자리에 맞게끔 CSS 로 알맞게 꾸며줘야겠죠 ?
그러면 그 자리를 어떻게 만들까요 ?
HTML & CSS ...LAYOUT DESIGN
1. Table Tag
2. Div Tag
3. Frame Tag
HTML & CSS ...LAYOUT DESIGN
1. Table Tag
<table> <tr> <td>(1,1)</td> <td>(1,2)</td> </tr> <tr> <td>(2,1)</td> <td>(2,2)</td> </tr></table>
Table Row
Table Data
HTML & CSS ...LAYOUT DESIGN
2. Div Tag
<div>(1,1)</div><div>(1,2)</div><div>(2,1)</div><div>(2,2)</div>
08_table_tag.html09_div_tag.html
비교해봅시다 ~
HTML & CSS ...LAYOUT DESIGN
3. Frame Tag
http://pierload.x-y.net/frameset/fm.htm
Many kinds of Frame Sets
Frameset 과 Frame Tag 는 잘 쓰이지 않는다 .<div></div> 보다
자유도와 표현성이 떨어지고 , 유지 및 보수가 어렵기 때문이다 .
또한 스타일과 구조의 구분이 어렵다는 점 또한 Frame 태그의 단점이다 .
HTML HTML 코드를 잘 짠다 ?
Logical 과 Physical 을 구분해서 쓴다 .
Style 과 Structure 를 구분해서 쓴다 .
=
HTML 다음 시간엔 ...
CSS 와 HTML 을 분리해서깔끔한 코드를 짜봅시다 .
HTML 참고 웹 페이지
http://www.homejjang.com/http://naradesign.net/open_content/lecture/wp/#section0http://delicious.com/mwultong/htmlhttp://focusjweb.tistory.com/
