다연이네

[days02] a 태그를 사용해 네모 박스 클릭 / 이미지 올리기 본문

Web/HTML

[days02] a 태그를 사용해 네모 박스 클릭 / 이미지 올리기

　다연　 2020. 12. 1. 17:48
반응형

1. a태그를 사용해 네모 박스 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	/*css의 주석처리 (html과 다름)*/
	/* CSS : 문서의 전반적인 스타일 설정 style 태그 사용 */
	/* 대상(selector){
			속성:속성값;
			속성:속성값;
			  :
		} 
	*/
	
	a{
		color: black;
		text-decoration: none;
		background-color: #f44366;
		padding: 15px; /* 패딩: 안쪽여백, 마진: 밖여백 */
		
		/* 글자가 깨졌으니 밑의 display 추가하자 */
		display: inline-block; /* 인라인모드/블럭모드 이해 필요  */
		
		width: 200px;
		text-align: center;
		
		margin: 5px;
	} 
	
	a:hover{/* a태그에 마우스가 올라갈 때 라는 의미*/
		color: white;
		text-decoration: underline;
		
	}
	
	
</style>
</head>

<body>
	<!-- html 주석처리 -->
	<a href="#">naver</a><br>
	<a href="#">daum</a><br>
	<a href="#">sist </a><br>
</body>
</html>

위 코딩을 통해 박스에 마우스를 올리면 글자가 흰색이 되고 밑줄이 생긴다. 또한, 링크를 달아두지 않았으므로 눌러도 아무 결과가 없다.

 

2. 이미지

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>

		img{/*모든 이미지 태그를 뜻함  */
			/*width: 100%; /*이미지를 백분율로 줄 수 있음  */
			/* 모든 이미지가 100%로 늘어났지만, style시트로 설정한 이미지만 안 늘어남 */
		}
	
		/*id값을 사용하려면 #id명  */
		#naverimg{
		/* background-size: 440px 410px; */
		}
</style>
</head>


<body>
	<h3>html 이미지</h3>
	
	<!--  링크 이미지 허용-->
	<a href="https://www.naver.com"><img id="naverimg" src="./images/img_kenik.gif" alt="네이버이미지"></a><br>
	
	
	<!--  애니메이션 이미지(gif) 허용-->
	<img alt="java man" src="./images/img_kenik.gif" ><br>
	
	

	<img alt="제주하늘" src="./images/cloud.jpg" ><br>
	<img alt="제주하늘" src="./images/cloud.jpg" width="200" ><br><!-- width가 줄면 height도 자동으로 줄어듦 -->
	<!-- 기억: ex03.html 웹페이지가 로드될 때 웹 서버에서 이미지를 가져와서 웹페이지에 삽입시킴
			 -->
	<!-- 500 666 -->
	<!-- 이미지 태그에 너비, 높이 설정을 하지 않으면 원래 이미지의 너비, 높이로 설정된다. -->
	<img alt="제주하늘" src="./images/cloud.jpg"  style=" width:200px; height:120px"><br>
	
	<img alt="제주하늘" src="./images/cloud.jpg" width="200" ><br>
	
</body>
</html>

첫번째 gif를 클릭하면 네이버와 연결된다.

img태그의 width, height 속성으로 설정하는 것보다 style 속성으로 width, height을 설정하는 것이 좋다.
  이유 ? 스타일 시트가 이미지 크기를 변경하는 것을 방지할수 있다. 
  이때 주의할 점은 단위를 꼭 붙혀줘야 한다. 

 

 

반응형
저작자표시 비영리

'Web > HTML' 카테고리의 다른 글

[days02] picture 태그  (0) 2020.12.01
[days02] 이미지 플로팅(Image Floating)  (0) 2020.12.01
[days02] a 태그 역할 - 링크 외 책갈피, 경고창 띄우기, 메일 보내기  (0) 2020.12.01
[days02] &땡땡땡;  (0) 2020.12.01
[days01] html 링크 - 페이지 간에 이동, 다른 문서로 이동  (0) 2020.11.30
'Web/HTML' Related Articles more
Comments