1 / 45

HTML & CSS

?. HTML & CSS. 매우 ! 기초적인 !. SPARCS 11 SunGuard. HTML. H yper T ext M arkup L anguage. 나는 누굴까요 ?. HTML. Hyper Text? 문자 , 그래픽 , 음성 및 영상 등을 하나로 묶어 사용자가 원하는 정보를 제목만으로도 검색이 가능하도록 해주는 것 . 일종의 링크 (Link) 이자 정보의 집합체입니다 . Markup Language?

fausta
Télécharger la présentation

HTML & CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ? HTML &CSS 매우! 기초적인! SPARCS 11 SunGuard

  2. HTML Hyper Text Markup Language 나는 누굴까요?

  3. HTML Hyper Text? 문자, 그래픽, 음성 및 영상 등을 하나로 묶어 사용자가 원하는 정보를 제목만으로도 검색이 가능하도록 해주는 것. 일종의 링크(Link)이자 정보의 집합체입니다. Markup Language? 어떤 정보를 문서 상에서 어디에 배치하여 어떻게 보여줄 것인지에 대한 서술 구문이다. 웹 브라우저는 이 마크업 언어를 해석하여, 각 정보들을 알맞게 배치하여 준다. 나는 누굴까요?

  4. HTML <html> <body> <em> SPARCS 2011 Autumn </em> </body> </html> 나는 누굴까요? – 예를 들어...

  5. HTML <html> <body> <em> SPARCS 2011 Autumn </em> </body> </html> 나는 누굴까요? – 예를 들어... Hyper Text. 여기서는 문자 정보

  6. HTML <html> <body> <em> SPARCS 2011 Autumn </em> </body> </html> 나는 누굴까요? – 예를 들어... Markup Language. 강조 표시해 준다.

  7. HTML <html> <body> <em> SPARCS 2011 Autumn </em> </body> </html> 나는 누굴까요? – 예를 들어... 합쳐서...HTML

  8. HTML Document Type Declaration = DOCTYPE 문서 형식 선언! 나는 누굴까요? – 나를 나누면?! 멍청한 브라우저에게 내가 어떤 놈인지를 먼저 알려줄 필요가 있어요. 즉, 앞으로 내가 어떻게 표현될 지를 알려줘요.

  9. HTML HTML 4.01 기준 나는 누굴까요? – 나를 나누면?! 어우, 이름만 들어도 딱딱해! Strict Transitional 요 녀석은 약간 느슨해 보이는데? Frameset Frame? 틀을 위한 건가?

  10. 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 DOCTYPE Frame structure를 지원하는 DOCTYPE이다.

  11. HTML 나는 누굴까요? – 나를 나누면?! 나(DTD)에 대해 더 알고 싶어요? 날 가져요! 빨리! 하악하악! 날 가지라니까요!

  12. HTML 이제 저의 속을 좀 보여드리죠. 나는 누굴까요? 콩 닥 콩 닥

  13. HTML Element– HTML에서 시작태그와 종료 태그로 이루어진 모든 명령어들을 의미합니다. 나는 누굴까요? – 구성 성분?! Tag– 시작 태그와 종료 태그가 있는데... 종료 태그가 없는 것도 있어요. Attribute– 요소의 시작 태그 안에서 사용되는 것으로 좀 더 구체화된 명령어 체계! 어렵다... 쉽게말하면, 그 태그의 속성! (자세한 모양을 결정해줘요!) Argument– 속성에 주는 값! 입니다. 한 Attribute에는 여러 가지의 Arguments가 존재하죠!

  14. HTML 나는 누굴까요? – 구성 성분?! 말로 하면 어려워요... 보면 쉬워요! Element <a href=“http://sparcs.org/”>Go to SPARCS!</a>

  15. HTML 나는 누굴까요? – 구성 성분?! 말로 하면 어려워요... 보면 쉬워요! <a href=“http://sparcs.org/”>Go to SPARCS!</a> Tag

  16. HTML 나는 누굴까요? – 구성 성분?! 말로 하면 어려워요... 보면 쉬워요! Attribute <a href=“http://sparcs.org/”>Go to SPARCS!</a>

  17. HTML 나는 누굴까요? – 구성 성분?! 말로 하면 어려워요... 보면 쉬워요! <a href=“http://sparcs.org/”>Go to SPARCS!</a> Argument

  18. HTML 나는 누굴까요? – 구성 성분?! 말로 하면 어려워요... 보면 쉬워요! Attribute Element <a href=“http://sparcs.org/”>Go to SPARCS!</a> Tag Argument

  19. HTML Element– HTML에서 시작태그와 종료 태그로 이루어진 모든 명령어들을 의미합니다. 나는 누굴까요? – 구성 성분?! Tag– 시작 태그와 종료 태그가 있는데... 종료 태그가 없는 것도 있어요. Attribute– 요소의 시작 태그 안에서 사용되는 것으로 좀 더 구체화된 명령어 체계! 어렵다... 쉽게말하면, 그 태그의 속성! (자세한 모양을 결정해줘요!) Argument– 속성에 주는 값! 입니다. 한 Attribute에는 여러 가지의 Arguments가 존재하죠!

  20. HTML 나는 어떻게 생겼을까요? 구조는 어떻게 될까요?! HEAD와 BODY, 끝

  21. 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</title> <body>...</body> <div>...</div> <table>...</table> <tr>...</tr> <td>참 재밌죠?</td>

  22. 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</title> <body>...</body> <div>...</div> <table>...</table> <tr>...</tr> <td>참 재밌죠?</td>

  23. HTML 나는 어떻게 생겼을까요? “태그 안에 태그 있다~”

  24. HTML NEXT TIME... 여러 기본 태그를 배워보자

  25. HTML 나의 어여쁜 자식들– 텍스트 관련 HTML태그의 가장 기초 TEXT TAG

  26. HTML 나의 어여쁜 자식들– 텍스트 관련 Text Tag Physical Tag & Logical Tag 말 그대로 보이는 태그! 보인다기 보다는 의미 있는 태그!

  27. HTML 나의 어여쁜 자식들– 텍스트 관련 Text Tag__PhysicalTag <i>SPARCS</i> Italic – 기울임 글꼴 <b>SPARCS</b> Bold – 굵은 글꼴 <tt>SPARCS</tt> TeleType – 타자기 글꼴 <u>SPARCS</u> Underline – 밑줄 친 글꼴 = <s>SPARCS</s> <strike>SPARCS</strike> Strikethrough – 취소선 Strikethrough – 취소선

  28. HTML 나의 어여쁜 자식들– 텍스트 관련 Text Tag__PhysicalTag <sub>SPARCS</sub> Subscript – 아래 첨자 <sup>SPARCS</sup> Superscript – 위 첨자 <big>SPARCS</big> Bigger font(one size bigger) – 폰트 크기 한 단계 크게 <small>SPARCS</small> Smaller font(one size smaller) – 폰트 크기 한 단계 작게

  29. HTML 나의 어여쁜 자식들– 텍스트 관련 Text Tag__LogicalTag <h#>SPARCS</h#> Header(1~6) – 헤드 라인(헤더) 태그 <abbr>SPARCS</abbr> Abbreviation – 약어(줄임말) <acronym>SPARCS</acronym> Acronym – 두문자(頭文字), 머리 글자만 따서 만든 단어 <cite>SPARCS</cite> Citation – 인용문 <code>SPARCS</code> Code – 코드

  30. HTML 나의 어여쁜 자식들– 텍스트 관련 Text Tag__LogicalTag <dfn>SPARCS</dfn> Definition – 정의 <em>SPARCS</em> Emphasis – 강조 <kbd>SPARCS</kbd> Key Board – 키보드 글씨체(?) <q>SPARCS</q> Quotation mark – 따옴표 <samp>SPARCS</samp> Sample text – 예제 텍스트, 예시

  31. HTML 나의 어여쁜 자식들– 텍스트 관련 Text Tag__LogicalTag <strong>SPARCS</strong> Strong emphasis – 강한 강조 <var>SPARCS</var> Programming Variable – 변수

  32. HTML 나의 어여쁜 자식들– 텍스트 관련 한 줄로만 적으면 식상하다! 그래서... 코드에 Enter도 쳐보고 Space를 아무리 쳐도, 실행시키면, 하나의 공백만이 있을 뿐... 그래서 아래의 태그를 써야 합니다. <p></p> ( Paragraph 태그 ) <br></br> (Line Break 태그)

  33. 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 (현재 창을 그대로 두고, 새로운 창에 출력)

  34. HTML 나의 어여쁜 자식들– Image Tag Image Tag <imgsrc=“이미지가 어디에 있니?” alt=“이미지 설명”/> Image Tag Example

  35. 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> Ordered List 01 Ordered List 02 Ordered List 03 • Unordered List 01 • Unordered List 02 • Unordered List 03

  36. 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;”

  37. HTML 나의 어여쁜 자식들– Def list Tag Definition List Tag Definition List <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 Term Definition Description

  38. HTML & CSS ...LAYOUT DESIGN 이제 여러 가지 요소들을 알맞은 자리에 배치해야겠죠? 그리고 그 자리에 맞게끔CSS로 알맞게 꾸며줘야겠죠? 그러면 그 자리를 어떻게 만들까요?

  39. HTML & CSS ...LAYOUT DESIGN 1. Table Tag 2. Div Tag 3. Frame Tag

  40. HTML & CSS ...LAYOUT DESIGN 1. Table Tag Table Row <table> <tr> <td>(1,1)</td> <td>(1,2)</td> </tr> <tr> <td>(2,1)</td> <td>(2,2)</td> </tr> </table> Table Data

  41. 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.html 09_div_tag.html

  42. 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 태그의 단점이다.

  43. HTML HTML 코드를 잘 짠다? Logical과 Physical 을 구분해서 쓴다. = Style과 Structure를 구분해서 쓴다.

  44. HTML 다음 시간엔... CSS와 HTML을 분리해서 깔끔한 코드를 짜봅시다.

  45. HTML 참고 웹 페이지 http://www.homejjang.com/ http://naradesign.net/open_content/lecture/wp/#section0 http://delicious.com/mwultong/html http://focusjweb.tistory.com/

More Related