HTML 기초 공부 - 4. 실무에서 자주 사용하는 HTML 필수 태그 다루기 3

1. 링크와 이미지 넣기

 

링크(link)는 문서와 문서 간 연결을 의미하며, 기본으로 a 태그를 사용한다.

사진과 같은 이미지 객체를 삽입할 때는 img 태그로 작성한다.

 

 

1 - 1. a 태그

 

a 태그는 HTML에서 내부나 외부 링크를 생성한다.

a 태그는 대상 경로를 의미하는 href 속성을 필수로 사용하여야 하며,

그 외에 target, title 속성을 선택해서 사용할 수 있다.

 

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

 

• href 속성

href 속성은 a 태그로 생성하는 링크의 대상 경로를 입력할 때 사용한다.

속성값은 대상 경로의 주소(URL)이거나 내부 문서의 id 속성값일 수 있다.

 

만약 개발 단계에서 a 태그를 사용할 때 대상 경로가 아직 명확하지 않을 경우가 종종 있다.

이럴 때는 href="대상 경로"에 #을 넣으면 된다. (href="#")

 

• target 속성

target 속성은 a 태그로 링크를 생성할 때 대상이 연결되는 방식을 지정한다.

속성값으로 _blank, _parent, _self, _top을 사용할 수 있지만,

새 창으로 열리는 방식인 _blank를 제외하고 거의 사용하지 않는다.

href 속성과 다르게 target 속성은 생략할 수 있다.

 

• title 속성

title 속성에는 링크를 설명할 수 있는 텍스트를 작성한다.

a 태그의 콘텐츠만으로 표현하지 못한 설명을 적으면 된다.

target 속성과 마찬가지로 생략할 수 있다.

 

예를 들어, a 태그를 사용해 네이버 홈페이지를 새 창으로 연결하는 링크는 다음과 같이 생성한다.

 

<a href="https://www.naver.com" target="_blank" title="네이버">네이버 홈페이지</a>

 

 

1 - 2. img 태그

 

HTML에서 이미지 객체를 삽입하고 싶을 때는 img 태그를 사용한다.

img 태그는 src 속성과 alt 속성으로 구성된다.

 

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

 

• src 속성

src(source)는 삽입하려는 이미지의 경로를 입력하는 속성이다.

HTML에서 이미지 경로는 항상 웹 브라우저에서 실행되는 HTML 파일의 위치가 기준이다.

 

src 속성에 경로를 입력할 때는 경로 입력에서만 사용할 수 있는 몇 가지 약속된 기호가 있다.

 

./	현재 폴더
../	상위 폴더

 

삽입하려는 이미지 파일이 HTML 파일과 같은 폴더에 있는 images 폴더에 있고,

이미지 파일의 이름과 확장자가 'cat.jpg'라면 

현재 폴더를 의미하는 ./ 기호를 사용해 다음과 같이 작성한다.

 

<img src="../images/cat.jpg">

 

이때 상위 폴더 기호는 여러 번 사용할 수 있고, 기호 한 번당 하나의 상위 폴더를 의미한다.

따라서 "../../images/cat.jpg"라고 적으면 상위 폴더의 상위 폴더를 의미하게 된다.

 

또한, 삽입한 이미지가 깨지거나 제대로 나오지 않는다면

src 속성에 이미지 경로를 잘못 입력한 경우이므로 경로를 다시 한번 확인해 보는 것이 좋다.

 

• alt 속성

alt 속성에는 삽입한 이미지 객체를 설명할 수 있는 텍스트를 넣는다.

 

HTML 파일과 같은 폴더에 있는 cat.jpg 파일을 삽입하고 설명을 넣고 싶다면,

img 태그에 src 속성과 alt 속성을 사용해 다음과 같이 작성한다.

 

<img src="./cat.jpg" alt="귀여운 고양이">

 

만약 src에 해당하는 경로에서 cat.jpg 파일을 찾지 못하였다면 다음과 같이 보인다.

 

이미지가 깨지며 alt값이 보이는 현상

 

웹 표준에서는 src 속성과 alt 속성을 필수로 사용하도록 권고하므로 두 속성은 꼭 넣어야 한다.

 

 

1 - 3. 이미지 링크

 

a 태그 안에는 텍스트뿐만 아니라 여러 요소가 올 수 있다.

그중 img 태그를 a 태그 안에 사용하면 이미지를 클릭했을 때 특정 링크로 이동하게 할 수 있다.

이를 HTML에서는 이미지 링크라고 한다.

 

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

 

예를 들어, 구글 아이콘을 클릭했을 때 구글 사이트로 이동하게 할 수 있다.

 

<a href="https://www.google.com">
    <img src="./google_logo.jpg" alt="구글 로고">
</a>

이미지를 클릭하면 구글 사이트로 이동

 

 

2. 텍스트 강조하기

 

텍스트에서 특정 내용을 강조해 표현하고 싶을 때가 있다.

이럴 때는 strong 태그와 em 태그를 사용한다.

 

 

2 - 1. strong 태그

 

strong 태그는 텍스트의 의미를 강조하고 싶을 때 사용한다.

strong 태그는 스타일에서 차이를 두기 위해 시각적으로 텍스트를 굵게 표시하는 것뿐 아니라,

웹 브라우저에 중요한 부분임을 알려 주는 역할을 한다.

 

<strong>중요한 의미가 있는 텍스트</strong>

 

strong 태그를 사용하면 텍스트가 다음과 같이 굵게 강조된다.

 

<p>이 시설은 <strong>관계자 외 출입금지</strong>입니다.</p>

 

strong 태그는 중첩해서 사용할 수 있으며, 중첩할수록 의미를 더욱더 강조하게 된다.

그래서 다음 코드처럼 strong 태그가 중첩된 텍스트는 실행결과에서 강조 효과는 동일하지만

구조적으로 더 중요한 부분임을 의미하게 된다.

 

<p><strong>시설 이용자는 <strong>아래에 안내되어 있는 수칙</strong>을 반드시 지켜야 합니다.</strong></p>

 

 

2 - 2. em 태그

 

em(emphasis) 태그 역시 텍스트의 의미를 강조하고 싶을 때 사용한다.

em 태그를 사용하면 텍스트가 기울어져 보이면서, 강조 효과를 낼 수 있다.

 

<em>강조하고 싶은 텍스트</em>

 

다음은 em 태그를 사용한 예제 코드이다.

 

<p>여기서부터는 위험하니까 <em>절대로</em> 지나가지 마세요.</p>

 

em 태그도 중첩해서 사용할 수 있고, 중첩할수록 더욱더 강조하게 된다.

만약 다음처럼 태그를 중첩하면 중첩된 태그는 실행결과에서 강조 효과는 동일하지만

구조적으로 더욱더 강조하는 의미가 된다.

 

<p>여기서부터는 위험하니까 <em>절대로, <em>그 어떤 경우에도</em></em> 지나가지 마세요.</p>