[html] 이미지, 링크, 엔티티(entity)코드

1. 이미지

 

* 확장자 

• jpg ( jpeg ) : 기본
• png : 투명이미지
• svg : W3C가 개발한 개방형 표준으로 벡터포맷유형
• gif : 움짤
• WebP : 구글에서 개발한 이미지 포맷 - gif, png, jpg 포맷을 대체하귀 위해 개발  

<img src="이미지 주소" alt="대체텍스트필수">

 

* img 태그 속성

•  src (*) : 이미지 주소 ./ 혹은 생략
•  alt (*) : 대체 텍스트 - 이미지에 있는 글자 혹은 제목으로 작성
•  title : 대체 텍스트가 길면 alt에 간당히 적고 나머지 내용은 title에 작성
• width, height : 주로 css로 처리 / px 사용 
    

2. 폴더 경로

 

./ : 현재 폴더 ( 생략가능 )

../ : 상위 폴더

/ : 최상위( 절대위치 ) 

 

3. 링크

 

다른 페이지나 같은 페이지 웹주소 연결, 이메일, 내부(외부) 페이지 연결

<a href="URL주소" target="새탭" title="툴팁" > 컨텐츠 </a>

 

 

•  <a> : 링크 - 사이트 연동

-> a 태그 안에 모든 태그 가능

-> 제목, 문단, strong, em, span, ul, ol, dl 등등

 

• href (*) : url 주소

-> 같은 공간 (다른경로)의 html 문서 연결

->  또는 이미지, 파일 등등 처리 가능

-> http:// 필수

•  제목 안에 : 제목, 문단, 리스트 불가
•   문단 안에 : 제목, 문단, 리스트 불가
• strong, em, span, b, a 등은 가능
•  img는 빈태그

-> 그 안에 절대 다른 태그 넣을 수 없음

 

• target : 새 탭으로 열기

-> target="_blank" : 새탭

 

 

속성	설명	형식
href	페이지 URL 웹 주소 : naver, nate..  반드시 http:// zip파일, pdf, ppt, 등등 파일 tel : 전화번호 mailto : 이메일  등등 내부 링크	href="파일명.html" href="http://www.naver.com" href="./파일명.pdf" href="tel:010-0000-1111" href="#아이디명"
target	_blank : 새탭 _self : 기본값 (생략과 동일)	target ="_blank"
title	툴팁	title ="네이버로 이동합니다."

 

4. 엔티티 (entity) 코드 

 

:  html 문서에서 특수 문자를 입력하기 위해 사용되는 코드 

기호	참조	설명
<	&lt;	less-than
>	&gt;	grater-than
"	&quot;	doble-quotation (이중인용부호)
&	&amp;	ampercent(앤드)
공백	&nbsp;	한 칸 띄우기
ⓒ	&copy;	copyright (저작권)
™	&trade;	trademark (상표)
®	&reg;	registered trademark (등록상표)