이진욱의코딩

하이퍼링크사용법 + 이미지태그에 대해 알아봅시다. 본문

HTML

하이퍼링크사용법 + 이미지태그에 대해 알아봅시다.

Crucifi 2019. 9. 12. 01:37

저번 포스팅 마지막 부분에서 했던 하이퍼링크 사용법에서 좀 더 추가해서 적어보도록 하겠습니다.

보통 네이버 홈페이지 메인화면을 보면 검색창 옆에 초록색의 NAVER라고 있습니다.

이 버튼을 클릭하면 달라지는 것 없이 홈 화면이 새로고침이 됩니다. 이것은 

 

 <h3><a href="#">링크연결</a></h3>

a라는 태그에서 #을 적으면 다른 화면으로 넘어가지 않고 새로고침이 됩니다.

 

9월 9일 포스팅 내용을 보면 줄 바꿈 태그를 따로 쓰지 않아도 알아서 줄 바꿈이 되는 것을 볼 수 있는데요

이런 것을 block요소라고 합니다. p태그, li태그도 block요소 중 하나

이와 반대로 줄 바꿈이 되지 않고 한 줄에 전부 나타나는 것이 inline요소입니다. 

html 코드를 전체적으로 본다면 block이 작용되는 부분이 inline요소보다 큽니다.

 

기존의 코드를 한번 살펴보도록 하겠습니다.(앞서 했던 내용이라 쉽습니다.)

 <li><a href="http://www.naver.com/" target="_blank">Naver</a></li>
 <li><a href="http://www.daum.net/" target="_blank">Daum</a></li>
 <li><a href="http://www.nate.com/" target="_blank">Nate</a></li>

이렇게 각각의 문자를 누르면 해당되는 사이트로 넘어가는 코드입니다.

하지만 중복되는 코드가 있어도 이렇게 개별적으로 적을 수는 없습니다.

html:5에서 변경된 부분이기도 합니다만 같은 링크일 때 한 번에 감쌀 수도 있습니다.

 

 <a href="http://www.w3c.org">
      <h4>w3c</h4>
      <p>w3c로 이동합니다.</p>
      </a>

이런 식으로 말이죠.

한번에 링크를 묶은경우입니다.

 

현재 웹페이지 내에서 이동하는 것을 해봅시다.

간단합니다. id값을 정해주고 밑의 a태그에 id값을 정해준 것을 통일시켜서 만들면 됩니다.

참 쉽죠?

 

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>현재 페이지내 이동</title>
  </head>
  <body>
    <h1>Alpha, Beta, Gamma</h1>
    <ul id="top">
      <li><a href="#Alpha">Move to Alpha</a></li>
      <li><a href="#Beta">Move to Beta</a></li>
      <li><a href="#Gamma">Move to Gamma</a></li>
    </ul>
    <hr>
    <h2 id="Alpha">About Alpha</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <a href="#top">top</a>
    <hr>
    <h2 id="Beta">About Beta</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <a href="#top">top</a>
    <hr>
    <h2 id="Gamma">About Gamma</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <a href="#top">top</a>
  </body>
</html>

 

이런 식으로 말이죠 결과를 보면서 좀 더 설명해드릴게요.

 

끔찍합니다.

 

위의 move to로 정의해놓은 버튼을 누르면 각 위치로 이동해줍니다.

about alpha라는 소제목 밑의 내용의 최하단에 top이라는 버튼을 만들어서 누르면 바로 맨 위로 올라가는 

액션을 만들었습니다.

 

마지막으로 image태그에 대해 한번 알아보도록 하겠습니다.

image 줄여서 img태그를 사용합니다. src로 사진의 위치를 기입하고 만약 이미지가 뜨지 않는다면 

alt에 이미지에 대한 설명을 적어주시면 됩니다.(확장자까지 전부 적으셔야 합니다.)

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>이미지태그, image</title>
  </head>
  <body>
    <img src="images/letter.jpg" alt="빨간우체통">
  </body>
</html>

 

만약 파일이 존재하지 않으면 alt에 적은 내용이 나오게 됩니다.

 

이렇게 나옵니다.

여기까지가 제가 공부한 내용입니다.

'HTML' 카테고리의 다른 글

폼(form)태그에 대해 알아봅시다.  (0) 2019.09.18
table태그 기초~응용까지  (0) 2019.09.17
여러가지 태그에 대해 알아봅시다.  (0) 2019.09.11
part1.프론트엔드의 기초  (0) 2019.09.10
HTML-입력방식(FORM)  (0) 2019.07.09
'HTML' Related Articles more