'HTML.CSS.JavaScript'에 해당되는 글 72건

  1. 2017.05.12 4-1
  2. 2017.05.12 10. 하이퍼 링크(4-1)
  3. 2017.05.08 3-3
  4. 2017.05.08 9. 이미지(3-3)
  5. 2017.05.03 3-2
  6. 2017.05.03 8. 이미지(3-2)
  7. 2017.05.03 3-1
  8. 2017.05.03 7. 이미지(3-1)
  9. 2017.04.28 2-3
  10. 2017.04.28 6. 글자와 목록 관련 태그(2-3)
HTML.CSS.JavaScript/핵심요약2017. 5. 12. 00:59

4-1

  1. 1. 하이퍼링크란
    • 연결된 개체를 의미
      • 링크된 글자나 이미지 등을 클릭하면 다른 문서로 이동
    • 문서간의 연결을 위해 <a> 태그 사용
      • <a href="링크할 곳의 파일명">웹 브라우저에 보여질 텍스트
    • 링크색 지정
      • <body>태그 내에 지정
      • link=“색상”, vlink=“색상”, alink=“색상”
  2. 2. 현재 페이지에서 다른 페이지 또는 홈페이지 연결
    • <a href=http://www.naver.com> 네이버
  3. 3. 이미지, 다른 홈페이지를 링크로 이용하기
    • “href” 속성의 값으로 이미지, 사운드, 동영상 클립 명칭을 입력하면 브라우저가 연결된 프로그램을 이용하여 이를 재생
    • e-mail 주소를 입력, 자신에게 e-mail을 보낼 수 있는 링크
    • 기타링크 - 파일전송 프로토콜(ftp)이나 유즈넷(usenet)에 있는 파일이나 문서를 연결할 수 있습니다.


'HTML.CSS.JavaScript > 핵심요약' 카테고리의 다른 글

4-3  (0) 2017.05.12
4-2  (0) 2017.05.12
3-3  (0) 2017.05.08
3-2  (0) 2017.05.03
3-1  (0) 2017.05.03
Posted by 멜데스
HTML.CSS.JavaScript/수업2017. 5. 12. 00:58

10. 하이퍼 링크(4-1)

하이퍼링크 

– 연결된 개체를 의미 

• 링크된 글자나 이미지 등을 클릭하면 다른 문서로 이동 

• 여러 개의 문서를 고리처럼 연결 

– 문서간의 연결을 위해 <a> 태그 사용 

• “href” 속성은 이동하고자 하는 곳의 위치 지정 

• <a>~</a> 사이에는 웹 브라우저에 보여질 텍스트 지정 

• 웹 브라우저에 보여지는 텍스트는 파란 색상을 띠며 밑줄이 그려짐 

• <a href="링크할 곳의 파일명">웹 브라우저에 보여질 텍스트</a> 

– 링크색 지정 

• <body>태그 내에 지정 

• link=“색상”, vlink=“색상”, alink=“색상” 

– link : 연결 기능 있는 상태에서 선택하지 않은 상태의 링크 색상 

– vlink : 한번이라도 방문했던 적이 있는 상태의 링크 색상 

– aink : 마우스로 누르고 있는 상태에서의 링크 색상 


2. 이미지, 다른 홈페이지를 링크로 이용하기 

• 현재 페이지에서 다른 페이지 또는 홈페이지 연결 

– HTML 문서간의 이동하는 것을 응용 

– “href” 속성에 링크할 곳의 파일명 대신 사이트 주소 지정 

• <a href=http://www.naver.com> 네이버 </a> 

• <a href=http://www.nate.com> 네이트 </a> 


(1) HTML 문서 - 가장 보편적인 하이퍼링크입니다. 

(2) 다른 홈페이지 - 다른 홈페이지의 URL을 입력하면 하이퍼링크를 이용하여 이동이 가능합니다. 

(3) 텍스트 - 하이퍼링크를 사용하면 같은 페이지 내에 다른 텍스트로 이동하

는 것이 가능합니다. 이를 앵커라 하며 문서가 너무 길 경우 책갈피 역할을 합니다.  

(4) 이미지, 사운드, 동영상 클립 – “href” 속성의 값으로 이미지나 사운드, 그

