그럼에도 불구하고

👨‍💻

[Visual Studio Code]img태그 / a태그 사용하기 본문

HTML, CSS/Function implementation

[Visual Studio Code]img태그 / a태그 사용하기

zenghyun 2022. 10. 23. 21:06

HTML에서는 <img> 태그를 사용하여 이미지를 넣을 수 있다. 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>images</title>
</head>
<body>
    <h1>이미지 삽입</h1>
<div>    
    그림을 다운로드 하여 사이트 만들 준비
    img : inline 속성을 가지고 있고, block 속성도 가지고 있다. 
    inline-block : 줄 바꾸지 않고 너비, 높이, 정렬이 가능하도록 한다.
                   너비의 비율에 맞추어 높이도 자동 설정
                   너비, 높이 지정시 단위 px는 생략 
                   ( % 단위도 쓸 수 있음 -> 부모 너비, 높이의 단위 기준 px를 제외한 나머지는 생략 불가 -> css로 지정하여 디자인 )
                    웹에서 사용할 수 있는 이미지 확장자 : png, jpg(배경 투명 지정 불가), gif, webp
                    png 16bit, 24bit로 처리  

    자동으로 줄바꿈 가능 
          너비, 높이, 정렬 가능 
          블록 > 인라인 
</div>

<img src="./images/gnb_banner.png" alt="카누 마일드 로스트 아메리카노 10티백 미니박스" title="카누 마일드 로스트 아메리카노 10티백 미니박스" width="50%"> 

  
<!-- 
    . : 현재 폴더
    ..: 상위 폴더
    / = | = \ 
    alt: 사진이 깨지거나 시각장애인들이 웹을 쓸 때 무슨 사진인지 알 수 없기 때문에 그 이미지를 이해할 수 있도록 간단한 이미지 사용설명서를 작성하는 공간
 -->
</body>
</html>

 

img 태그는 <img>와 같이 작성하고 사용하면 된다.

 

 

img 태그는 inline 속성과 block 속성을 둘 다 가지고 있다.

 

 

태그 안에 src에는 image의 경로를 지정하면 된다. 

 

 

alt를 사용하면 사진이 깨지거나 시각장애인들이 웹을 쓸 때 무슨 사진인지 알 수 없기 때문에

 

 

그 이미지를 이해할 수 있도록 간단한 사용 설명서를 작성하는 공간이다.

 

 

 

<a> 태그를 사용하면  페이지 이동, 파일 다운로드, 메일 보내기, 전화 걸기, 음악 재생, 영상 재생 등이 가능하다.

 

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>하이퍼링크</title>
</head>

<body>
    <h1>하이퍼링크</h1>
    <a href="https:www.naver.com">네이버</a> <br>
    <a href="https:www.daum.net">다음</a>
    <div>
        인라인 속성의 태그
        ::link => 새링크: 파랑글씨 밑줄
        ::visited => 한번 이상 방문 : 보라글씨 밑줄
        ::active -> 링크를 클릭 중

    </div>
    <a href="https://www.dongsuh.co.kr/2017/00_main/main.asp"><img src="./images/gnb_banner.png" alt="" width="100"></a>
    <br>
    <!-- 이미지로도 하이퍼링크가 가능하다. -->
    <a href="./day03_1018.zip">파일다운로드</a><br>
    <!-- a태그로 파일 다운로드도 가능하다. -->
    <a href="mailto:pipo36@naver.com">관리자에게 메일보내기</a> <br>
    <!-- a태그로 메일 보내는 것도 가능하다. -->
    <a href="tel: 010-xxxx-xxxx">관리자에게 전화하기</a> <br>
    <!-- a태그로 관리자에게 전화거는 것도 가능하다. -->
    <a href="소리파일.mp3">음악듣기</a>
    <!-- a태그로 소리가 나오게 할 수 있다. -->
    <!-- 소리파일 확장자: mid, wav, mp3 (우리나라에서 만든 압축 표준형식) -->
    <a href="동영상.mp4">동영상보기</a>
    <!-- a태그로 동영상 재생이 가능하다. 대신 좀 느리다.-->
    <!-- mov, avi, mp4, acc -->

    <!-- 웹표준 사용법 -->
    <video src=""> 
        <source src="동영상.mp4">    
    </video>
<audio> 
    <source src="소리파일.mp3"> 
</audio>


</body>

</html>

 

 

href : 주소  원하는 주소로 이동한다.
href : 파일 파일을 다운받을 수 있다. 
href : 메일 주소 메일을 보낼 수 있다.
href : 전화번호 전화를 걸 수 있다. (단, 추가 작업 필요)
href : 음악파일 음악을 재생할 수 있다.
href : 영상파일 영상을 재생할 수 있다.

 

 

