개발 공부 기록하기

Section 3. HTML 기초(3) 본문

프밍/HTML

Section 3. HTML 기초(3)

태영(泰伶) 2022. 11. 12. 23:59

12. 앵커anchor 태그 <a>

     하이퍼링크를 만드는 데 흔히 사용하며, 아~~주아주 자주 사용된다.

 

     <a> tag를 통해서 다른 웹 페이지, 이메일 주소, 파일,

     심지어는 현재 페이지의 다른 부분으로 스크롤이 내려가는 것까지 해낼 수 있다.

 

<a>I AM A LINK!</a>

     이렇게만 쓰면 하이퍼링크가 되지 않는다.

 

     이유는 앵커 태그에서 가장 중요한 필수 사항인 '목적지'

     즉, I AM A LINK!를 눌렀을 때 연결되는 페이지가 지정되지 않아서이다.

 

     목적지는 보통 아래 두 가지 방법으로 지정한다.

     ① URL

<a href="https://www.google.com">I AM A LINK!</a>

     ② 다른 HTML 문서   (여기서는 about.html이라는 파일이 있다고 가정하기로^^)

<a href="about.html">ABOUT PAGE</a>

 

 

     VSCode에서는 빈 줄에  a 를 누르고  Tab 을 누르면 자동으로

         

<a href=""></a>

     가 입력된다.

 

 

 

 

 

13. 이미지 <img>

     <img>는 이제까지 이 강의에서 공부했던 tag들 중에서 처음으로 닫힌 태그가 별도로 존재하지 않고,

     태그 옆으로 아무런 콘텐츠가 없는 tag다.

 

     이전에 공부한 tag들과는 달리 <img>는 이미지가 있는 위치(예: URL)만 속성으로 제공해주면 된다.

 

   

속성 속성값 예시 설명
src abcd.jpg source의 약자. 저장하지 않은 이미지에 대한 웹상에서의 URL을 속성값으로 쓸 수도 있고, 컴퓨터 안에 저장해서 가지고 있는 이미지의 이름을 적기도 한다. (가지고 있는 이미지를 사용할 경우, 이미지 파일명과 확장자를 확실히 밝혀준다.)
width 200px 이미지의 너비를 조절하면 같은 비율로 이미지의 세로 길이도 조절된다.
<img> tag의 속성으로 이미지의 크기를 조절할 수도 있지만 추천하지 않는다. 이보다는 CSS로 조절하는 것이 훨씬 낫다.
alt 이 이미지는 ~~~에 대한 이미지입니다. 이미지를 불러올 수 없을 경우, 텍스트로 된 이미지 설명을 보통 넣는다.
반드시 작성해야 하는 속성은 아니다.
*접근성 면에서는 아주 유용하다.

*접근성: 사람들이 웹 사이트에 접근할 수 있게 만드는 것. 시각장애인과 같이 웹 사이트를 원활히 사용할 수 없는 사람들을 위한 스크린 리더(screen reader) 사용 시에 alt 속성이 제 역할을 톡톡히 해준다.

 

 

 

 

 

14. 주석

     일단, 주석은 요소element가 아니다.

     그래서 브라우저에서는 보이지 않는다.

     보통 메모, 피드백, 리마인더 용도로 사용된다.

 

     HTML에서는 잘 사용되지 않으나,

     CSS와 Javascript를 비롯해 많은 언어들에 있는 '주석' 기능은 유용히 사용되는 편이다.

 

     HTML에서의 주석은

     <!--내용 작성-->

     과 같이 쓰인다.

 

     이렇게 일일이 홑화살괄호, 느낌표, 하이픈.. 쓰는 대신,

     단축키라는 아주 유용한 녀석이 있다!!

 

     단축키를 확인하기 위해서는

     지난번 강의 'VSCode 팁: 자동 포맷'에서 한 번 다루어졌던

      Ctrl  +  Shift  +  P  를 눌러 Command Palette를 연 뒤,

     줄 주석 설정/해제Toggle Line Comment를 검색해 그에 해당하는 단축키를 확인하면 된다.

 

     오호,  Ctrl  +   /   로구만..!!  (MAC에서는  cmd  +   /   )

 

     먼저 내용을 작성해 둔 줄에서 단축키를 눌러 주석으로 만들 수도 있고,

     단축키를 먼저 누른 줄에 내용을 작성할 수도 있다.

 

 

 

 

 

15. 코딩 연습 3: Wolf Images & Links Exercise

     과제에서 제공된 URL로 하이퍼링크 연결 및 이미지 삽입을 시도했다.

<!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>코딩연습 3</title>
  </head>
  <body>
    <a href="https://en.wikipedia.org/wiki/Wolf">위키피디아 영문판_늑대</a>
    <br/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/5f/Kolm%C3%A5rden_Wolf.jpg" alt="눈밭 위를 유유히 걸어가고 있는 굶주린 늑대 사진">
  </body>
</html>

↓

화면 배치 예쁘지 않아도 되는 거 맞지...?? 헤헿

 

저작자표시 비영리 변경금지

'프밍 > HTML' 카테고리의 다른 글

Section 4. HTML의 다음 단계(2)  (0) 2022.11.17
Section 4. HTML의 다음 단계(1)  (0) 2022.11.15
Section 3. HTML 기초(2)  (0) 2022.11.12
Section 3. HTML 기초(1)  (0) 2022.11.11
Section 2. 웹 개발이란?  (0) 2022.11.06
'프밍/HTML' Related Articles more
Comments