링크(link)와 이미지(image)를 빼고 웹을 이야기할 수 없을 거야.
이 세상의 거의 모든 웹문서들이 링크를 통해 다른 웹문서들과 꼬리에 꼬리를 물고 연결되어 있고, 홈페이지에 그림이 하나도 없다면 얼마나 황량하게 보일까? 두 가지를 배워 보자구.

▶ 링크(Link)

웹문서를 만드는 HTML(Hyper Text Markup Language)의 ‘하이퍼 텍스트’는 여러 개의 문서나 문장(Text)들이 서로 연결된 것을 뜻해.
네이버, 다음 같은 포털사이트를 보면 온통 링크로 뒤덮여 있어. 홈에는 제목과 메뉴만 보여 주고 원하는 곳을 클릭하면 바로 해당 사이트나 웹문서로 이동하잖아.
아마 이 링크가 없었다면 오늘 같은 인터넷 시대도 없었을 거야.

문서와 문서를 연결한다는 것은 꽤 복잡할 것 같지만 실제는 아주 간단해. <a> 태그 하나만 알면 되거든. 사용법은…
여기서 "연결할 웹문서"는 여러분이 만든 html 문서일 수도 있고 인터넷상의 다른 사이트 주소가 될 수도 있어.
(다른 사이트 주소라는 것이 곧 해당 주소에 있는 웹문서를 뜻하므로 사실 같은 말이야.)
역시 따라 하면서 확인해 볼 거야.

1. lesson.html 문서의 <div id="side">~</div> 사이의 “여기는 <em>사이드</em> 입니다.” 줄을 지우고 아래와 같이 변경해.

<a href="https://www.naver.com">네이버 홈피가기</a>
<a href="https://www.daum.net">다음 홈피가기</a>
<a href="./page1.html">표준이 중요한 이유</a>

위 두 개는 다른 사이트 주소를 정했고, 아래는 우리들이 학습에서 처음 만든 html 파일을 지정했어.
그런데 page1.html 파일을 지정할 때 파일명 경로에 ./ 라는 표시를 했지? 이것은 컴퓨터의 폴더 위치를 가리키는 표시야.
.(마침표 한 개)는 현재 폴더를 의미하고, ..(마침표 두 개)는 상위폴더를 뜻해.
그러므로 "./page1.html"이라는 뜻은 현재 문서인 lesson.html와 같은 폴더 안에 page1.html 파일이 있음을 뜻해.
물론 이렇게 같은 폴더 내에 파일들이 있을 때는 ./ 표시를 하지 않아도 되지만 이렇게 위치를 항상 표시해 주는 것은 아주 좋은 습관이야.
또 윈도우에서는 폴더 사이를 구분하는 기호로 ￦ 를 사용하는데 홈페이지에서는 / 를 사용해.
물론 여러분이 지금 연습하고 있는 윈도우 상에서는 <a href=".￦page1.html">와 같이 ￦로 표시해도 잘 작동하지만, 리눅스를 운영체제로 쓰는 대부분의 서버 컴퓨터는 / 를 폴더 간 구분자로 사용하므로 홈피를 만들 때는 / 를 사용하는 습관을 가지는 것이 좋아.

그리고 상위폴더를 뜻하는 [..]는 실제 홈페이지를 만들 때 아주 유용하게 사용돼.
복잡한 홈페이지는 폴더 하나에 모든 파일을 넣지 않고 기능별, 또는 메뉴별로 서브폴더를 만들어 파일들을 정리해 넣어 두거든.
그런데 서브폴더에서 상위폴더의 파일을 찾을 때 "../파일명"식으로 지정하면 입력도 쉽고 나중에 폴더의 이름이 바뀔 때도 그대로 작동하게 될 테니까.

2. layout.css에서 #content와 #side에 각각 아래 마진, 패딩 속성을 추가해.

상단과 간격을 조금 벌려서 보기 좋게 하기 위해서야. margin, padding은 위에서 배웠지?

margin-top: 10px;
padding: 5px;

2. 문서를 저장하고 브라우저에서 확인해 봐.

링크가 생성된 것을 확인할 수 있어.
[네이버 홈피가기] [다음 홈피가기] [표준이 중요한 이유] 또 각 부분을 클릭하면 해당 사이트나 문서로 브라우저가 이동하지?
그런데 이 <a> 링크는 인라인 태그여서 줄 바꿈이 없어서 보기가 좀 그렇네?
이전에 배운 리스트(li) 태그와 스타일을 이용하여 꾸며 보자구.

3. 다시 lesson.html 문서의 <div id="side">~</side> 내용을 아래와 같이 변경해.

<ul>
    <li><a href="https://www.naver.com">네이버 홈피가기</a></li>
    <li><a href="https://www.daum.net">다음 홈피가기</a></li>
    <li><a href="./page1.html">표준이 중요한 이유</a></li>
</ul>

4. style.css의 맨 아래에 다음 내용을 추가해.

a {
    color: purple;
    text-decoration: underline;
}

속성의 내용은 이름만 봐도 알겠지? 글자색은 보라색으로 하고 밑줄로 꾸미라는 뜻이야.
text-decoration:의 속성값으로는 아무것도 안 하는 none, 중간에 줄을 치는 line-through, 윗줄을 치는 overline, 깜빡이게 하는 blink 등이 있어.

그런데 일반 홈페이지를 보면 링크를 클릭해서 한 번 갔었던 곳은 글자색이 바뀌는 것을 볼 수 있어. 어떻게 할까?
이것 역시 CSS에서 제어할 수 있어. 즉, a 링크 속성을 방문 전과 방문 후로 나누는 것이지.

5. 조금 전 a를 아래와 같이 수정하고, 추가해.

a:link {
    color: purple;
    text-decoration: underline;
}
a:visited {
    color: green;
    text-decoration: none;
}

이렇게 수정하면 아직 링크를 클릭하지 않았던 문장은 a:link의 속성이 적용되고, 한 번 방문했던 곳의 속성은 a:visited 속성이 반영되어 보이게 될 거야. 아래 그림을 보면 마지막 링크에만 가보지 않은 것을 알 수 있어.

여기까지 그대로 따라했으면 화면은 아래 링크와 같을 거야.
http://yogibbs.kr/htmlDemo/lesson5.html


다음 학습 : 이미지
이전 학습 : 스팬(span)과 클래스(class)