[HTML] style /이미지 /링크 태그

1) Style 태그

CSS 파일 말고도 폰트나 배경에 style을 주는 방법

 

<h3 style="font-size: 150%;">글자 크기과 관련된 스타일입니다.</h3> 
<h3 style="color: blueviolet;">글자 색과 관련된 스타일입니다.</h3> 
<h3 style="text-align: center;">글자 위치와 관련된 스타일입니다.</h3>

2)  이미지

이미지 넣는 방법

 

<img src=”경로” alt=”사진이름설명 ”>

 

이미지 경로(Path)

URL(Uniform Resource Location) → 자원의 위치를 나타냄

URN(Uniform Resource Name) → 자원의 이름을 나타냄

 

<프로토콜://ip주소:port번호/경로/파일명?쿼리>

 

 

① 이미지 웹사이트에서 가지고 오기 → 웹사이트에서 이미지 주소복사

 

② img 폴더 내 존재하는 이미지 가져오기

<h2>2. img 폴더 내 존재하는 이미지 가져오기</h2>     
<h3>2-1. 절대경로로 가져오기</h3>     
<img src="/img/search.png" alt="search" style="width: 50px; height: 30px;">     
<h3>2-2. 상대경로로 가져오기</h3>     
<img src="..\img\search.png" alt="search" style="width: 50px; height: 30px;">

3) 링크

<a href=”http://가고자하는 사이트 주소”>
<h2>3. 링크</h2>   
<a href="http://www.naver.com" target="_self">3-1. 네이버 바로가기(현재페이지에서 이동 target="_self")</a>  
<br>   
<a href="http://www.naver.com" target="_blank">3-2. 네이버 바로가기(새로운페이지에서 이동 target="_blank")</a> 
<br>   
<a href="/intro.html">3-3. intro.html로 이동하기(절대경로로 접근)</a> 
<br>   
<a href="../intro.html">3-4. intro.html로 이동하기(상대경로로 접근)</a> 
<br>

 

  4) 섞어서 사용해보기

 <a href="http://www.naver.com" target="_blank">            
 <img src="../img/friend01.jpg" style="width: 50px;">이미지로 네이버 바로 가기 </a>
 <br>