본문 바로가기
코딩/HTML+CSS

HTML-3

by rosemarie 2022. 9. 28.
반응형

 

<표 만들기> <table>

<table>: 표 전체를 담는 컨테이너

<caption>: 표제목

<thead>: 헤딩 셀 그룹

<tfoot>: 바닥 셀 그룹

<tbody>: 데이터 셀 그룹

<tr>: 행. 여러 <td>, <th> 포함

<th>: 열 제목(헤딩) 셀

<td> : 데이터 셀

 

border="1"는 1픽셀의 테두리

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <table border="1">
      <caption>1학기 성적</caption>
      <thead>
        <tr>
          <th>이름</th><th>HTML</th><th>css</th>
        </tr>
      </thead>
      <tfoot>
        <tr><th>합</th><th>225</th><th>230</th></tr>
      </tfoot>
      <tbody>
        <tr><td>황기태</td><td>80</td><td>70</td></tr>
        <tr><td>이재문</td><td>95</td><td>99</td></tr>
        <tr><td>이병은</td><td>40</td><td>61</td></tr>
      </tbody>    
    </table>
  </body>
</html>

<하이퍼링크 만들기 <a>>

<a> 태그의 href 속성을 이용해 하이퍼링크 작성

하이퍼링크: 다른 html 페이지의 연결고리

하이퍼링크는 텍스트나 이미지로 작성

<항해>

- 하이퍼링크를 따라 다른 웹 페이지를 방문하는 것

href: 이동할 html 페이지의 url /  html 페이지 내 앵커 이름

- 같은 웹 사이트에 있는 웹 페이지 연결

<a href="picturepage.html"></a>

- 다른 웹 사이트의 웹 페이지 연결

<a href="http://www.naver.com"></a>

- 이미지 하이퍼링크 만들기

<a href="http://www.naver.com">
  <img src="naver.png" alt="네이버 사이트">
</a>

target: 링크에 연결된 html 페이지가 출력될 윈도우 이름 지정

<하이퍼링크 텍스트 색>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <ul>
      <li><a href="http://www.naver.com">네이버</a></li>
      <li><a href="http://www.daum.net">다음</a></li>
    </ul>
    <ul>
      <li>
        <a href="http://www.etnews.com">
          <img src="media/iconetnews.png" alt="전자신문">
        </a>
      </li>
    </ul>
  </body>
</html>

<예제> 링크의 target 속성 활용

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <ul>
      <li><a href="https://www.naver.com" target="_blank">네이버/새윈도우</a></li>
      <li><a href="https://www.google.com" target="_parent">구글/부모 윈도우</a></li>
      <li><a href="https://dict.naver.com" target="_self">네이버사전/현재 윈도우</a></li>
      <li><a href="https://eclass3.cau.ac.kr/learningx/main" target="_top">이클래스/브라우저 윈도우</a></li>
    </ul>
  </body>
</html>

<<a> 태그의 id 속성으로 앵커 만들기>

<예제> 앵커로 이동하는 링크 만들기

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <ul>
      <li><a href="#love">love me tender</a></li>
      <li><a href="#can">can't help</a></li>
      <li><a href="#it">its now or never</a></li>
    </ul>
    <h3 id="love">love me tender</h3>
    ...
    <h3 id="can">can't help</h3>
    ...
    <h3 id="it">it's now or never</h3>
    ...
  </body>
</html>

<예제> 파일 다운로드 링크 만들기

 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <ul>
      <li><a href="music/프로그래밍언어론1.jpg"download>다운로드</a></li>
    </ul>
  </body>
</html>

<인라인 프레임>

-인라인 프레임 만들기: <iframe>

- html 페이지 내에 html 페이지 삽입

<iframe src="출력할 웹 페이지의 url 주소" 
    width="프레임 폭. 픽셀 값. 디폴트: 300" 
    height="프레임 높이. 픽셀 값. 디폴트: 150"
    srcdoc="직접 html 태그로 작성된 텍스트로서 출력될 내용"
    name="프레임 윈도우 이름. 다른 웹 페이지에서 target 속성 값으로 사용"      
    ></iframe>

<예제> 2개의 인라인 프레임을 가진 웹 페이지

<인라인 프레임에 출력할 문서를 srcdoc 속성으로 만들기>

-srcdoc 속성이 있으면 src 속성은 무시됨

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h3>srcdoc에 html문서 작성</h3>
    <hr>
    <iframe src="iframe1.html" width="200" height="80"
      srcdoc="<html><head></head><body>
        hello
      </body></html>"
    ></iframe>
  </body>
</html>
저작자표시 비영리 변경금지 (새창열림)

'코딩 > HTML+CSS' 카테고리의 다른 글

[CSS] padding  (0) 2023.08.08
HTML 태그 종류  (0) 2023.03.31
웹, URL&URI, HTTP, 웹 1.0, 브라우저  (0) 2023.03.31
HTML-2  (1) 2022.09.28
HTML-1  (1) 2022.09.21

관련글

티스토리툴바