본문 바로가기
TIL ( Today I Learn ! )/HTML

HTML 코딩하기! ③ 텍스트와 하이퍼링크

코딩하는 백수몬 2019. 12. 30. 18:20

저번 시간에는 기능 없이 가독성을 높이기 위해 body 부분에 사용하는 '시맨틱 태그'를 배워보았습니다!

간단히 복습 겸 정리해보자면,

상단을 표시하는 header, 중간을 표시하는 section, 하단을 표시하는 footer

실제 콘텐츠가 들어가는 article, 기타 추가 내용을 넣는 사이드 부분 aside

이 있었습니다!

이 시맨틱 태그로 구역을 나눴다면 실제로 내용도 넣어보아야겠지요?

그래서 오늘부터는 실제 콘텐츠를 넣을 때 사용하는 태그들을 배워보겠습니다!

일부 태그는 이전 수업에서 이미 배워 본 태그입니다~

텍스트 태그

일부 태그는 이전에 이미 배운 내용입니다!

1. p 태그

p 태그는 이전에 배웠던 태그로 일반 텍스트를 보여주는 태그입니다.

p 태그를 사용하면 텍스트 단락을 만들고, br 태그를 사용하지 않아도 자동으로 텍스트 앞뒤에 줄바꿈이 됩니다.

2. span 태그

span 태그는 줄바꿈 없이 텍스트를 묶어주는 태그입니다.

주로 텍스트 중 일부에만 디자인을 주고 싶을 때 사용합니다.

3. ul & li 태그

ul은 unordered list의 약자로 순서가 없는 리스트가 만들어지는 태그입니다.

ul 안에 li 태그를 넣어 각 항목을 씁니다.

4번과 비교해봅니다.

4. ol & li 태그

ol은 ordered list의 약자로 순서가 있는 리스트가 만들어지는 태그입니다.

ul과 마찬가지로 ol 안에 li 태그를 넣어 각 항목을 씁니다.

이 둘을 사용한 아래 코드를 한번 실행해봅니다.

<코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>텍스트 태그 공부</h1>
    <p>먹고싶은 과일!</p>
    <ul>

        <li>사과</li>
        <li>바나나</li>
        <li>수박</li>
    </ul>

    <p>라면 끓이는 법!</p>
    <ol>
        <li>물 550ml를 담는다.</li>
        <li>물이 끓으면 라면을 넣는다.</li>
        <li>맛있게 먹는다.</li>
    </ol>
</body>
</html>

<실행화면>

image

5. 표

1) 표 만들기

표를 만들기 위해서는 아래 3 가지 태그를 사용합니다.

  • table 태그 : 표 전체
  • tr 태그 : 열, 가로 한 줄
  • td 태그 : 셀, 표의 한 칸

표는 table안에 tr을 쓰고, tr 안에 td를 써서 각 셀을 만드는 방식으로 만듭니다.

실제로 표를 만들어 봅시다!

<코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- table 태그에 border를 넣어 틀의 굵기를 설정합니다. -->
    <table border="2">
        <!-- 1 번째 줄 -->
        <tr>
            <td>메뉴명</td>
            <td>가격</td>
            <td>커피 여부</td>
        </tr>

        <!-- 2 번째 줄 -->
        <tr>
            <td>아메리카노</td>
            <td>3000원</td>
            <td>커피</td>
        </tr>

        <!-- 3 번째 줄 -->
        <tr>
            <td>카페라떼</td>
            <td>4000원</td>
            <td>커피</td>
        </tr>

        <!-- 4 번째 줄 -->
        <tr>
            <td>핫초코</td>
            <td>4000원</td>
            <td>no 커피</td>
        </tr>

        <!-- 4 번째 줄 -->
        <tr>
            <td>유자차</td>
            <td>4000원</td>
            <td>no 커피</td>
        </tr>

        <!-- 5 번째 줄 -->
        <tr>
            <td>마지막 주문 시간 : 21시</td>
        </tr>
    </table>
</body>
</html>

<실행화면>

image

