HTML

HTML-lesson03(책갈피)

dmsthf 2022. 6. 16. 13:25

HTML-책갈피 사용하기

 

하이퍼링크:<a>

  • a요소는 텍스트나 이미지 콘텐츠에 링크를 설정할 때 사용
  • 인라인 요소
  • a요소의 href속성값에 #id속성값을 지정하면 id속성으로 지정된 문서 내 특정 위치로 이동

 

요소에 이름 정하기

  • 아이디(id)
  • 클래스(class)

ID(아이디)

  • 중요한 곳에 붙인다.
  • #

Class(클래스)

  • 여러곳에 같은 이름 사용할 때 쓰인다.
  • 덜 중요한 곳
  • #

책갈피 사용

1. 같은 페이지에서 연결할 때

-원하는 곳에 이름 지정(id넣기)

-href속성에 아이디 이름 지정

 

http://file:///C:/%EC%9D%80%EC%86%94%20html/lesson02/link/link01/index.html#top

 

위의 파일을 열어보면 독서진흥시책에 대한 정보가 나옵니다. 

하이퍼링크가 걸려있는 목차와 top을 클릭하면 페이지가 이동합니다. 

 

위 파일처럼 HTML코드를 짜려면 어떻게 해야할까요?

먼저 목록에서 순서형 목록을 사용해야합니다. 다음 페이지를 이동시킬 곳에 id를 지정하면 됩니다.

같이 한번 해보겠습니다.

 

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>독서진층시책</title>
</head>

<body>
  <h1 id="top">목록</h1>
  <ul>
    <li><a href="#data1">1. 독서진흥시책의 중요성</a></li>
    <li><a href="#data2">2. 문화소외계층의 독서환경</li>
  </ul>

  <h2 id='data1'> 1. 독서진흥시책의 중요성</a></h2>
  <p>2005년 「도서관 및 독서진흥법」 전면개정 추진으로 2006년 「도서관법」과 분리하여 「독서문화진흥법」이 제정되었고, 2007년 4월 5일부터 시행되었다. 「독서문화진흥법」제정 이전까지는 독서진흥을 위한 법적•제도적 뒷받침이 미약했기 때문에 독서활동은 별도의 정책적 지원이 필요한 분야로 인식되지 못하였다. 하지만 21세기 지식정보화시대에서는 창의력과 상상력의 원천이 되는 독서의 중요성이 날로</p>
  <p>또한 출판산업 발전에 새로운 기반을 조성할 「출판문화산업진흥법」도 6월 20일 국회 본회의를 통과한 후 7월 19일 법률로 공포되었다. 이 법률 또한 기존의「출판 및 인쇄진흥법」을 전면개정하면서 「출판문화산업진흥법」과 「인쇄문화산업진흥법」으로 각각 분리하여 제정한 것으로 2008년 1월 20일 법률이 시행되면 출판과 인쇄부문이 개별적 차원에서 발전할 수 있는 법적 기반을 마련하게 되었다. </p>
  <p>2005년 「도서관 및 독서진흥법」 전면개정 추진으로 2006년 「도서관법」과 분리하여 「독서문화진흥법」이 제정되었고, 2007년 4월 5일부터 시행되었다. 「독서문화진흥법」제정 이전까지는 독서진흥을 위한 법적•제도적 뒷받침이 미약했기 때문에 독서활동은 별도의 정책적 지원이 필요한 분야로 인식되지 못하였다. 하지만 21세기 지식정보화시대에서는 창의력과 상상력의 원천이 되는 독서의 중요성이 날로</p>
  <p>또한 출판산업 발전에 새로운 기반을 조성할 「출판문화산업진흥법」도 6월 20일 국회 본회의를 통과한 후 7월 19일 법률로 공포되었다. 이 법률 또한 기존의「출판 및 인쇄진흥법」을 전면개정하면서 「출판문화산업진흥법」과 「인쇄문화산업진흥법」으로 각각 분리하여 제정한 것으로 2008년 1월 20일 법률이 시행되면 출판과 인쇄부문이 개별적 차원에서 발전할 수 있는 법적 기반을 마련하게 되었다. </p>
  <a href="#top">top</a>

  <h2 id='data2'>2. 문화소외계층의 독서환경</h2>

  <p>급격한 사회환경 및 정보환경의 변화에 따라 이용자의 요구의 증대로 도서관서비스는 크게 향상되고 있으나 아직도 대부분의 도서관에서 장애인, 고령자 등 독서장애인과 소외계층에 대한 이용서비스 수준은 크게 부족한 실정이다. 최근 시행된 「도서관법」에서 정보소외계층에 대한 서비스 및 국립장애인도서관지원센터의 설립 등에 관한 사항이 마련되어 있어 앞으로 장애인을 포함한 지식과 정보, 문화와 교육 부문에서의 소외계층에 대한 도서관서비스를 강화해
    갈 수 있는 법적 기반을 마련했다. 앞으로 이러한 기반을 잘 활용해 장애인 등 문화소외계층을 위한 독서기반시설의 확충 및 개선, 다양한 도서관 및 독서문화프로그램을 개발∙보급, 체계적이고 전문적 도서관 이용서비스 제공을 통해 일반인과의 격차를 줄이는 것이 시급하다. 현재 대부분의 도서관은 장애인이 이용하기에는 불편한 실정이어서 장애인들이 필요한 자료를 거주지 내 가까운 도서관에서 편리하고 충분하게 이용할 수 있도록 기반시설의 확충이
    필요하다. </p>
  <p>급격한 사회환경 및 정보환경의 변화에 따라 이용자의 요구의 증대로 도서관서비스는 크게 향상되고 있으나 아직도 대부분의 도서관에서 장애인, 고령자 등 독서장애인과 소외계층에 대한 이용서비스 수준은 크게 부족한 실정이다. 최근 시행된 「도서관법」에서 정보소외계층에 대한 서비스 및 국립장애인도서관지원센터의 설립 등에 관한 사항이 마련되어 있어 앞으로 장애인을 포함한 지식과 정보, 문화와 교육 부문에서의 소외계층에 대한 도서관서비스를 강화해
    갈 수 있는 법적 기반을 마련했다. 앞으로 이러한 기반을 잘 활용해 장애인 등 문화소외계층을 위한 독서기반시설의 확충 및 개선, 다양한 도서관 및 독서문화프로그램을 개발∙보급, 체계적이고 전문적 도서관 이용서비스 제공을 통해 일반인과의 격차를 줄이는 것이 시급하다. 현재 대부분의 도서관은 장애인이 이용하기에는 불편한 실정이어서 장애인들이 필요한 자료를 거주지 내 가까운 도서관에서 편리하고 충분하게 이용할 수 있도록 기반시설의 확충이
    필요하다. </p>
    <a href="#top">top</a>

