00(HTML) HTML 기본 문법2 (Basic HTML Grammar) / Entity Code

  + HTML 기본 문법2 +

 

1. 이미지 태그 명령어 img는 alt 속성을 꼭 사용 합니다.

 

<img src="img/YoonSemComLogo.jpg" alt="윤샘컴교실 로고" />

 

img 요소의 alt 속성은 이미지에 대한 설명으로 웹 표준 준칙에 중요한 부분이며, 스크린 리더기가 읽어 주기 때문에 시각장애인에 대한 배려(웹 접근성) 입니다.

 

(아래의 이미지 2개를 HDD D: 에 다운로드 저장하세요)

YoonSemComLogo.jpg

YoonComLogo.jpg

 

 

 

 

 

 

2. img 요소 사용시는 이미지의 위치, 경로(Path) 설정 정확하게

 

<img src="./img/YoonSemComLogo.jpg" alt="윤샘컴교실 로고" />

 

<img src="../images/YoonComLogo.jpg" alt="윤샘컴교실 로고" />

 

- 현재 위치 기준: ./

- 현재에서 상위 위치로 : ../

 

 

 

 

 

 + 간단한 실습과제 - Image Hyper Link 복습 +

 

아래 각각의 사이트(4개)를 방문해서 대표 로고 이미지를

 URL 복사, 사이트 이동 하이퍼링크를 구현해 보세요...

www.daum.net

 

www.zum.com

 

? ?

http://www.naver.com/

 

http://www.gmarket.co.kr/

 

 

 

+++++++

 

 

 

+ HTML 기본 문법 - 특수문자 삽입 +

 

3. 특수문자 사용시는 Entity Name 또는 Entity Number 사용

 

<p>Excel &amp; PowerPoint</p>  (O)

<p>Excel &#38; PowerPoint</p>   (O)

<p>Excel & PowerPoint</p>          (X)

 

 

- Entity Name: &amp;

- Entity Code: &#38;

 

웹페이지 제작 마크업 작업시 키보드의 특수문자 &을 그냥 입력하면, 웹 표준 준칙에 의해서 문법적 오류가 발생 합니다.

 

글자 띄어쓰기 여러개 공백 삽입 처리는?

 

 

 

 

+++++++

 

+ 간단한 실습과제 - Entity Name, Entity Code 찾기 +

 

 

문제1. 특수 문자 Entity Name?

♠&spades; ♥&hearts; ♦&diams; ♣&clubs;  ◊&loz;

 

 

 

↑&larr;  ↓&darr;   ←&larr;   →&rarr;

 

 

 

 

문제2. 특수 문자 Entity Number?

 

«&#171; »&#187; &&#38; •&#149; ·&#183;

 

½&#189; ×&times; ÷&#247; ≠&#8800;

<&#60;   §&#167;  >&#62;

 

 

 

http://entitycode.com

(특수문자 참고 사이트)

https://dev.w3.org/html5/html-author/charref

 

 

 

▣ (^(oo)^) 윤샘 컴교실 ▣