####     2) 제목 셀 만들기

표의 첫 줄은 보통 각 항목이 어떤 것인지 알려주는 제목 부분이지요?

그래서 이 제목 부분을 만들 때 td 대신 th로 만들면 table header이란 의미가 되어서

굵은 글씨 & 가운데 정렬이 자동으로 됩니다.

3) 셀 병합

td 나 th 태그에서 병합 속성을 사용하면 셀을 병합시킬 수 있습니다.

  • 가로 병합 : colspan = '합친 개수' ex)
  • 세로 병합 : rowspan = '합친 개수' ex)

<코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- table 태그에 border를 넣어 틀의 굵기를 설정합니다. -->
    <table border="2">
        <!-- 1 번째 줄 -->
        <tr>
            <th>메뉴명</th>
            <th>가격</th>
            <th>커피 여부</th>
        </tr>

        <!-- 2 번째 줄 -->
        <tr>
            <td>아메리카노</td>
            <td>3000원</td>
            <td rowspan="2">커피</td>
        </tr>

        <!-- 3 번째 줄 -->
        <tr>
            <td>카페라떼</td>
            <td>4000원</td>
            <!-- 셀 병합했기에 이 곳 내용은 지움 -->
        </tr>

        <!-- 4 번째 줄 -->
        <tr>
            <td>핫초코</td>
            <td>4000원</td>
            <td rowspan="2">no 커피</td>
        </tr>

        <!-- 4 번째 줄 -->
        <tr>
            <td>유자차</td>
            <td>4000원</td>
            <!-- 셀 병합했기에 이 곳 내용은 지움 -->
        </tr>

        <!-- 5 번째 줄 -->
        <tr>
            <td colspan="3">마지막 주문 시간 : 21시</td>
        </tr>
    </table>
</body>
</html>

<실행화면>

image

5) 표 제목 달기

table 태그 안에 caption을 넣으면 표의 제목을 달 수 있습니다.

마지막으로 표의 제목을 달아봅시다!

아래 코드와 같이 table과 1 번째 줄 사이에 caption을 써주면 됩니다.

<코드>

<table border="2">
        <caption>카페 메뉴판</caption>
        <!-- 1 번째 줄 -->
        <tr>
            <th>메뉴명</th>
            <th>가격</th>
            <th>커피 여부</th>
        </tr>

<실행화면>

image

여기까지 텍스트 태그에 대해 배워보았습니다!

여기 나온 것이 텍스트 태그의 전부는 아닙니다.

이 외에도 다양한 태그가 있고, 저는 그 중 일부를 소개한 것입니다.

하지만 이 태그들을 이해하고 사용하실 수 있다면, 다른 태그는 인터넷에 검색해서 바로 사용 가능 하실겁니다!

그러면 이번에는 하이퍼링크 태그를 배워봅시다.

하이퍼링크 태그

일부는 이전에 이미 배운 내용입니다!

하이퍼링크란? 다른 페이지나 사이트로 연결해주는 링크로,

이전에 배운 a 태그를 이용해 하이퍼링크를 만듭니다.

1. a 태그

a 태그는 하이퍼링크를 만드는 태그로 아래와 같이 씁니다.

<사용형식>

<a href="연결할 문서나 사이트 경로">누를 대상</a>

여기서 누를 대상은 텍스트 뿐만 아니라 이미지도 가능합니다.

그럼 이제 이 a 태그를 쓸 때 알아야 할 것과 몇 가지 속성을 알아봅시다!

1) 절대 경로 vs 상대 경로

일반적으로 우리가 말 할 때 경로란 어디로 갈 지, 목적지가 어디에 있는지를 이야기합니다.

컴퓨터에서도 마찬가지입니다.

컴퓨터에서 경로란, 내가 원하는 파일, 폴더, 문서, 사이트 등 목적지가 어디에 있는지, 위치를 이야기합니다.

바탕화면에 아무 폴더 혹은 파일을 선택해서 마우스 오른쪽 버튼을 누르고 속성을 봐보면 일반탭에 '위치' 라는 것이 나옵니다.