리고 동영상 파일의 명칭을 입력하면 브라우저가 연결된 프로그램을 이용

하여 이를 재생하게 됩니다.  

(5) 파일 - 파일의 명칭을 연결하면 다운로드 받게끔 할 수 있습니다. 

(6) email - e-mail 주소를 입력하여 자신에게 e-mail을 보낼 수 있는 링크를 만들 수 있습니다. 

(7) 기타링크 - 파일전송 프로토콜(ftp)이나 유즈넷(usenet)에 있는 파일이나 문서를 연결할 수 있습니다. 





'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글

12. 멀티미디어(4-3)  (0) 2017.05.12
11. 하이퍼링크(4-2)  (0) 2017.05.12
9. 이미지(3-3)  (0) 2017.05.08
8. 이미지(3-2)  (0) 2017.05.03
7. 이미지(3-1)  (0) 2017.05.03
Posted by 멜데스
HTML.CSS.JavaScript/핵심요약2017. 5. 8. 00:56

3-3

  1. 1. 플래쉬 효과
    • 웹 브라우저에서는 멀티미디어 효과를 낼 수 있는 필터가 제공
    • 필터는 익스플로러 4.0 이상에서만 제공
      • 넷스케이프에서는 효과를 볼 수 없다.
  2. 2. 필터란
    • 필터 효과를 적용할 그림이나 글씨에 다음과 같이 작성한다.
      • filter : 필터 종류의 이름(속성)
  3. 3. Alpha 필터
    • 글이나 그림에 투명도를 다양하게 조절
  4. 4. Blur 필터
    • 속성에 따라 글이나 그림에 번짐 효과가 다르게 나타난다.
  5. 5. Wave 필터
    • 그림이나 글자를 물결 형태로 변형
  6. 6. FilpV와 FilpH 필터
    • 선택한 글이나 그림을 상하 좌우 대칭


'HTML.CSS.JavaScript > 핵심요약' 카테고리의 다른 글

4-2  (0) 2017.05.12
4-1  (0) 2017.05.12
3-2  (0) 2017.05.03
3-1  (0) 2017.05.03
2-3  (0) 2017.04.28
Posted by 멜데스
HTML.CSS.JavaScript/수업2017. 5. 8. 00:46

9. 이미지(3-3)

1. 플래시 효과 

• 플래쉬 효과 

– 웹 브라우저에서는 멀티미디어 효과를 낼 수 있는 필터가 제공 

– 투명도, 그림을 거꾸로 나타내거나 번짐 효과 

– 필터는 익스플로러 4.0 이상에서만 제공 

– 넷스케이프에서는 효과를 볼 수 없다. 

• 필터란 

– 기존의 글자나 그림에 스타일을 설정하는 것 

– 필터 효과를 적용할 그림이나 글씨에 다음과 같이 작성한다. 

• filter : 필터 종류의 이름(속성) 


Alpha 필터  

– 그림의 투명 정도를 설정 

– 글이나 그림에 투명도를 다양하게 조절 

– {filter:Alpha(속성)} 

속성                          의미 

Opacity          불투명도를 % 단위 값으로 설정, 숫자가 클수록 불투명 

FinishOpacity  증감의 끝부분의 불투명도를 설정 

Style              불투명도 모양 스타일을 설정. 0:단일, 1:선형, 2:구형, 3:사각형 

StartX/StartY   불투명도 증감의 시작 x, y 좌표 

FinishX/FinishY  불투명도 증감의 끝 x, y 좌표 


2. 웨이브 필터 

Wave 필터와 FlipV, FlipH 필터 

• Wave 필터 

– 그림이나 글자를 물결 형태로 변형 

– {filter:Wave(속성)} 


 속성                              의미 

add              효과를 적용한 요소를 원본 요소와 겹치게 만들지를 설정 

freq              웨이브의 개수를 입력 

lightStrength   웨이브 효과의 빛의 강도를 퍼센트 단위로 입력 

phase            사인 웨이브 효과의 시작 위치 설정 

strength         물결의 흰 정도를 퍼센트 단위로 입력 


• FilpV와 FilpH 필터 

