티스토리 뷰

나는 오늘도 공부한다/HTML&CSS

HTML 리스트 만들기 & 하이퍼링크

애드소프트 2014. 6. 22. 14:24
반응형

오늘 공부할 부분은 HTML의 리스트만들기와 하이퍼링크 이다. 일반적으로 대부분의 웹사이트에서 메뉴를 구성함에 있어 리스트를 사용한다. 또한 메뉴를 클릭하였을 경우, 새로운 페이지로 이동하는 기능 즉 하이퍼링크와 유사한 기능으로 첨부파일을 내려 받는 기능 또한 하이퍼링크의 일종이다.

리스트 만들기는 크게 두가지로 나뉜다. 번호가 존재하는 리스트 형태인 <ol>과 번호가 존재하지 않는 형태인 <ul>이다. 즉접 코드를 보면 이해하기 편하다.




 <!DOCTYPE html>
 <html>
 <head>
 <title>리스트 만들기 & 하이퍼링크 연결</title>
 </head>
 <body>
 <h2>리스트 만들기</h2><br />
 <h3>번호가 없는 리스트</h3>
 <ul>
 <li><a href="http://www.naver.com">네이버</a></li>
 <li><a href="http://www.daum.net">다음</a></li>
 </ul>
 <br />
 <h3>번호가 있는 리스트</h3>
 <ol>
 <li>네이버</li>
 <li>다음</li>
 </ol>
 </body>
 </html>

 위의 코드에서 <ul>~</ul>부분이 번호가 없는 리스트를 생성하고, <ol>~</ol>은 번호가 있는 리스트를 생성한다. 각각의 리스트 항목은 <li></li>를 활용하여 리스트를 생성해 주면된다.

다음으로 하이퍼링크이다. 하이퍼링크의 태그는 <a href = "하이퍼링크 주소"></a>이다. 항상 /를 이용하여 닫아주어야 하는 것을 까먹어서는 안된다. href에 파일의 경로를 지정하게 되면 해당 파일을 다운 받게 된다.

실제로 결과를 실행해보게 되면 하이퍼링크가 걸리게 되고 해당페이지로 이동하게 된다. 그렇다면 하이퍼링크를 새창으로 연결할 수는 없을까? 물론 가능하다.

바로 a태그 안에 target ="_blank"를 넣어 주면 된다. 현재 <a href="http://www.daum.net">다음</a> 다음으로 하이퍼링크가 걸려있는 상태이다. 이때, <a href="http://www.daum.net"target="_blank">다음</a> 주황색 글씨를 추가해줌으로써 새창으로 하이퍼링크를 연결할 수 있다.

반응형
저작자표시

'나는 오늘도 공부한다 > HTML&CSS' 카테고리의 다른 글

즐겨찾기/주소창 아이콘 적용하기(파비콘 적용하기)  (0) 2016.04.20
HTML 이미지 띄우기  (0) 2014.09.13
HTML & CSS 메뉴만들기  (7) 2014.09.12
HTML(H태그)+스타일태그  (0) 2014.06.22
HTML의 기본구조  (0) 2014.06.22
공유하기 링크
댓글