<22.03.02> HTML 공부 일지 #02. Anchor 태그, list 태그, Quote 태그

HTML 공부하기 #2

어제부터 하여 금일까지 배웠던 HTML 태그들을 본 포스팅에서 소개하고자 한다. 본 포스팅에서는 웹 페이지에서 하이퍼텍스트를 만들어주는 Anchor 태그<a>와 목록을 만들어주는 태그 <li>와 인용문을 표시하는 <blockquote>에 대해 알아보고자 한다. 이외에 다른 태그들도 배웠지만 배운 것을 모두 포스팅하면 시간이 너무 걸릴 것 같아 개인적으로 중요해보이는 몇 가지만 포스팅한다.

 

1. Tag <a>

 

<a> 태그는 하이퍼텍스트를 만들어준다. 하이퍼텍스트는 현재 독자가 위치한 페이지에서 다른 페이지로 넘어갈 수 있게 도와주는 링크이다. 나무위키나 다른 문서를 읽을 때 파랗게 밑줄로 처리된 글자들이 하이퍼텍스트이다. <a> 태그는 웹 페이지에서 이러한 하이퍼텍스트를 만들어준다.  

 

<a> 태그의 기본적인 사용법은 아래와 같다.

<a href = "https://www.naver.com">네이버로 가기</a>

a 태그를 사용하기 위해서는 필수적으로 입력해야 하는 속성이 있다. href이다. 이는 hyper와 reference를 합친 용어이다.  페이지에서 링크를 눌렀을 때 연결할 페이지를 입력해주는 것이다. 값으로는 연결하고자 하는 URL을 입력한다.  위의 경우 외부 사이트로 연결을 하는 경우이지만, 만약 같은 폴더 내에 위치한 페이지를 연결해야 할 경우 상대경로나 절대경로를 활용하여 href 값을 줄 수 있다. 동일 폴더 내에 로그인 화면을 보여주는 'login.html'이라는 파일이 있다고 가정하고, index.html 파일에서 '로그인'이라는 링크를 눌렀을 때 로그인 화면을 보여주게 태그를 구성하고 싶다면 아래와 같이 만들면 된다.

 

<a href = "./login.html">로그인 하기</a>

 

<a> 태그는 다른 웹 페이지로의 이동도 가능하게 하지만, 동일 페이지에도 접근할 수 있으며, 다른 이에게 메일을 보내게 할 수도, 전화를 걸 수도 있다. <a> 태그로 할 수 있는 것들을 아래의 리스트로 정리해놓았다.

 

1.  다른 페이지로 이동하기
2.  페이지 내 특정 위치로 이동하기
3.  메일 보내기
4.  전화 걸기

 

1-2. 페이지 내 특정 위치로 이동하기

 

1번은 방금 소개했으니, 2번 부터 알아보자. HTML의 태그에는 id와 class를 부여할 수 있는데, 이는 CSS와 함께 사용되어 동일한 태그들에 일관된 스타일을 지정할 수 있도록 도와준다. <a> 태그는 id가 부여된 태그를 속성값으로 전달해주면 해당 링크를 클릭했을 때 id가 적힌 곳으로 화면을 이동시킨다. 예를 들면, 페이지의 맨 아래에 있는 '맨 위에'라는 링크를 클릭했을 때 페이지의 최상단으로 이동시킬 수 있다. 아래와 같이 작성할 수 있다.

 

<h1 id = "TOP">
	MAIN TITLE
</h1>

...

<a href = "#TOP">맨 위로</a>

href의 속성값에 id값을 그대로 입력해주면 된다. 다만 id값의 맨 앞에는  반드시 '#'을 입력해주저야 한다. <a> 태그로 둘러싸인 '맨 위로'라는 링크를 누르면 자동으로 'MAIN TITLE'이 있는 곳으로 화면이 조정된다. id 값을 활용하여 동일 페이지의 특정 위치로 이동할 수 있음을 알 수 있다.

 

1-3. 메일 보내기

 

링크를 클릭했을 때 누군가에게 메일을 보낼 수 있도록 속성을 부여할 수 있다. 예시 코드는 아래와 같다.

 

<a href = "mailto:emailwhois@naver.com">메일 보내기</a>

href 속성값에 'mailto:'라는 용어를 입력한 뒤 보내고자 하는 메일 주소를 입력해주기만 하면 된다. 

 

1-4. 전화 걸기

 

링크를 클릭했을 때 전화를 걸 수 있도록 지정할 수 있다. 예시 코드는 아래와 같다.

 

<a href = "tel:01012345678">전화 걸기</a>

 

href 속성값에 'tel:'이라는 용어를 입력한 뒤 전화번호를 입력하면 된다. 휴대폰으로 접속할 시 곧바로 통화연결이 된다.

 