이게 바로 선택한 대상의 경로입니다.

또한 사이트의 경우 https://www.naver.com/ 와 같이 주소창에 쓰는 것이 해당 사이트의 경로입니다.

a 태그에서는 href = " " 에서 " " 안에 쓰는 내용이 경로인 것입니다.

그런데 이 경로에는 2 가지 종류가 있습니다.

바로 절대 경로와 상대 경로입니다.

어렵게 들리실 수도 있지만 이는 우리가 일상에서도 사용하는 개념입니다.

2가지 상황을 봐봅시다.

첫 번째는 길을 가는데 누군가가 카페가 어디있는지 물어보는 상황입니다.

그러면 아마 여러분은 이렇게 설명할 겁니다.

"오른쪽으로 쭉 가시면 큰 마트가 나오고, 그 옆 건물 2층에 있어요!"

바로 내 위치를 기준으로 어느 쪽에 있는지를 설명하는 방식이지요.

두 번째 상황은 택배를 시키는 상황입니다.

그러면 여러분은 아래와 같이 주소를 입력할 겁니다.

"서울 마포구 동교로46길 42-20 2층 룸스토리"

이 주소는 택배기사님이 어디에 계시든 상관없이 고정된 주소입니다.

이처럼 내 위치, 경로를 이야기 할 때는 현재 내 위치를 기준으로 이야기 하는 '상대 경로'와 현 위치에 상관 없이 모두에게 똑같이 적용되는 '절대 경로' 2가지 방법이 있습니다.

여러분이 아까 바탕화면의 아이콘을 눌러 설정을 통해 본 위치는 내 컴퓨터에 있는 폴더 A 안에 있는 b 파일, 이런 식으로 나오기에 상대 경로이고,

인터넷 주소창에 치는 주소는 누가 입력해도 같은 사이트로 가기에 절대 경로입니다.

이 내용을 알아야 하는 이유는 다른 사람들도 보는 문서를 작성 할 때에는 반드시 절대 경로로 써야 하기 때문입니다.

그 사람의 현 위치, 현재 상황은 나와 다르기에 상대 경로로 쓰면 해당 위치로 갈 수가 없습니다.

이 글의 이미지들도 단순히 복사 붙여넣기를 하면

내 컴퓨터 바탕화면에 '블로그' 폴더 안에 'html' 폴더안에 있는 사진 1

와 같이 상대 경로로 입력됩니다.

그러면 당연히 제 컴퓨터가 아니고, '블로그' 나 'html' 폴더가 없는 여러분은 이 사진을 볼 수 없습니다.

그렇지만 블로그 기능인 '사진 추가'를 사용하면 이걸 절대 경로로 바꿔주어서

다른 사람들도 볼 수 있게 만들어 주는 것이지요!

그렇기에 여러분도 꼭 사이트에 링크를 만들 때는 절대 경로를 사용하여야 합니다!

2) 속성

  • 새 창으로 열기 : 링크를 눌렀을 때 기존 창이 아니라 새로운 창으로 열리도록 하려면 속성 target = "blank"를 사용하면 됩니다!

<예시>

<a href="https://www.naver.com/" target="_blank"> 네이버 </a>
  • 링크를 설명하는 툴팁 : 링크 위에 마우스 포인터를 올리면 나오는 설명으로 title="설명"을 사용하면 됩니다!

<예시>

<a href="https://www.naver.com/" title="네이버로 이동합니다." target="_blank"> 네이버 </a>

<실행화면>

image

3) 앵커로 이용하기

웹 문서가 너무 길 경우 문서 안에 팻말을 달아놓고 그 위치로 한번에 이동하는 기능을 앵커 (anchor)라고 합니다.

다른 페이지로 넘어가는 것이 아니라 해당 화면의 다른 위치로 이동하는 것이지요.

태그에는 id라는 속성으로 고유 이름표를 달 수 있고, 앵커는 이 id를 이용합니다.