</body>
</html>

위 코드소스처럼 <h1>의 목록과 <h2>의 소제목 안에 id를 넣는다면 목록과 소제목으로 페이지를 이동시킬 수 있습니다.

<h1 id="top"> - 목록
<h2 id='data1'> - 소제목

id를 설정했다면 <a>태그와 href속성을 이용하여 id의 값을 넣어줍니다.

<a href="#top">top</a>
<li><a href="#data1">1. 독서진흥시책의 중요성</a></li>

 

책갈피 사용

2. 다른 페이지에서 이동할 때

-이동을 원하는 곳(목적지)에 이름 지정(id넣기)

-href속성에 아이디와 파일경로 지정

 

http://file:///C:/%EC%9D%80%EC%86%94%20html/lesson02/link/link02/page01_menu.html

위 파일에서 하이퍼링크가 걸려있는 곳을 클릭하면 다른 페이지로 이동합니다.

코드소스를 공유할테니 한번씩 따라서 코드를 작성해보시면 공부하는 데 도움이 될 듯 합니다.

 

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>독선진층-메뉴</title>
</head>

<body>
  <h1 id="top">목록</h1>
  <ul>
    <li><a href="./page01_sub.html#data1">1. 독서진흥시책의 중요성</a></li>
    <li><a href="./page01_sub.html#data2">2. 문화소외계층의 독서환경</a></li>
   </ul>
</body>

</html>
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>독서진층시책</title>
</head>