2. Tag <ul> / <ol> / <dl>

 

항목들을 나란히 열거할 때 사용할 수 있는 태그이다.  이 태그들은 모두 리스트를 표현할 때 사용하는 태그들이지만, 어떤 리스트를 작성하느냐에 따라 그 쓰임새가 다르다. 지금부터 천천히 알아가보자.

 

2-1. <ul>

 

<ul> 태그는 순서가 중요하지 않은 리스트들을 작성할 때 사용한다. <a> 태그 처럼 오프닝 태그와 클로징 태그를 사용하여야 하며, <ul> 태그를 사용했다면 자식 태그에는 리스트 항목으로써 반드시 <li> 태그를 사용해야 한다. 여기서 '자식'이란, HTML 태그의 하위에 위치한 태그를 의미한다. '자식'의 상위에는 '부모'가 있으며 '부모-자식' 관계라 함은 단순히 위치 상 위아래에 있는 태그를 의미하는 것이 아니라 서로 연관되어있는 태그들의 종속관계를 의미한다. 아래의 <ul> 태그 사용 예시문을 보면 그 관계를 이해할 수 있을 것이다.

 

<ul>
    <li>박지윤</li>
    <li>박진영</li>
    <li>서태지</li>
</ul>

 

<li>태그는 <ul>이라는 상위 태그에 종속되어 있다. 여기서 <li>는 자식, <ul>은 부모라고 할 수 있다. <ul> 태그 안에 각 항목들이 <li> 태그로 둘러싸여 있음을 알 수 있다.  위와 같이 html을 작성하면 실제 웹 브라우저에서는 아래와 같이 표기된다.

 

<ul> 태그는 순서에 구애받지 않기 때문에 리스트의 스타일이 둥근 원으로 표시되었는데, 이는 CSS를 통해 수정할 수 있다. 

 

2-2. <ol>

 

<ol> 태그는 <ul>태그와 달리 순서가 중요한 리스트를 작성하고자 할 때 사용할 수 있다. 요리의 레시피라던가, 순위 등등을 작성할 때 사용한다. 사용법은 <ul>과 크게 다르지 않다. 아래는 사용 예시이다.

 

<h1>
	라면 끓이는 방법
</h1>

<ol>
    <li>냄비에 물을 적정량 붓는다.</li>
    <li>3분 정도 물을 끓인다.</li>
    <li>물이 끓기 시작하면 후레이크와 스프를 넣는다.</li>
    <li>라면을 넣는다.</li>
    <li>먹는다.</li>
</ol>

 

위와 같이 작성할 수 있다. <ul> 태그가 <ol>로 바뀌었을 뿐 작성법은 크게 다르지 않다. 이를 웹 브라우저에서 확인하면 아래와 같이 출력된다.

 

 

<ol> 태그를 사용하면, 사용자가 별도의 번호를 표기하지 않아도 웹 브라우저에서 자동으로 넘버링을 해준다. 리스트 태그를 의미에 맞게 사용하는 것이 중요하다.

 

2-3. <dl>

 

<dl> 태그는 여태껏 소개했던 <ul> / <ol> 태그와는 성격이 조금 다르다. <dl>은 정의 리스트라고도 하는데, 단순히 어떤 항목을 열거하기보다는, 사전처럼 특정 용어에 대한 설명을 진행해야 할 때 사용할 수 있다.

 

 위와 같이 사전적으로 정의를 해야할 때 사용할 수 있다. 흔히 key-value 형태의 리스트를 작성해야 할 때 사용할 수 있다. 

 

<dl> 태그는 <ol>/<ul> 태그와 다르게 자식 태그로써 사용해야 하는 태그들이 조금 많다. 어느정도 구성이 갖추어져야 한다. 자식 태그로 올 수 있는 태그들은, <dt>,<dd>이다. <dl> 태그의 자식으로 오는 이 세 개의 태그들은 각자의 역할과 의미가 있다.

 

<dt> 태그는 정의하고자 하는 용어를 위한 태그이다. <dd>의 경우 용어에 대한 자세한 설명을 하는 항목들을 위한 태그이다. 위 두 개의 태그를 사용하여 <dl> 태그를 활용한 예시를 아래에 적어 놓았다.

 

<dl>
    <dt>
        수상 首相
    </dt>
    
    <dd>1.역사 고려 시대와 조선 시대의 조정 우두머리를 지칭하는 말.</dd>
    <dd>2.역사 조선 시대 의정부의 으뜸 벼슬. 정일품의 품계로 서정(庶政)을 총괄하는 최고의 지위이다.</dd>
    <dd>3.행정 내각의 우두머리. 의원 내각제에서는 다수당의 우두머리가 수상이 되는 것이 일반적이다.</dd>
