목록과 링크

🎯 학습 목표

이 강을 마치면 여러분은 여러 항목을 목록으로 깔끔하게 나열하고, 링크를 만들어 다른 페이지로 이동할 수 있게 됩니다. 지난 강에서 제목과 문단으로 글의 뼈대를 만들었다면, 이번 강은 페이지에 구조(목록)와 연결(링크)을 더하는 중요한 단계입니다. 특히 링크는 여러 페이지를 이어 주는, 웹(Web, 거미줄)이라는 이름의 핵심입니다.

구체적으로는 세 가지를 배웁니다. 첫째, 순서 없는 목록 ul과 순서 있는 목록 ol, 그리고 항목 li를 배웁니다. 둘째, 링크를 만드는 a 태그와 href를 익힙니다. 셋째, 내부·외부 링크와 새 탭으로 여는 방법을 살펴봅니다.

📋 순서 없는 목록 — ul과 li

이 섹션에서는 점(•)으로 표시되는 순서 없는 목록을 살펴보겠습니다.

장보기 목록이나 준비물처럼, 순서는 중요하지 않고 항목을 나열하기만 하면 될 때가 있습니다. 이럴 때 쓰는 것이 순서 없는 목록(unordered list), 즉 <ul> 태그입니다. 목록 전체를 <ul>로 감싸고, 그 안의 각 항목을 <li>(list item)로 하나씩 적습니다.

<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>딸기</li>
</ul>

브라우저로 열어 보면 각 항목 앞에 작은 점(•)이 붙어 세로로 나열됩니다. 구조를 보면, 바깥의 <ul>이 '목록이라는 상자'이고 그 안의 여러 <li>가 '상자 안의 항목들'입니다. 이렇게 태그 안에 다른 태그가 들어가는 것을 중첩(nesting)이라 하며, 이때 안쪽 태그는 보기 좋게 들여쓰기해 주는 것이 좋은 습관입니다. 들여쓰기는 화면에 영향을 주지는 않지만, 코드의 구조를 한눈에 파악하게 해 줍니다.

🔢 순서 있는 목록 — ol

이 섹션에서는 번호가 매겨지는 순서 있는 목록을 살펴보겠습니다.

요리 순서나 순위처럼 차례가 중요한 목록도 있습니다. 이럴 때는 순서 있는 목록(ordered list), 즉 <ol> 태그를 씁니다. 사용법은 <ul>과 똑같이 안에 <li>를 넣지만, 바깥 태그만 <ol>로 바꾸면 됩니다.

<ol>
  <li>재료를 준비한다</li>
  <li>물을 끓인다</li>
  <li>면을 넣는다</li>
</ol>

이번에는 각 항목 앞에 점 대신 1, 2, 3…이라는 번호가 자동으로 붙습니다. 우리가 번호를 직접 쓰지 않아도 브라우저가 순서대로 매겨 주는 것이 편리한 점입니다. 항목의 순서를 바꾸면 번호도 알아서 다시 매겨집니다.

정리하면, 항목을 고를 때 순서가 의미 있으면 <ol>, 순서가 상관없으면 <ul>을 씁니다. 둘 다 항목은 <li>로 적는다는 점은 같습니다. 이 구분을 내용의 성격에 맞게 하는 것이 올바른 사용법입니다.

🔗 링크 — a 태그와 href

이 섹션에서는 이 강의 핵심, 웹을 웹이게 만드는 링크를 살펴보겠습니다.

웹의 가장 큰 특징은 페이지에서 페이지로 이동할 수 있다는 것입니다. 글자를 누르면 다른 페이지로 넘어가는 이 하이퍼링크를 만드는 것이 <a> 태그입니다. a는 'anchor(닻)'의 첫 글자입니다. 아래 코드를 보세요.

<a href="https://www.google.com">구글로 이동</a>

이 코드는 '구글로 이동'이라는 파란 밑줄 글자를 만들고, 그것을 누르면 구글 사이트로 이동합니다. 여기서 새로운 개념이 등장합니다. 바로 href="..." 부분입니다. 이렇게 태그에 추가 정보를 붙여 주는 것을 속성(attribute)이라고 합니다. 속성은 '이름="값"'의 형태로 쓰며, 여는 태그 안에 넣습니다.

