링크란 문서와 문서 간 연결을 의미하며 기본적으로 a 태그 작성
-> 사진과 같은 이미지 객체 삽입 시 img 태그
a 태그
HTML에서 내부나 외부 링크를 생성
a 태그는 대상 경로를 의미하는 href 속성 필수로 사용해야 함
<a href = "대상 경로" target = "링크 연결 방식" title = "링크 설명"></a>href 속성은 a 태그로 생성하는 링크의 대상 경로를 입력할 때 사용
-> 대상 주소의 URL이거나 내부 문서의 id 속성값 일수 있다
대상 경로가 명확하지 않은 경우 # 작성
-> 이 경우 다른 페이지로 연결되지 않음
target 속성 은 a 태그로 링크를 생성할 때 대상이 연결되는 방식 지정
-> _blank, _parent, _self, _top등을 사용할 수 있지만 보통 새창을 여는 _blank방식 사용
-> 생략 가능
title 속성에는 링크를 설명할 수 있는 텍스트 작성
ex)
<a href = "https://www.naver.com" target = "_blank" title = "네이버 메인 페이지"> 네이버 홈페이지</a>img 태그
이미치 객체를 삽입하고 싶은 경우 사용
src 속성, alt 속성
<img src='이미지 경로' alt = "이미지 설명 ">src는 삽입하려는 이미지의 경로를 입력하는 속성
HTML에서 이미지 경로는 항상 웹 브라우저에서 실행되는 HTML 파일의 위치가 기준
| 기호 | 설명 |
|---|---|
| ./ | 현재 폴더 |
| ../ | 상위 폴더 |
ex) 삽입하려는 이미지 파일이 HTML 파일과 같은 폴더에 있는 Images 폴더에 있고 이미지 파일의 이름과 확장자가 beach.jpg라면 현재 폴더를 의미하는 ./ 기호를 사용해 다음과 같이 작성
<img src = "./images/beach.jpg">만약 HTML 파일의 상위 폴더에 있는 images 폴더에 있을 시
<img src = "../images/beach.jpg">../../ -> 이 경우는 상위폴더의 상위 폴더
alt 는 이미지의 설명을 넣을 때
-> 그림 위에 마우스를 올려 두면 설명 확인 가능
-> 표준에서는 src,alt 속성 필수로 사용하도록 권장
ex)
<img src = "./beach.jpg" alt = "beautiful beach">이미지에 링크
<a href = "대상 경로">
<img src = "이미지 경로" alt = "대체 텍스트">
</a>ex)
<a href = "https://www.google.com" target = "_blank">
<img src = "./google_logo.png" alt = "구글 로고">
</a>strong 태그
텍스트 의미를 강조하고 싶을 때 사용
시각적으로 텍스트를 굵게 표시하는 것 뿐 아니라, 웹 브라우저에서 중요한 부분임을 알려주는 역할
중첩 사용 가능
ex)
<p><strong> 시설 이용자는 <strong> 아래에 안내되어 있는 수칙</strong>을 반드시 지켜야 합니다</strong></p>em 태그
em 태그는 텍스트가 기울어져 보이면서 강조 효과 낼수 있음
<em> 강조하고 싶은 텍스트 </em>