링크는 문서와 문서 간 연결을 의미하며, 기본적으로 a 태그를 사용하며, 사진 같은 이미지 객체에는 img 태그로 작성한다.

1. 링크와 이미지 넣기

1-1. a 태그

<a href="대상 경로" target="링크 연결 방식" title="링크 설명"></a>

• a 태그는 HTML에서 내부나 외부 링크를 생성함
• a 태그는 대상경로를 의미하는 href 속성을 필수로 사용해야 하고, 그 외에는 target, title 속성 등을 선택해서 사용할 수 있다.

href 속성

• a 태그로 생성하는 링크의 대상 경로를 입력할 때 사용
• 속성 값은 대상 경로의 주소(url) 이거나 내부 문서의 id 속성값일 수 있다.
• 개발 중 대상경로가 확실하지 않고 명확하지 않을 때는 #으로 넣어둔다.

target 속성

• a 태그로 링크를 생성할 때 대상이 연결되는 방식을 지정
• 해당하는 속성 값으로는 _blank, _parent, _self, _top을 사용 할 수 있지만, 새 창으로 열리는 방식인 _blank 속성을 주로 사용함.
• href 속성과 다르게 생략이 가능하다.

title 속성

• 링크를 설명할 수 있는 텍스트를 작성, a 태그로 표현하지 못한 설명을 적으면 됨
• target 속성과 같이 생략이 가능하다.

URI 프래그먼트(URI Fragment)

  과일 중 <a href="#apple">사과</a>란 빨간색을 띄는 과일이다.


  <p id="apple">사과: 사과는 사과나무의 열매로, 세계적으로 널리 재배되는 열매 가운데 하나다. 평과, 빈파라고도 한다. </p>

• 페이지의 특정 부분을 가리키는 주소
• 원하는 곳에 id 속성을 지정한 후, 링크 주소로 사용할 때는 끝에 #으로 시작하는 #아이디-이름을 쓰면 됨

---

1-2. img 태그

<img src="이미지 경로" alt="이미지 설명">

• HTML에서 이미지 객체를 삽입하고 싶을 때는 img 태그를 사용한다.
• img 태그는 src 속성과 alt 속성으로 구분된다.

src 속성

• src(source)는 삽입하려는 이미지의 경로를 입력하는 속성
• HTML에서 이미지 경로는 항상 웹 브라우저에서 실행되는 HTML 파일의 위치가 기준이다.
• src 속성에 경로를 입력할 때는 경로 입력에서만 사용할 수 있는 몇 가지 약속된 기호를 사용한다.
• ./ (현재 폴더), .// (상위 폴더)
• 삽입한 이미지가 깨지거나 제대로 나오지 않는다면 src 속성에 이미지 경로를 잘못 입력한 경우이므로 경로를 다시 확인해야 함.

alt 속성

<img src="./여행 사진" alt="2020년 4월 21일 오후 1시">

• 삽입한 이미지 객체를 설명할 수 있는 텍스트를 넣는다.
• alt 속성으로 추가한 이미지 설명은 그림 위에 마우스를 올려두면 확인할 수 있다.
• 웹 표준에서도 src 속성과 alt 속성을 필수로 사용하도록 권고하므로 사용해야함.

1-3. 이미지 링크

<a href="대상 경로">
  <img src="이미지 경로" alt="대체 텍스트">
</a>

<a href="https://www.instagram.com/" target="_blank">
  <img src="./인스타 로고 사진" alt="인스타 그램 메인 페이지">
</a>

• a 태그 안에 텍스트 말고도 여러 요소가 올 수 있다.
• 그 중 img 태그를 a 태그를 안에 넣으면 이미지를 클릭했을 때 해당 링크로 이동 할 수 있다.
• 이 것을 HTML 에서는 이미지 링크라고 한다.

---

2. 텍스트 강조하기

2-1. strong 태그

<strong>중요한 텍스트</strong>

• strong 태그는 텍스트의 의미를 강조하고 싶을 때 사용한다.
• 스타일에서 차이를 두기 위해 시각적으로 텍스트를 굵게 표시하는 것 이외로 브라우저에게 중요한 부분임을 알려주는 역할도 포함한다.
• strong 태그는 중첩해서 사용할 수 있고, 실행 결과는 같지만 의미가 강조되게 된다.

2-2. em 태그

<em>중요한 텍스트</em>

• em(emphasis)태그 역시 텍스트의 의미를 강조하고 싶을 때 사용한다.
• 사용하게 되면 텍스트가 기울어져 보이면서 강조 효과를 나타낸다.
• em 태그도 중첩하여 사용할 수 있고, 실행 결과는 같지만 의미가 강조되게 된다.

---