– 선택한 글이나 그림을 상하 좌우 대칭 


Blur 필터 

– 그림의 번짐 효과를 설정해 주는 필터 

– 속성에 따라 글이나 그림에 번짐 효과가 다르게 나타난다. 

– {filter:Blur(속성)} 

 

속성                      의미 

add           원본 그림과 효과가 적용된 그림을 겹쳐서 보이게 할지를 설정 

direction      번짐 방향을 각도로 설정 

strength      번짐될 픽셀의 개수 


 



'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글

11. 하이퍼링크(4-2)  (0) 2017.05.12
10. 하이퍼 링크(4-1)  (0) 2017.05.12
8. 이미지(3-2)  (0) 2017.05.03
7. 이미지(3-1)  (0) 2017.05.03
6. 글자와 목록 관련 태그(2-3)  (0) 2017.04.28
Posted by 멜데스
HTML.CSS.JavaScript/핵심요약2017. 5. 3. 02:36

3-2

  1. 1. 이미지와 함께 있는 글자의 위치 지정
    • <img src=“파일명” align=“top, middle, bottom”>, 기본값은 “bottom”
  2. 1. 이미지 위치 지정
    • <img src=“파일명” align=“left, right”> 웹 브라우저 왼쪽이나 오른쪽에 정렬되어 출력
  3. 1. 이미지 주변 여백 설정
    • “vspace”와 “hspace” 속성을 지정하여 여백 설정, 단위는 픽셀
    • “hspace” 속성을 이용하여 여백 설정 시
      • 이미지 어느 한쪽에만 여백 설정 불가능
      • 왼쪽, 오른쪽 모두에 여백이 설정
  4. 1. 이미지 출력 크기 조절 속성
    • width와 height 속성을 사용하여 원래 이미지 크기 축소 확대
    • 픽셀 수나 비율(%)로 지정
  5. 1. 이미지를 배경으로 삽입
    • background 속성을 이용하여 배경에 이미지 삽입 가능
    • 원본 이미지가 작을 경우 브라우저는 원본 이미지를 여러장 사용하여 타일을 깔듯 배경을 채우게 된다.


'HTML.CSS.JavaScript > 핵심요약' 카테고리의 다른 글

4-1  (0) 2017.05.12
3-3  (0) 2017.05.08
3-1  (0) 2017.05.03
2-3  (0) 2017.04.28
2-2  (0) 2017.04.28
Posted by 멜데스
HTML.CSS.JavaScript/수업2017. 5. 3. 02:36

8. 이미지(3-2)

1. 이미지와 함께 있는 글자의 위치를 지정하는 속성 

이미지와 함께하는 속성 

• 이미지와 함께 있는 글자의 위치 지정 

– 이미지는 한 글자 처럼 취급 

– <img src=“파일명” align=“top, middle, bottom”> 

– 기본값 “bottom” 

• 이미지 위치 지정 

– <img src=“파일명” align=“left, right”> 

– 이미지 자체가 웹 브라우저 왼쪽이나 오른쪽에 정렬되어 출력 

• 이미지 주변 여백 설정 

– “vspace”와 “hspace” 속성을 지정하여 여백 설정, 단위는 픽셀 

– “hspace” 속성을 이용하여 여백 설정 시 

• 이미지 어느 한쪽에만 여백 설정 불가능 

• 왼쪽, 오른쪽 모두에 여백이 설정 

2. 이미지의 위치를 지정하기 

이미지를 위한 속성 

• 이미지 출력 크기 조절 속성 

– width와 height 속성을 사용하여 원래 이미지 크기 축소 확대 

– 픽셀 수나 비율(%)로 지정 

– 너비 width=“n, n%”, 높이 height=“n, n%” 

– width 속성만 지정 

• 너비는 지정된 크기만큼 조정되며, 높이는 원래 이미지의 가로/세로 비율에 따라 자동 조정 

– width와 height 속성 두 가지 모두 이용 

• 실제 이미지 파일의 크기 변경 없음 

• 사용자가 지정한 너비와 높이 값으로 이미지가 변형 될 수 있음 

• 이미지를 배경으로 삽입 

– background 속성을 이용하여 배경에 이미지 삽입 가능 

