#03 HTML 강좌 링크와 리스트 <a>,<li> 태그

안녕하세요 ! 대남이 입니다. 오늘은 링크와 리스트에 관련된 태그를 배워보도록 합니다.

링크관련 태그는 아주 자주쓰여서 중요하니 잘 숙지해두시면 많은 도움이되실 겁니다.

일단 링크에 관련된 태그를 배워보고 리스트에 관련된 태그를 배워보도록 하겠습니다.

---

1. 링크

링크는 하이퍼링크라고도 하며 다른 무서로 점프할 수 있는 단어나 이미지입니다. <a> 태그로 링크를 정의할 수 있는데,

a는 "anchor"의 약자입니다. 이 태그의 구조를 살펴보도록 하겠습니다.

기본구조는 이와같습니다. href는 가장 중요한 속성인데 목적지를 나타냅니다. 다른 사이트주소를 삽입하면 클릭하면

그 사이트로 이동하게됩니다. 추가정보에는 텍스트나 이미지를 삽입할 수 있고, 커서를 올리면 클릭할 수 있는 모양으로 변합니다.

이미지삽입법은 이후에 자세히 배워 보도록하겠습니다.

그러면 화면에서 링크는 기본적으로 생성되는 색상이있는데 이 디폴트값을 살펴 보도록하겠습니다.

1. 방문하지 않은 링크는 밑줄이 그어져 있고 청색이다.

2. 방문한 링크는 밑줄이 그어져 있고 보라색이다.

3. 활성 리크는 밑줄이 그어져 있고 빨간색이다.

그러면 <a> 태그의 예시를 보시겠습니다.

브라우저에는 이와같이 출력됩니다.

이렇게 생성됩니다. 클릭을 하게되면 이처럼 출력됩니다.

여기서 target은 링크가 클릭이 되었을 때 페이지가 열리는 위치를 결정하게 되는데, 

_blank 값은 새로운탭에서 페이지를 열게됩니다.

target 값들은 다음과 같습니다.

target	설명
_blank	새로우 윈도우에서 페이지를 연다.
_self	현재 윈도우에서 페이지를 연다.
_top	현재 윈도우에서 새 페이지를 적재하고 모든 프레임 취소

---

1-2. id 태그

이번에는 현재 페이지에서 특정 부분으로 이동하는 법을 배워보겠습니다. 이것도 <a>태그를 이용합니다.

이때 id 속성을 이용하여 HTML 안에 특정요소에 적용시킵니다.

예시를 보시겠습니다.

이와 같이 코딩하였습니다. p태그에 id를 적용시켰습니다. 그리고 a태그의 href속성에 #section1 이라고 p태그 id 속성을 입력합니다.

그러면 브라우저에는 이와같이 출력됩니다.

이와 같이 나오는데 링크를 클릭하게되면

이렇게 p태그로 이동하게 됩니다. 이처럼 a태그와 id속성을 이용하여 페이지내에서 이동이 가능하게됩니다.

번외로써, <a>태그를 이용하여 이메일링크나 다운로드링크도 생성할 수 있습니다.

---

2.리스트

리스트는 항목을 나열하기위해 사용 할 수 있는 태그입니다. 리스트태그는 크게 항목 번호가 있는 리스트와

없는 리스트롤 나눌 수 있습니다. 

2.1 번호 없는 리스트

번호 없는 리스트는 unordered lists로써 <ul>태그로 나타냅니다. 

각 리스트 항목은 <li> 태그로 시작합니다. 예시를 보시겠습니다.

이와 같이 코딩하면 다음과 같이 브라우저에 출력이 됩니다. 번호가 없는 상태로 출력됩니다.

---

2.2 번호 있는 리스트

번호 있는 리스트는 ordered list로써 <ol>태그로 나타냅니다.

예시를 보시겠습니다.

이처럼 ol 태그를 사용하면 다음 처럼 번호가 있는 리스트가 출력됩니다.

상황에 따라 리스트를 작성하실 때 편하신걸 사용하시면 됩니다.

다음으로 마지막으로 정의 리스트를 배워보도록 하겠습니다.

---

2.3 정의 리스트

정의 리스트는 definition list로써 항목들과 함께 항목의 정의가 표시되는 리스트입니다.

정의 리스트는 <dl> 태그로 생성할 수 있고, <dt> 태그는 항목을 나타내며 <dd> 태그는 그 항목에 대한 설명을 나타냅니다.

예시 코딩을 보시겠습니다.

dl태그로 정의리스트를 생성하고 이처럼 dt태그로 항목을 나타내고 dd태그로 항목에대한 설명을 적어주시면 됩니다.

그럼 다음과 같이 브라우저에 표시가 됩니다.

-

오늘은 여기까지 링크와 리스트에 관한 태그를 학습해보았습니다.

다음번에는 이미지 삽입에 대하여 배워 보도록하겠습니다. 감사합니다!