김루루의 개발일기

링크태그/이미지태그/인용태그 - HTML 0612 본문

프론트엔드/HTML

링크태그/이미지태그/인용태그 - HTML 0612

김루루 2021. 6. 13. 00:59

◎ 링크태그(anchor)

<a href = "주소"></a>

(※ 속성값으로 href 필수)

 

- 웹사이트 주소
<a href = "http://www.naver.com"></a>


- 페이지 내 이동 (name의 id 값으로 이동)
<a href = "#name"></a>
	

- 메일쓰기	
<a href = "mailto"></a>

- 자동으로 linkTag에게 메일보내기
<a href = "mailto : linkTag@naver.com"></a>


- 전화걸기(모바일)
<a href = "tel : 전화번호"></a>


- target : 새탭으로 이동	target = "_blank"
		 (target이 없을때 기본 현재페이지에서 오픈)
<a href = "http://www.naver.com" 
   target= = "_blank"></a>

 

 


 

◎ 이미지 태그 (image)

<img src = "주소" alt = "이미지에 대한 텍스트">

(※ 속성값으로 src / alt 필수)

 

- 상대경로 : 내폴더에 있는 이미지 주소
<img src = " /images/egg.jpg " >


- 절대경로 : 이미지가 있는 경로값 주소
(이미지의 링크값)
<img src = "https://www.google.com/
search?q=%EA%B0%95EC%A7%80&sxsrf=
ALeLxAhWbd94KHWaMDu0Q9QF6BAgTEAE#im
grc=03GMjyjkGolskM">


- alt :	이미지를 대체할수 있는 텍스트
<img src ="/image/dog.jpg"
alt = " 귀여운 강아지 사진 ">

 


◎ 인용 태그 (Quotations)

 <blockquote>

      한줄정도 되는 저자가 인용한글의 block

   </blockquote>

 

<q> 문장 내에서 짧은 인용하는 글을 넣고 싶을때</q>

( q를 사용하는 경우 화면에 출력되는 글에 자동으로 ""가 생김)

 

<blockquote>
 너무 소심하고 까다롭게 자신의 행동을 고민하지 말라 . 
 모든 인생은 실험이다 . 더많이 실험할수록 더나아진다 <cite> 랄프 왈도 에머슨 </cite>
</blockquote>

로버트 엘리엇은 이런말을 했다 <q> 피할수 없으면 즐겨라</q> 참 좋은 말이다.



//출처

- 텍스트일때
<blockquote>
 너무 소심하고 까다롭게 자신의 행동을 고민하지 말라 . 
 모든 인생은 실험이다 . 더많이 실험할수록 더나아진다 <cite> 랄프 왈도 에머슨 </cite>
</blockquote>


- url주소일때
<blockquote cite = "URL주소> </blockquote>

 

 

 

Comments