[HTML/CSS] 버튼 태그, 이미지 태그 예제

안녕하세요 오늘은 웹페이지를 꾸밀때 사용되는

 

버튼태그와 이미지 태그 예제에 대하여 알아 보겠습니다.

 

버튼 또는 텍스트를 클릭하면 원하는 페이지로 이동 할 수 있게 구현 할 수 있습니다.

 

관련 코드는 아래 스틱코드 링크를 참고해주세요

 

https://stickode.com/detail.html?no=2229 

https://stickode.com/detail.html?no=2229

 

*결과

 

 

1. 버튼 태그

<button onclick="location.href='test.html'">사진보기</button>

 

위와 같이 버튼 태그 코드를 한줄만 적으면 매우 간단하게 '웹 페이지 이동'을 구현 할 수 있습니다.

 

미리 만들어 놓은 text.html 페이지로 이동 하게 되는 것이죠.

 

여기서 href는 무슨 뜻일까요?

 

href는 hypertext reference의 약자입니다. 다른 웹 페이지로 이동 할 수 있게 도와주는 기능이라고 보면 될 것 같습니다.

 

참고로 a태그를 활용하여 '텍스트 클릭으로 페이지 이동하기'는 상단에 링크된 스틱코드 포스팅에 있습니다.

 

2. 이미지 태그

<img src="" alt="이미지" />

 

이미지를 화면에 보여주기 위해서는 위 코드에서 src에 있는 쌍따옴표에 원하는 이미지의 절대 경로를 넣어주면 됩니다. 

 

alt 속성은 해당 이미지를 가져오는 것에 문제가 생겼을때 출력되는 내용입니다.

 

Alternate(대체하다)의 줄임 말이죠.

 

위와 같이 문제가 생긴 이미지를 찢어진 아이콘으로 표시해주고

 

alt 속성에서 지정해준 메세지를 출력해줍니다.