음악파일과 영상 파일의 경우 

 

웹 표준에서는 

 

<video> 태그와 <audio> 태그를 사용하기 때문에 

 

<a> 태그에서는 사용하지 않는 것이 좋다.

 

 

a 태그의 href는 html파일 내에서 지정된 name 끼리의 이동도 가능하며, 

 

href에 "#"을 넣으면 페이지 제일 상단으로 이동이 가능하다.

 

 

[ target attrubute ] 

target attribute는 링크를 클릭했을 때 윈도우를 어떻게 오픈할 지를 지정한다. 

 

값 속성
_self (기본값) 링크를 클릭했을 때 연결문서를 현재 윈도우에서 오픈한다. 
_blank 링크를 클릭했을 때 연결문서를 새로운 윈도우나 탭에서 오픈한다.

 

target="_blank"를 사용해 외부 페이지를 오픈하는 경우, 이동한 외부 페이지에서 자바스크립트 코드를 사용해 악의적인 페이지로 리다이렉트 할 수 있는 보안 취약점('Tabnabbing 피싱 공격)이 있다. 따라서 rel="noopener noreferrer"를 추가해 Tabnabbing 피싱 공격에 대비할 것을 권장한다. 

 

참고로 noopener 속성은 성능 상 이점도 있는 것으로 알려져 있다. 

자세한 내용은 아래 링크를 참고하자. 

Test

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../style/reset.css">
    <style>
        .content { height: 400px;}
        .content1 { background-color: darkcyan;}
        .content2 { background-color: yellowgreen;}
        .content3 { background-color: darkcyan;}
        .content4 { background-color: yellowgreen;}
        </style>
</head>
<body>
    <a href="#content1">1Lorem</a>
    <a href="#content2">2Lorem</a>
    <a href="#content3">3Lorem</a>
    <a href="#content4">4Lorem</a>
   
    <a name="content1"></a>
    <div class="content content1">1Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae molestiae earum dolor maiores quas cumque, quidem, dicta omnis et, velit minima minus possimus atque eius repellat culpa nisi dolorem voluptatem.
        <br><a href="#">맨위로 가기</a>
    </div>
    <a name="content2"></a>
    <div class="content content2">2Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio earum expedita perferendis dolor consectetur eligendi fugiat repellendus excepturi reprehenderit nisi, numquam provident quasi, quia ea nobis illo atque nulla alias.
        <br><a href="#">맨위로 가기</a>

    </div>
    <a name="content3"></a>
    <div class="content content3">3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nihil adipisci tempore at possimus unde veritatis voluptatem delectus nulla ipsa! Animi illum debitis porro inventore qui adipisci aperiam rerum labore?
        <br><a href="#">맨위로 가기</a>

    </div>
    <a name="content4"></a>
    <div class="content content4">4Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam distinctio et facere tempore iure quo quam vitae eaque unde amet molestiae dolorem explicabo aut debitis, sequi veniam obcaecati a voluptate.
        <br><a href="#">맨위로 가기</a>

    </div>
</body>
</html>

 

 

결과

Document 1Lorem 2Lorem 3Lorem 4Lorem
1Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae molestiae earum dolor maiores quas cumque, quidem, dicta omnis et, velit minima minus possimus atque eius repellat culpa nisi dolorem voluptatem.
맨위로 가기
2Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio earum expedita perferendis dolor consectetur eligendi fugiat repellendus excepturi reprehenderit nisi, numquam provident quasi, quia ea nobis illo atque nulla alias.
맨위로 가기
3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nihil adipisci tempore at possimus unde veritatis voluptatem delectus nulla ipsa! Animi illum debitis porro inventore qui adipisci aperiam rerum labore?
맨위로 가기
4Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam distinctio et facere tempore iure quo quam vitae eaque unde amet molestiae dolorem explicabo aut debitis, sequi veniam obcaecati a voluptate.
맨위로 가기

'HTML, CSS > Function implementation' 카테고리의 다른 글

[Visual Studio Code] justify-content  (0) 2022.11.01
[Visual Studio Code] scroll-behavior: smooth  (0) 2022.10.29
[Visual Studio Code] overflow 사용하기  (0) 2022.10.29
[Visual Studio Code] css 사용하기 / nth-child / nth-of-type  (0) 2022.10.23
[Visual Studio Code] ol/ul/dl 태그 사용하기  (0) 2022.10.23
'HTML, CSS/Function implementation' Related Articles more
Comments