J_world

1) 웹에 사용되는 이미지 종류

 

• .jpg
• png
• gif

2) html5 이미지 삽입하기

 

<img src="이미지 경로" alt="이미지가 지원이 되지않을 때 대체 할 문구">

1. src 속성
   - src안에는 절대주소 또는 상대주소를 사용한 URL 경로를 설정한다.
     URL : Uniform Resource Locator의 약자. 웹 서버의 파일 또는 문서의 정확한 경로나 주소, 위치.
     절대주소 : https:// , http:// 로 시작하며 '폴더이름/파일이름.확장자'로 끝나는 주소.
     상대주소 : html 문서가 있는 곳이 기준이 되며, 상위폴더 기준으로 하위 폴더 작성 (./폴더이름/파일이름.확장자)
   
   
2. alt 속성
   - alt : alternate의 약자. 이미지가 응답되지 않을 때 이미지를 대신해 표시되는 문구.
     시각 장애인이 이미지를 이해하기 위해 도와주는 속성(음성낭녹기가 속성에 저장된 문구를 읽어준다.)
     웹 접근성 규칙중 하나이다.

3) 이미지맵 태그 (image map)

 

-> HTMl 문서에서 하나의 이미지를 여러 개의 맵으로 나누어 클릭가능한 영역으로 나누는 것.

<img src="example.jpg" usemap="#example-map" alt="Example Image" width="300" height="200">

<map name="example-map">
    <area shape="rect" coords="0,0,150,200" href="link1.html" alt="Area 1">
    <area shape="circle" coords="225,100,50" href="link2.html" alt="Area 2">
</map>

1.   img 태그로 이미지를 표시하고, map 태그로 이미지맵을 정의한다.
   
   
2.  map name=" " 부분에 이미지맵의 이름을 지정한 후 img usemap=" "에 적어 맵과 이미지를 연결한다.
   
   
3.  area shape=" " 부분에 원하는 모양 값을 입력해준다.
   - rect : 직사각형
   - circle : 원형
   - poly : 다각형
   - default : 기본영역 정의
   
   
4. coords=" " 부분에 좌표값을 입력해준다.
   
   - rect 좌표 값 순서 : x1, y1, x2, y2
   (x1,y1) = 직사각형의 왼쪽 위 모서리 좌표
   (x2,y2) = 직사각형의 오른쪽 아래 모서리 좌표
   
   -circle 좌표값 순서 : x, y, radius
   (x,y) = 원의 중심 좌표
   radius = 원의 반지름 길이
   
   - poly 좌표값 순서 : x1, y1, x2, y2, x3, y3 ,...,xn, yn
   다각형의 각 꼭지점 좌표들을 순서대로 나열

1) 폰트 태그 (Font Tag)

 

b : bold의 약자, 글자를 진하게

strong : 글자를 진하게

위 둘의 차이로는 b: 일반적인 의미없는 강조(눈으로만 강조되는 글), strong : 중요한 단어를 강조(스크린 리더 프로그램을 통해 음성이 나올 때 강한 어조로 음성을 강조)가 있다

 

i : italic의 약자, 글자를 기울이게

em : emphasized의 약자, 글자를 강조하면서 기울이게

 

ins : insert의 약자로서 글자 밑줄 표시

s : 취소선

small : 글자 크기를 3/4 만큼 작게 나타낸다. (기본 글꼴 크기 : 16px)

sup : superscript의 약자. 위첨자

sub : subscript의 약자. 아래첨자

mark : 사용자가 지정한 범위 안에 배경색을 노락색으로 표기

 

2) 리스트 태그 (List Tag)

 

리스트는 관련된 주제에 맞는 내용을 나열하고자 할 때 사용하며, 관련 태그에는 정의목록, 순차목록, 비순차목록이 있다.

 

• 정의 목록
  -> 용어의 대한 정의를 내릴 때 사용
  - dl (definition list)
  - dt (defintion term)
  - dd (defintion description)
  
  
• 순차목록 (order list)
  ->ol, li, type(숫자, 로마숫자, 알파벳 ...)

1. 순차목록
2. 순차목록
3. 순차목록

1. 순차목록
2. 순차목록
3. 순차목록

1. 순차목록
3. 순차목록
5. 순차목록

 

• 비순차목록 (unorder list)
  ->ul, li, type(disc, circle, square ...)

• 순차목록
• 순차목록
• 순차목록
• 순차목록
• 순차목록
• 순차목록
• 순차목록
• 순차목록
• 순차목록