<a> 태그에서 가장 중요한 속성이 href입니다. href는 '어디로 이동할지', 즉 목적지 주소를 담습니다. 위 코드에서는 href의 값이 구글 주소이므로, 링크를 누르면 그 주소로 이동하는 것입니다. 그리고 <a>와 </a> 사이에 넣은 글자('구글로 이동')가 화면에 보이는 링크 텍스트가 됩니다. 즉 '보이는 글자'와 '이동할 주소'가 분리되어 있는 것입니다.

🌐 내부 링크와 외부 링크, 새 탭 열기

이 섹션에서는 링크의 여러 활용법을 살펴보겠습니다.

링크의 목적지는 크게 두 종류입니다. 첫째는 외부 링크로, 다른 웹사이트로 이동하는 것입니다. 이때는 위 예시처럼 https://로 시작하는 전체 주소를 href에 적습니다. 둘째는 내부 링크로, 내가 만든 다른 페이지로 이동하는 것입니다. 예를 들어 같은 폴더에 about.html이라는 파일이 있다면 다음처럼 파일 이름만 적어 연결할 수 있습니다.

<a href="about.html">소개 페이지로</a>

이렇게 같은 사이트 안의 파일 이름(또는 경로)을 적는 것을 상대 경로라 하며, 여러 페이지로 이루어진 웹사이트를 만들 때 이 방식으로 페이지들을 서로 잇습니다.

한 가지 유용한 속성을 더 배워 봅시다. 링크를 누를 때 현재 페이지를 떠나지 않고 새 탭에서 열고 싶을 때가 있습니다. 이럴 때는 target="_blank" 속성을 추가합니다.

<a href="https://www.google.com" target="_blank">새 탭에서 구글 열기</a>

이렇게 하면 링크가 새로운 탭에서 열려, 원래 보던 페이지는 그대로 남습니다. 외부 사이트로 연결할 때 자주 쓰는 방법입니다. 하나의 태그에 href와 target처럼 여러 속성을 함께 쓸 수 있다는 것도 이 예시에서 확인할 수 있습니다. 속성들은 공백으로 구분해 나란히 적습니다.

⚠️ 자주 하는 실수

이 섹션에서는 목록과 링크를 다룰 때 흔한 실수를 정리하겠습니다.

첫 번째, li를 ul/ol 밖에 두는 것입니다. <li>는 반드시 <ul>이나 <ol> 안에 들어가야 합니다. 목록 상자 없이 항목만 덜렁 쓰면 올바른 구조가 아닙니다. 항상 '상자(ul/ol) 안에 항목(li)'의 짜임을 지키세요.

두 번째, href를 빠뜨리는 것입니다. <a> 태그에 href가 없으면 이동할 곳이 없어 링크로서 제 기능을 못 합니다. 링크를 만들 때는 목적지 주소를 href에 반드시 넣어야 합니다.

세 번째, 속성의 따옴표를 빠뜨리는 것입니다. 속성 값은 href="about.html"처럼 큰따옴표로 감싸는 것이 표준입니다. 따옴표를 빠뜨리거나 짝을 맞추지 않으면 오류가 생길 수 있으니 주의하세요.

📝 핵심 요약

이번 강에서는 목록과 링크를 배웠습니다.

• ul / ol / li — 순서 없는 목록은 ul, 순서 있는 목록은 ol이며, 항목은 모두 li로 적고 목록 태그 안에 중첩합니다.
• a 태그와 href — 링크는 a 태그로 만들고, 이동할 주소는 href 속성에 담습니다. 태그 사이의 글자가 보이는 링크 텍스트입니다.
• 속성 — '이름="값"' 형태로 태그에 추가 정보를 붙이며, 여러 개를 공백으로 구분해 함께 쓸 수 있습니다.
• 내부·외부 링크 — 외부는 https:// 전체 주소, 내부는 파일 이름(상대 경로)으로 연결하며, target="_blank"로 새 탭에서 열 수 있습니다.

이제 페이지에 목록과 링크를 넣을 수 있게 되었습니다. 다음 강에서는 페이지를 훨씬 풍부하게 만들어 줄 이미지와 미디어를 배워, 사진과 영상을 페이지에 넣는 법을 익혀 보겠습니다. 다음 강 「이미지와 미디어」에서 이어가겠습니다.

📚 참고 자료

• <ul> 순서 없는 목록 — MDN Web Docs
• <ol> 순서 있는 목록 — MDN Web Docs
• <a> 앵커(링크) 요소와 href — MDN Web Docs