이동을 원하는 위치에 id를 해놓고 a 태그의 href 위치에 그 id를 써서, 그 id가 있는 같은 페이지의 다른 위치로 이동하는 것이지요!

<코드>

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>HTML5 연습</title>
</head>
<body id="top">
    <!-- id를 쓸 때는 #id명 형식을 사용합니다. -->
    <a href="#bottom">최하단으로 이동</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a id="bottom" href="#top">최상단으로 이동</a>
</body>
</html>

br 태그는 단순히 웹 문서를 길게 만들기 위함입니다.

코드 실행 후 텍스트를 눌러보면 작동하는 모습을 볼 수 있습니다!

예제

이전에 만든 고양이 사이트에 시맨틱 태그와 ul, ol, a 태그의 속성을 추가해보자

 

<예시>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>고양이 집에 오신 것을 환영합니다!</h1>
    <p>안녕하세요! <i>이곳은 고양이를 사랑하는 사람들이 모여있는 고양이 집입니다.</i><br>다양한 고양이 사진을 모아놓았습니다.<br>고양이 사진을 누르면 고양이 사진을 올린 집사의 사이트로 이동하게 됩니다.</p>
    <ul>
        <li><a href="#photo">사진모음</a></li>
        <li><a href="#shop">쇼핑몰</a></li>
    </ul>
    </header>

    <section>
        <section id="photo">
            <h2>1. 고양이 사진모음</h2>
            <ol>
                <li>
                    <article>
                        <p><b>아기 고양이</b></p>
                        <a href="https://mypetlife.co.kr/47410/">
                            <img src="data:image/jpeg;base64,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">
                        </a>
                    </article>
                </li>
                <li>
                    <article>
                        <p><b>줄무늬 고양이</b></p>
                        <a href="https://www.hankookilbo.com/News/Read/201904291390027161">
                            <img src="data:image/jpeg;base64,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">
                        </a>
                    </article>
                </li>
                <li>
                    <article>
                        <p><b>검정 고양이</b></p>
                        <a href="http://www.neocitizen.co.kr/index.php?document_srl=10807&mid=politician&listStyle=viewer">
                            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsFlnVHO7pzFIdfuHoA-1N7gmqrfspXiJRPk0VWf77Y_YPw0Fn&s">
                        </a>
                    </article>
                </li>
            </ol>
        </section>

        <section id="shop">
            <h2>2. 고양이 물품 판매 사이트</h2>
            <a href="https://www.mamacat.co.kr/?n_media=27758&n_query=%EA%B3%A0%EC%96%91%EC%9D%B4%EB%AC%BC%ED%92%88&n_rank=4&n_ad_group=grp-a001-01-000000000106998&n_ad=nad-a001-01-000000030523194&n_keyword_id=nkw-a001-01-000000013510094&n_keyword=%EA%B3%A0%EC%96%91%EC%9D%B4%EB%AC%BC%ED%92%88&n_campaign_type=1&NaPm=ct%3Dk4b7p4p4%7Cci%3D0za0000P3tDrM5yM%5F0Xc%7Ctr%3Dsa%7Chk%3Ddb56524b0ee1cb137b3e8e06d22d108bb30819f3" target="_blank" title="클릭하면 고양이 쇼핑몰로 이동합니다.">고양이용품 쇼핑몰, 마마켓</a>
            <h6>고양이 물품을 구매하시고 싶으시면? 클릭!</h6>
        </section>

    </section>

    <footer>
        <h6>문의사항</h6>
        <h6>emailAddress@gmail.com / 010-0000-0000</h6>
    </footer>

</body>
</html>

 

'TIL ( Today I Learn ! ) > HTML' 카테고리의 다른 글

HTML 코딩하기! ② 시맨틱태그  (0) 2019.12.23
HTML 코딩하기! ① 처음 만드는 HTML 문서  (0) 2019.12.19
HTML을 시작해보자!  (0) 2019.12.18
HTML이란?  (0) 2019.12.12

'TIL ( Today I Learn ! )/HTML' Related Articles

티스토리툴바