[HTML&CSS 스터디] 10. 링크 만들기 <a>

2024년 07월 06일

Song hyun
작성자
2024.07.06.:14

728x90

[HTML&CSS 스터디] 10. 링크 만들기 <a>

링크를 만드는 <a> 태그

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>고양이의 일상</title>
    <meta name="description" content="고양이가 좋아하는 것과 일상을 소개합니다.">
  </head>
  <body>
    <h1>고양이의 하루</h1>
    <img src="a.jpg" alt="꽁꽁냥">
    <a href="https://namu.wiki/w/%EA%BD%81%EA%BD%81%20%EC%96%BC%EC%96%B4%EB%B6%99%EC%9D%80%20%ED%95%9C%EA%B0%95%20%EC%9C%84%EB%A1%9C%20%EA%B3%A0%EC%96%91%EC%9D%B4%EA%B0%80%20%EA%B1%B8%EC%96%B4%EB%8B%A4%EB%8B%99%EB%8B%88%EB%8B%A4">뉴스 페이지로 이동하기</a>
    <p>꽁꽁 얼어붙은 한강 위로 고양이가 걸어다닙니다. 돌을 던져봐도 끄떡없습니다.</p>
  </body>
</html>

-링크의 대상(이동할 웹 페이지의 주소)는 href 속성에 작성한다.

-같은 폴더의 다른 파일로 이동할 때에는 해당 파일의 이름만 적어주면 된다.

-이미지를 링크로 만들고 싶을 때에는 <img>태그를 <a> 태그로 감싸주자!

728x90

'HTML,CSS, JS > HTML&CSS 스터디' 카테고리의 다른 글

[HTML&CSS 스터디] 12. 입력 양식 만들기 <form> (0)	2024.07.07
[HTML&CSS 스터디] 11. 리스트 출력하기 <ul>,<li> (0)	2024.07.07
[HTML&CSS 스터디] 9. 파일 경로 지정하기 (0)	2024.07.06
[HTML&CSS 스터디] 8. 이미지 삽입하기 <img> (0)	2024.07.06
[HTML&CSS 스터디] 7. 문장 출력하기 <p> (0)	2024.07.06

다음 글이 없습니다.

이전 글이 없습니다.

[HTML&CSS 스터디] 10. 링크 만들기 <a>

'HTML,CSS, JS > HTML&CSS 스터디' 카테고리의 다른 글

티스토리툴바