– 원본 이미지가 작을 경우 브라우저는 원본 이미지를 여러장 사용하여 타일을 깔듯 배경을 채우게 된다. 




'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글

10. 하이퍼 링크(4-1)  (0) 2017.05.12
9. 이미지(3-3)  (0) 2017.05.08
7. 이미지(3-1)  (0) 2017.05.03
6. 글자와 목록 관련 태그(2-3)  (0) 2017.04.28
5. 글자와 목록 관련 태그(2-2)  (0) 2017.04.28
Posted by 멜데스
HTML.CSS.JavaScript/핵심요약2017. 5. 3. 01:44

3-1

  1. 1. 이미지 관련 태그 <img>
    • 웹 페이지에 이미지를 삽입하는 방법과 출력하기 위한 태그
    • <img src=“이미지 파일명”>
      • 이미지 파일인 GIF, JPEG 파일은 웹 브라우저에서 바로 인식
      • “src” 속성에 경로를 지정
  2. 2. 상대 경로 절대 경로
    • 상대경로
      • 웹 페이지가 저장된 폴더(즉 같은 폴더)에 저장되어 있을 경우 파일명만 써준다.
    • 절대경로
      • 루트 디렉토리부터 일일이 이미지 파일명까지 모두 기술한다.
  3. 3. 설명을 나타내기 위한 태그
    • alt 속성은 이미지 파일의 설명을 나타낸다.
    • 마우스를 이미지에 가져가면 alt에 지정한 설명이 도움말 처럼 나타남
  4. 4. 이미지의 테두리선
    • border 속성을 주어 이미지의 테두리선을 지정
    • 선의 두께 조절 가능, 두께는 픽셀 단위로 지정


'HTML.CSS.JavaScript > 핵심요약' 카테고리의 다른 글

3-3  (0) 2017.05.08
3-2  (0) 2017.05.03
2-3  (0) 2017.04.28
2-2  (0) 2017.04.28
2-1  (0) 2017.04.28
Posted by 멜데스
HTML.CSS.JavaScript/수업2017. 5. 3. 01:44

7. 이미지(3-1)

1. 이미지 삽입하기 위한 태그 

이미지 관련 태그 

• 이미지 관련 태그 <img> 

– 웹 페이지에 이미지를 삽입하는 방법과 출력하기 위한 태그 

– <img src=“이미지 파일명”> 

• 이미지 파일인 GIF, JPEG 파일은 웹 브라우저에서 바로 인식 

• “src” 속성에 경로를 지정 

• <img> 

– 웹 페이지에 이미지를 삽입하는 방법과 출력하기 위한 태그 

– <img src=“이미지 파일명”> 

• 이미지 파일인 GIF, JPEG 파일은 웹 브라우저에서 바로 인식 

• “src” 속성에 경로를 지정


 

2. 상대경로와 절대경로 

[상대경로 절대경로] 

– src 속성에 지정되는 경로를 상대 경로와 절대 경로로 표시 

– 상대경로 

• 웹 페이지가 저장된 폴더(즉 같은 폴더)에 저장되어 있을 경우 파일명만 써준다. 

• EX. <img src=“sample.gif> 

– 절대경로 

• 루트 디렉토리부터 일일이 이미지 파일명까지 모두 기술한다. 

• EX. <img src=“C:\HTML\sample\sample.gif> 


3.이미지에 설명을 나타내기 위한 태그 

설명을 나타내기 위한 태그

– alt 속성은 이미지 파일의 설명을 나타낸다. 

– 마우스를 이미지에 가져가면 alt에 지정한 설명이 도움말 처럼 나타남 

• EX.<img alt=“이미지 설명”> 

이미지 테두리선 

– border 속성을 주어 이미지의 테두리선을 지정 

– 선의 두께 조절 가능, 두께는 픽셀 단위로 지정 

• Border 속성을 주기 전에는 테두리가 안 나타나지만 링크시키면 테두리가 나타난다. 

• Border=“0”으로 지정하여 테두리선을 없앨 수도 있다. 





 

 

'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글

