HTML 리스트와 링크 만드는 법

안녕하세요 위키드스마트입니다. 리스트와 링크 만드는 법을 알아보겠습니다.

이전 글이 궁금하신 분들은 여기를 클릭하시면 됩니다.

—> 이전 글보기 : html 텍스트 표기 방법​

리스트

리스트는 항목을 나열하는데 사용됩니다.

리스트는 순서가 있는 리스트와 없는 리스트로 나눌 수 있습니다.

순서가 있는 리스트를 만들고 싶을 땐, <ol>....</ol> 로,

순서가 없는 리스트를 만들고 싶을 땐, <ul> ... </ul> 로, 만드시면 됩니다.

참고로, ol 은 ordered list, ul 은 unordered list 를 뜻합니다.



그럼, 순서가 있는 리스트를 만들어 볼까요?

<ol> </ol> 은 이제 순서가 있는 리스트를 만든다는 선언과 같은 것이니, 그 안에 리스트 항목을 나열할 때에는 <li> ... </li> 를 써서 작성하셔야 합니다.

예제를 보시죠.
​

자, 오른쪽 결과를 보시면 번호가 순서대로 생겼죠?

같은 내용은 <ul> 태그를 쓰면 어떻게 될까요? 순서가 없는 리스트가 생기겠죠?
결과 보시죠.
​

이렇게, 그냥 점으로 표기된 리스트게 생겼습니다. 리스트 만들기 참 쉽죠?


​링크
사실 html의 꽃은 바로 링크가 할 수 있습니다. 문서와 문서들을 연결시켜주기 때문입니다.
이 링크가 없던 시절을 상상해보세요. 문서간을 서로 쉽게 연결할 수 없다면, 인터넷을 왜 쓰는거죠?
문서끼리 서로 연결함으로써, 모든 정보가 연결되어, 인터넷이 쓸모있어지고, 우리는 무한한 정보를
굉장히 쉽게 접할 수 있게 된 것입니다.

서두가 길었네요.

하이퍼링크(또는 그냥 링크)는 <a> 를 사용합니다. a는 anchor의 약자입니다.
<a> 링크는 여러 속성 중 가장 중요한 속성인 href를 가지고 있습니다. 바로 이 href다음에 웹 페이지 주소를 적는 것이지요.

예를 들면,
<a href=“http://www.google.com” target=“_blank”>구글로 접속​</a> 이라고 적으면,
구글로 넘어갑니다. 한번 위의 구글의 접속을 클릭해보시죠. 제가 링크를 걸어놨습니다.

아 참고로, 여기서 target 속성은 값을 4가지를 가지고 있는데요,
_blank 는 새로운 페이지에서 열라는 뜻이고,
_self 는 현재 페이지에서 열라는 뜻이고,
_parent 는 부모 프레임에서 페이지를 열라는 뜻이고,
_top 은 현재 페이지에서 열고 모든 프레임을 취소하라는 뜻입니다.

_self가 디폴트값이기 때문에 여러분이 링크걸 때 저처럼 target속성을 별도로 명시안해주면, 클릭하는 즉시, 그냥 현재 화면에서 페이지가 열리게 됩니다.

id 속성도 링크에서 사용되는데요, 현재 페이지 내에서 다른 위치로 이동시킬 때 씁니다.
예시를 보면 한방에 이해되실 겁니다.
​

자 이해되시죠?

참 쉽죠? 도움이 되셨길 바라며,
다음 글에서는 이미지 태그에 대해서 알아보도록 하겠습니다.

그럼 빠이~!