1 / 33

웹 과 인터넷 활용 및 실습

웹 과 인터넷 활용 및 실습. 글자와 목록관련태그. 컴퓨터 과학과 김희주. 메일 주소 및 제목 양식. 오늘의 과제 오늘 배운 태그 5 개 이상 사용한 html 파일 을 제출하세요 ^^ 어떤 태그를 사용했는지 주석을 사용해 설명 * 본문에 있는 태그를 그대 ~ 로 쓰는 건 안됩니다 메일주소 sub_hjkim@kangwon.ac.kr 메일 제목 [ 웹인 -HTML 기본 태그 익히기 ] 날짜 (20130107) 학번 이름 수업 시간 내로 제출

chloe-bush
Télécharger la présentation

웹 과 인터넷 활용 및 실습

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. 웹과인터넷활용 및 실습 글자와 목록관련태그 컴퓨터 과학과 김희주

  2. 메일 주소 및 제목 양식 • 오늘의 과제 • 오늘 배운 태그 5개 이상 사용한 html파일을 제출하세요^^ • 어떤 태그를 사용했는지 주석을 사용해 설명 * 본문에 있는 태그를 그대~로 쓰는 건 안됩니다 • 메일주소 • sub_hjkim@kangwon.ac.kr • 메일 제목 • [웹인-HTML 기본 태그 익히기] 날짜(20130107) 학번 이름 • 수업 시간 내로 제출 • 피치못하게 여러 번 제출하는 경우 몇 번째 보내는 메일인지 제시. • 예) [웹인-HTML 기본 태그 익히기] 날짜(20130107) 학번 이름 * 두번째

  3. 글자의 서식을 지정하기 위한 <FONT> • 웹 페이지는 대부분 다양한 정보를 글자로 전달함 • 글자가 밋밋하게 나열되어 있다면 글을 읽는 사람들이 자칫 지루해 질 수 있음 홈페이지 명을 강조하기 위해 글자를 크게 하고 진하게 지정 각 분류 제목을 굵고 진하게 표시하여 쉽게 구분할 수 있도록 함

  4. 글자의 크기를 지정하기 위한 태그(1/2) <font size=“n”> ~ </font> • <font> 태그는 행을 바꾸지 않고 글자의 크기를 변경할 수 있음 • 글자의 크기는 1~7까지의 7 단계로 지정 • Size 속성값이 클수록 글자가 큼(7로 지정하면 글자 크기가 가장 큼) • <Hn> 태그와는 정반대

  5. 글자의 크기를 지정하기 위한 태그(2/2) • 실습 해 보세요

  6. 기본 글자의 크기를 지정하기 위한 태그(1/2) <basefont size=“n”> • 현재 사용하고 있는 HTML 문서의 기본 글자의 크기를 지정할 때 사용 • <font> 태그는 지정된 곳에서만 부분적으로 적용 • 종료 태그인 </basefont> 태그가 없음

  7. 기본 글자의 크기를 지정하기 위한 태그(2/2) • 실습 해 보세요

  8. 글자의 상대 크기 지정을 위해 사용하는 태그(1/2) <font size=“+n 또는 –n”> ~ </font> (n은 상대적 크기) • <font>태그는 수식에 의한 직접 크기 지정 외에도‘+n’,‘-n’과 같이 현재 표시하고 있는 글꼴에 대한 상대 크기도 지정할 수 있음 • 본문의 크기보다 상대적으로 크게 하고 싶을 때는 ‘+n’을 지정하고 상대적으로 작게 하기 위해서는 ‘-n’으로 지정하여 글자의 크기를 변경할 수 있음

  9. 글자의 상대 크기 지정을 위해 사용하는 태그(2/2) • 실습 해 보세요

  10. 글자의 색을 부분적으로 지정하기 위해 사용하는 태그(1/3) <font color=“색상명이나#RGB”> ~ </font> • 원하는 글자만 색을 지정해 주려면 <font> 태그에 color속성을 삽입하여 지정 • <body> 태그에서는 전체적인 글자의 색을 text 속성으로 지정 • 색 표현법 • 문서의 배경색이나 글자색 등의 색을 표현하기 위해서 16진수 6자리를 사용

  11. 글자의 색을 부분적으로 지정하기 위해 사용하는 태그(2/3) • 색 표현법(계속) • 색상명을 이용하여 색을 표현할 수 있지만 좀 더 다양한 색상을 표현하기 위해서는 빛의 3원색인 R(Red), G(Green), B(Blue)를 적절하게 배합할 수 있어야 함 • 16진수 두 자리에 표현할 수 있는 값은 00부터 FF(16진수 F는 10진수 15를 의미) • RGB는 빛의 3요소이기에 값이 클수록 색상이 선명하고 밝아짐 • Example) • Yellow: R(FF) + G(FF) + B(00) • Cyan: R(00) + G(FF) + B(FF) • Magenta: R(FF) + G(00) + B(FF) #RED(16진수 두 자리) GREEN(16진수 두 자리) BLUE(16진수 두 자리)

  12. 글자의 색을 부분적으로 지정하기 위해 사용하는 태그(3/3) • 실습 해 보세요

  13. 글꼴을 변경하기 위해 사용하는 태그(1/2) <font face=“글꼴의 이름”> ~ </font> • face 속성은 기본적인 HTML 문서의 글꼴이 아닌 다양한 글꼴을 지정하기 위해 사용 • 만약 두 가지 이상의 글꼴을 지정하려면 콤마(,)로 구분 • 여러 글꼴을 한꺼번에 지정하는 이유는 웹 브라우저에서 지원되지 않는 글꼴일 경우를 대비하기 위함

  14. 글꼴을 변경하기 위해 사용하는 태그(2/2) • 실습 해 보세요

  15. 글자에 장식 효과를 주는 태그들(1/3) • 태그 종류

  16. 글자에 장식 효과를 주는 태그들(2/3) • 실습 해 보세요

  17. 글자에 장식 효과를 주는 태그들(3/3) • 결과 화면

  18. 특수문자(&특수이름, &#아스키 코드)(1/3) • 특수문자는 키보드로 직접 입력하여 웹 브라우저로 보여줄 수 없는 문자나 HTML 문서에 예약어로 사용하고 있는 문자를 의미함 • Example) • ‘<‘와 ‘>’ 특수문자는 이미 태그로 사용되므로 이 기호를 화면에 그대로 출력하면 특변한 방법이 요구 됨 • 큰 따옴표나 ‘&’와 같은 문자 • 화면에 공백을 표시  &nbsp; • ‘&’로시작하여 ‘;’로 끝남

  19. 특수문자(&특수이름, &#아스키 코드)(2/3) • 특수문자 종류

  20. 특수문자(&특수이름, &#아스키 코드)(3/3) • 실습 해 보세요

  21. 인용 문단을 구별하기 위한 <BLOCKQUOTE>태그 • 다른 곳의 글을 인용할 경우 사용 • 다른 문장보다 약간 들여 써짐 • 실습 해 보세요

  22. 문서 작성자를 알리기 위한 <ADDRESS>태그 • 주소나 연락처들을 기술할 때 사용되는 태그 • 태그로 둘러싸인 텍스트는 이탤릭체로나타남 • 실습 해 보세요

  23. 목록에 관련된 태그 • 목록 태그는 여러 개의 항목들을 일정한 간격으로 나열하여 깔끔하고 정돈된 문서로 만들 수 있도록 합니다. • 자동으로 줄 바꿈이 일어나고 들여쓰기가 되므로 정돈되어 보임 • 리스트는 크게 세 가지 종류로 나뉨 • 순서가 없는 리스트(Unordered List) • 순서가있는 리스트(Ordered List) • 정의 리스트(Definition List) • 리스트 내용을 나타낼 때 사용하는 태그는 <li>

  24. 순서가없는(비 서열형) 목록을 만들기 위한 태그(1/2) <ul> ~ </ul> • Unordered List의 약자로 번호가 아닌 기호를 붙인 목록을 작성할 때 사용 • <li>태그는 줄바꿈 태그<br>를 내포하고 있음 • Type 속성 • 속성을 지정하여 리스트가 항목을 나타내는 기호를 원하는 형태로 지정할 수 있음 • Example) <ul type=“disc”> • disc : 검은 원, circle: 흰 원, square: 사각형

  25. 순서가없는(비 서열형) 목록을 만들기 위한 태그(2/2) • 실습 해 보세요

  26. 순서가있는(서열형) 목록을 만들기 위한 태그(1/2) <ol> ~ </ol> • Ordered List의 약자로 기호 대신 번호가 붙인 목록을 작성할 때 사용 • 기호 대신 숫자가 붙은 것만 빼고는 <ul>과 같음 • Type 속성 • 아라비아 숫자의 표기 대신 영문자나 로마 숫자로 나타낼 수 있음 • 아라비아 숫자가 기본 • A: 영문 대문자, a: 영문 소문자, I: 로마 숫자 대문자, i: 로마 숫자 소문자, 1: 아라비아 숫자 • <ol start=“원하는 숫자”>태그에 start속성을 이용하여 첫 목록의 숫자가 1부터가 아니라 임의의 번호부터 시작하게 할 수 있음 • <li value=“원하는 숫자”>를이용하여 목록의 번호도 변경할 수 있음

  27. 순서가있는(서열형) 목록을 만들기 위한 태그(2/2) • 실습 해 보세요

  28. 정의 목록을 만들기 위한 태그(1/2) <dl> ~ </dl> • Definition List의 약어로 용어와 같은 항목들을 설명하거나 정의할 때 사용 • <lh>: list head , 목록 머리글 제목을 출력 • <dt>: definition title, 용어의 제목을 나타냄 • <dd>: definition description, 용어의 설명을 나타냄 • <dt>, <dd> 태그 모두 줄 바꿈 태그 <br>을 내포하고 있음 • 용어의 제목 바로 옆에 용어의 설명이 나오게 하기 위해서 줄바꿈이 지정되지 않도록 하려면 <dl>태그에 compact속성을 붙여서 설정함 • <dl compact>

  29. 정의 목록을 만들기 위한 태그(2/2) • 실습 해 보세요

  30. 움직이는 텍스트를 만드는 <MARQUEE> 태그 • MS-익스플로러는 텍스트를 일정 방향으로 흘러가도록 하는 <marquee> 태그를 제공 • 기본 속성 • Align: 텍스트의 위치(상, 중, 하)를지정 • Height, width: 텍스트가 나타날 범위(영역)를 지정 • Hspace, vspace: 텍스트 바깥쪽의 상하좌우 여백을 지정 • 실습 해 보세요

  31. <MARQUEE>태그의 behavior 속성 • 속성을 지정하여 흘러갈 방향과 속도를 조절할 수 있음 • 속성값 • Scroll: behavior속성의 기본값으로 문자열이 페이지를 가르면서 계속 흘러감 • Slide: 스크롤하던 문자가 페이지 한쪽 끝 가장자리에 닿으면 정지 • Alternate: 문자열이 일정범위 내에서 앞뒤로 왔다 갔다 반복 • 실습 해 보세요

  32. <MARQUEE>태그의 direction 속성 • Direction 속성을 지정하여 흘러갈 방향을 조절할 수 있음 • 실습 해 보세요

  33. <MARQUEE>태그의 bgcolor, loop 속성 • Bgcolor속성: 흘러가는 문자열에 배경색을 지정 • Loop속성: 반복 횟수를 지정 • 실습 해 보세요

More Related