9. 이미지(3-3)  (0) 2017.05.08
8. 이미지(3-2)  (0) 2017.05.03
6. 글자와 목록 관련 태그(2-3)  (0) 2017.04.28
5. 글자와 목록 관련 태그(2-2)  (0) 2017.04.28
4. 글자와 목록 관련 태그(2-1)  (0) 2017.04.24
Posted by 멜데스
HTML.CSS.JavaScript/핵심요약2017. 4. 28. 01:19

2-3

  1. 1. 목록 태그
    • 순서가 없는 리스트(Unordered List) - <ul> 태그
    • 순서가 있는 리스트(Ordered List) - <ol> 태그
    • 정의 리스트(Definition List) - <dl> 태그
  2. 2. 이들에 대한 실제 내용을 나타낼 때 사용하는 태그 <li>
  3. 3. 움직이는 텍스트 만들기
    • 텍스트를 일정 방향으로 흘러가도록 하는 <marquee>태그 제공
  4. 4. behavior 속성
    • 흘러갈 방향과 속도를 조절 behavior=scroll, slide, alternate
  5. 5. direction 속성
    • 흘러갈 방향을 조절 direction=left, right, top, down
  6. 6. scrolldelay, scrollamount 속성
    • scrolldelay는 스크롤 지연 속도를 지정, 속성값 1/1000 초 단위
    • scrollamount는 한번에 스크롤되는 픽셀 수를 지정, 값이 커질수록 빠름
  7. 7. bgcolor, loop 속성
    • bgcolor 흘러가는 문자열에 배경색을 지정
    • loop는 반복 회수를 지정


'HTML.CSS.JavaScript > 핵심요약' 카테고리의 다른 글

3-2  (0) 2017.05.03
3-1  (0) 2017.05.03
2-2  (0) 2017.04.28
2-1  (0) 2017.04.28
1-3  (0) 2017.04.21
Posted by 멜데스
HTML.CSS.JavaScript/수업2017. 4. 28. 01:18

6. 글자와 목록 관련 태그(2-3)

목록에 관련된 태그

- 목록 태그

1) 순서가 없는 리스트(Unordered List) - <ul> 태그

2) 순서가 있는 리스트(Ordered List) - <ol> 태그

3) 정의 리스트(Definition List) - <dl> 태그

- 이들에 대한 실제 내용을 나타날 때 사용하는 태그 <li>

=======================================

<MARQUEE> 태그

움직이는 텍스트를 만드는 <MARQUEE> 태그

- 움직이는 텍스트 만들기

- 텍스트를 일정 방향으로 흘러가도록 하는 <marquee>태그 제공


   속성값                          의미 

align          텍스트의 위치(상, 중, 하)를 지정 

height, width  텍스트가 나타날 범위(영역)를 지정 

hspace, vspace       텍스트 바깥쪽의 상하좌우 여백 지정 


 behavior 속성 
 흘러갈 방향과 속도를 조절 behavior=scroll, slide, alternate 

 direction 속성 
 흘러갈 방향을 조절 direction=left, right, top, down 

 scrolldelay, scrollamount 속성 
 scrolldelay는 스크롤 지연 속도를 지정, 속성값 1/1000 초 단위 
 scrollamount는 한번에 스크롤되는 픽셀 수를 지정, 값이 커질수록 빠름 

 bgcolor, loop 속성 
 bgcolor 흘러가는 문자열에 배경색을 지정 
 loop는 반복 회수를 지정 

 

Marquee태그의 behavior 속성.html

Marquee태그의 bgcolor 속성.html

Marquee태그의 direction 속성.html

Marquee태그의 scroll 속성.html

순서가 없는(비서열 형) 목록을 만들기 위한 태그.html

순서가 있는(서열 형) 목록을 만들기 위한 태그.html

움직이는 텍스트 만들기.html

정의 목록 만들기 태그.html


 


'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글

8. 이미지(3-2)  (0) 2017.05.03
7. 이미지(3-1)  (0) 2017.05.03
5. 글자와 목록 관련 태그(2-2)  (0) 2017.04.28
4. 글자와 목록 관련 태그(2-1)  (0) 2017.04.24
3. HTML 기본 태그 익히기(1-3)  (0) 2017.04.21
Posted by 멜데스

티스토리툴바