[HTML] 이미지와 앵커 태그

이미지 

<img> 태그? 이미지 삽입할 때 사용

                      src 속성을 사용해 이미지 파일이 있는 경로를 알려줘야 화면에 이미지 표시 가능

<img src="경로" [속성="값"]>

 

src 속성? source를 의미한다.

                 이미지 파일 경로 지정

alt 속성? 이미지를 설명해주는 대체 텍스트

<img src="경로" [alt="(설명해주는 대체 텍스트)"]>

 

width 속성, height 속성? 이미지 크기 조정하기

width 속성과 height 속성을 사용해야하는 이유는? 원본 이미지 크기를 원하는 크기로 조정할 수 있다.

 

 

 <img src="post-img.jpg" alt="HTML code on a screen" width="500" height="200" />

 이미지의 높이랑 크기도 지정할 수 있다.

 

<figure> 태그,<figcation> 태그? 이미지에 설명글 붙이는 것

<figure> 태그>? 설명 글을 붙여야 할 대상을 지정

                            한 단위가 되는 요소를 나타내기 위해 사용

                            <figure> 태그안에 <figcaption> 태그 사용

---

링크 

링크는 두가지 범주로 나눌 수 있다.

1. 내부페이지로 이동하는 것

당사 웹페이지 내의 다른 페이지로 이동하는 것이다. 

2. 외부페이지로 이동하는 것

버튼을 누르면 해당 사이트로 이동하는 것

 

<a> 태그,  href 속성? 링크 만들기

 <a> 태그 텍스트와 함께 사용하면 텍스트 링크가 되고 이미지와 함께 사용하면 이미지 링크

                 인라인 태그

<a href="링크할 주소" [속성="속성 값"]> 텍스트 </a>

<a href="링크할 주소" [속성="속성 값"]><img src="이미지 파일 경로"> </a>

 

<a href="#"></a>  → #의 의미: "URL"이 없거나 페이지 없음을 의미한다.  (=자리 표시자)

 

href 속성? 링크한 문서나 사이트의 주소를 입력

target 속성? 링크한 내용이 표시될 위치를 지정

download 속성? 링크한 내용을 보여 주는 것이 아니라 다운로드

rel 속성? 현재 문서와 링크한 문서의 관계

hreflang 속성? 링크한 문서의 언어를 지정

type 속성? 링크한 문서의 파일 유형

 

target 속성? 새 탭에서 링크 열기

<target 속성에서 사용할 수 있는 속성 값들>

_blank	링크 내용이 새 창이나 새 탭에서 열린다.
_self	target 속성의 기본 값으로 링크가 있는 화면에서 열린다.
_parent	프레임을 사용했을 때 링크 내용을 부모 프레임에 표시한다.
_top	프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 화면 전체에 표시한다.

    <p>
      You can learn more at
      <a href="https://developer.mozilla.org/ko/docs/Web/HTML" target="_blank"
        >MDM Web Docs
      </a>
    </p>