<body>

  <h2 id="data1">1. 독서진흥시책의 중요성</h2>
  <p>2005년 「도서관 및 독서진흥법」 전면개정 추진으로 2006년 「도서관법」과 분리하여 「독서문화진흥법」이 제정되었고, 2007년 4월 5일부터 시행되었다. 「독서문화진흥법」제정 이전까지는 독서진흥을 위한 법적•제도적 뒷받침이 미약했기 때문에 독서활동은 별도의 정책적 지원이 필요한 분야로 인식되지 못하였다. 하지만 21세기 지식정보화시대에서는 창의력과 상상력의 원천이 되는 독서의 중요성이 날로</p>
  <p>또한 출판산업 발전에 새로운 기반을 조성할 「출판문화산업진흥법」도 6월 20일 국회 본회의를 통과한 후 7월 19일 법률로 공포되었다. 이 법률 또한 기존의「출판 및 인쇄진흥법」을 전면개정하면서 「출판문화산업진흥법」과 「인쇄문화산업진흥법」으로 각각 분리하여 제정한 것으로 2008년 1월 20일 법률이 시행되면 출판과 인쇄부문이 개별적 차원에서 발전할 수 있는 법적 기반을 마련하게 되었다. </p>
  <p>2005년 「도서관 및 독서진흥법」 전면개정 추진으로 2006년 「도서관법」과 분리하여 「독서문화진흥법」이 제정되었고, 2007년 4월 5일부터 시행되었다. 「독서문화진흥법」제정 이전까지는 독서진흥을 위한 법적•제도적 뒷받침이 미약했기 때문에 독서활동은 별도의 정책적 지원이 필요한 분야로 인식되지 못하였다. 하지만 21세기 지식정보화시대에서는 창의력과 상상력의 원천이 되는 독서의 중요성이 날로</p>
  <p>또한 출판산업 발전에 새로운 기반을 조성할 「출판문화산업진흥법」도 6월 20일 국회 본회의를 통과한 후 7월 19일 법률로 공포되었다. 이 법률 또한 기존의「출판 및 인쇄진흥법」을 전면개정하면서 「출판문화산업진흥법」과 「인쇄문화산업진흥법」으로 각각 분리하여 제정한 것으로 2008년 1월 20일 법률이 시행되면 출판과 인쇄부문이 개별적 차원에서 발전할 수 있는 법적 기반을 마련하게 되었다. </p>
  <a href="./page01_menu.html">Menu</a>

  <h2 id="data2">2. 문화소외계층의 독서환경</h2>

  <p>급격한 사회환경 및 정보환경의 변화에 따라 이용자의 요구의 증대로 도서관서비스는 크게 향상되고 있으나 아직도 대부분의 도서관에서 장애인, 고령자 등 독서장애인과 소외계층에 대한 이용서비스 수준은 크게 부족한 실정이다. 최근 시행된 「도서관법」에서 정보소외계층에 대한 서비스 및 국립장애인도서관지원센터의 설립 등에 관한 사항이 마련되어 있어 앞으로 장애인을 포함한 지식과 정보, 문화와 교육 부문에서의 소외계층에 대한 도서관서비스를 강화해
    갈 수 있는 법적 기반을 마련했다. 앞으로 이러한 기반을 잘 활용해 장애인 등 문화소외계층을 위한 독서기반시설의 확충 및 개선, 다양한 도서관 및 독서문화프로그램을 개발∙보급, 체계적이고 전문적 도서관 이용서비스 제공을 통해 일반인과의 격차를 줄이는 것이 시급하다. 현재 대부분의 도서관은 장애인이 이용하기에는 불편한 실정이어서 장애인들이 필요한 자료를 거주지 내 가까운 도서관에서 편리하고 충분하게 이용할 수 있도록 기반시설의 확충이
    필요하다. </p>
  <p>급격한 사회환경 및 정보환경의 변화에 따라 이용자의 요구의 증대로 도서관서비스는 크게 향상되고 있으나 아직도 대부분의 도서관에서 장애인, 고령자 등 독서장애인과 소외계층에 대한 이용서비스 수준은 크게 부족한 실정이다. 최근 시행된 「도서관법」에서 정보소외계층에 대한 서비스 및 국립장애인도서관지원센터의 설립 등에 관한 사항이 마련되어 있어 앞으로 장애인을 포함한 지식과 정보, 문화와 교육 부문에서의 소외계층에 대한 도서관서비스를 강화해
    갈 수 있는 법적 기반을 마련했다. 앞으로 이러한 기반을 잘 활용해 장애인 등 문화소외계층을 위한 독서기반시설의 확충 및 개선, 다양한 도서관 및 독서문화프로그램을 개발∙보급, 체계적이고 전문적 도서관 이용서비스 제공을 통해 일반인과의 격차를 줄이는 것이 시급하다. 현재 대부분의 도서관은 장애인이 이용하기에는 불편한 실정이어서 장애인들이 필요한 자료를 거주지 내 가까운 도서관에서 편리하고 충분하게 이용할 수 있도록 기반시설의 확충이
    필요하다. </p>
    <a href="./page01_menu.html">Menu</a>
    
  
</body>

</html>

결과물에 목적지가 밑줄과 파란색으로 변했다면 하이퍼링크가 걸렸다는 것이니 성공적으로 코드를 짜셨다고 생각하시면 될 듯 합니다. 

위의 코드에서는 목록 페이지와 정보 페이지를 따로 만들어서 두 개의 html파일을 만들어야 합니다.

목록 페이지                                                                                                                                                                      

 <h1 id="top"> 

<a href="./page01_sub.html#data1"> - id=data1과 연결됨 / 클릭 시 data1로 이동

 
 정보 페이지
 
<a href="./page01_menu.html">Menu</a> - id=top과 연결됨 / 클릭 시 top으로 이동
<h2 id='data1'>

 

 

오늘은 책갈피 기능에 대해서 알아보았습니다.

하다가 헷갈리거나 이해가 안되시는 부분이 있다면 답글 달아주세요.

다음 시간에는 미디어 콘텐츠에 대해서 다뤄보겠습니다.

 

'HTML' 카테고리의 다른 글

HTML-lesson06(미디어 콘텐츠-오디오)  (0) 2022.06.18
HTML-lesson05(미디어 콘텐츠-비디오)  (0) 2022.06.18
HTML-lesson04(미디어 콘텐츠-이미지)  (0) 2022.06.17
HTML-lesson02(Outliner,경로지정하기)  (0) 2022.06.16
HTML-lesson01(구성요소,목록,시맨틱 웹)  (1) 2022.06.14

'HTML'의 다른글

  • 현재글HTML-lesson03(책갈피)

관련글

댓글

티스토리툴바