</dl>

 

위와 같은 형태로 구성할 수 있다. 정의 리스트를 표현하는 <dl>태그 안에는 용어를 나타내는 <dt> 태그와, 용어에 대한 설명을 나타내는 <dd>태그로 이루어져 있다. 정의 리스트를 올바르게 사용하기 위해서는, 용어와 그에 대한 설명이 한 세트로 이루어져 있어야한다.

 

3. Tag <blockquote> / <q>

 

<blockquote>와 <q>는 문서 내 인용 표시를 위한 태그들이다. <blockquote>의 경우 인용문이 문단 수준일 경우 사용할 수 있으며, <q>는 한 문장 내에 끝나는 간단한 인용일 경우 사용된다. <blockquote>의 경우 인용출처까지 남길 수 있으므로 더욱 상세하다.

 

3-1. <blockquote>

 

문단 수준의 인용문을 표시할 때 사용한다. 아래의 예시와 같이 사용할 수 있다.

 

<h3>명언</h3>
<p>
    <blockquote>
        말은 파괴하거나 치유하는 힘을 갖는다.</br> 진실하고 친절한 말은 세상을 변화시킬 수 있다.</br></br>
        [붓다]
    </blockquote>
</p>

인용문이 되는 부분을 <blockquote>로 감싸준다. 위와 같이 작성하면 웹 브라우저에는 아래와 같이 표시된다. </br> 태그는 여분의 공백을 추가로 만들어주는 태그이다.

 

 

<blockquote>를 활용하여 위와 같이 인용문을 표시할 수 있다. 하지만 여기서 발화자인 '[붓다]'를 조금 강조하고 싶다면 <cite> 태그를 사용하면 된다. 아래와 같이 말이다.

 

<h3>명언</h3>
<p>
    <blockquote>
        말은 파괴하거나 치유하는 힘을 갖는다.</br> 진실하고 친절한 말은 세상을 변화시킬 수 있다.</br></br>
        <cite>[붓다]</cite>
    </blockquote>
</p>

웹 브라우저에는 아래와 같이 표시된다.

 

 

붓다 부분이 기울어졌다. <blockquote> 태그는 이 외에도, 인용문의 출처 사이트가 있을 경우, 속성값으로 출처의 URL을 추가해줄 수 있다. 그럴 땐 아래와 같이 사용하면 된다.

 

<blockquote cite = "URL">

인용문의 출처주소를 cite라는 속성의 값으로 주면 된다.

 

3-2. <q>

 

<q> 태그는 <blockquote>보다 간단하다. 한 문장으로 된 인용문을 표시하기 위해 사용되는데, 아래와 같이 사용할 수 있다.

 

<p>    
    월간 윤종신을 제작하던 와중, 그녀가 아직 특별한 소속사를 정해 활동하는 것이 아닌 상황을 보고 먼저 윤종신이 제안한 것이라고.
    박지윤 역시 본인을 한 명의 가수로 대우해 주는 것에 대해 <q>(미스틱89에 소속된 아티스트들과) 함께 음악을 할 수 있는 것은 행운이라 생각했다</q>며 소속사를 옮기게 된다. 
    윤종신 역시 <q>이렇게 매력있고 재능 넘치는 가수가 노래를 드문드문 부르는게 안타까웠다</q>며 그녀의 합류를 반가워 했다. 
    단순히 적만을 옮기는 것이 아니라 4월부터 레이블 공연에 참여하여 활동했을 정도. 
    그녀의 입장에서는 미스틱89 정도로 많은 숫자의 동료들이 있는 소속사는 10년만이라고 한다.
</p>

나무위키의 박지윤 설명을 복사해왔다. 위와 같이 인용문이 되는 부분은 <q> 태그로 별도로 감싸주었는데, 웹 브라우저에는 아래와 같이 표시된다.

 

<q> 태그로 감싼 부분을 보면 자동으로 " "처리가 되어있는 것을 알 수 있다. 이처럼, 인용문을 표시하기 위한 두 가지의 태그를 소개했는데, 각자의 쓰임새에 맞게 사용하면 가독성 좋은 HTML 문서를 작성할 수 있다.

 

 

오늘은 앵커와 리스트, 그리고 인용문을 위한 태그들에 대해 공부해보았다. 사소한 것이라고 생각할 수 있지만 이런 것들이 하나하나 모여 완벽을 이루는 것이 아니겠는가. 다음번에도 더욱 재미있는 태그들을 배우면 포스팅하도록 하겠다.

 

P. S 조잡한 글 읽어주셔서 감사합니다! 혹시나 틀린 정보가 있다면 과감한 지적(하지만 욕은 삼가해주시면 감사하겠습니다 ㅎㅎ) 부탁드립니다.