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을 설정하는 것이 좋다.
이유 ? 스타일 시트가 이미지 크기를 변경하는 것을 방지할수 있다.
이때 주의할 점은 단위를 꼭 붙혀줘야 한다.
반응형