코드일기장

[HTML] 기본2 본문

HTML,CSS

[HTML] 기본2

won_hyeok2 2022. 7. 5. 22:35

 

 

 

🎈 <img>태그, 이미지 삽입

 

  <img> 태그를 이용해 HTML  문서에 이미지를 삽입할 수 있다. <img> src 속성으로 지정할 수 있는 이미지의 종류는 다음과 같다.

BMP, GIF, JPG(JPEG), animated-GIF

 

<img> 태그

<img		src="이미지 파일의 URL.파일형식"
		alt="문자열(이미지가 출력되지 않을 때 출력되는 문자열"
		width="이미지의 폭"
		height="이미지의 높이">
  • src: 이미지의 URL. (필수 속성)
  • alt: 이미지가 없거나 손상되는 등 이미지 출력되지 않는 상황에서 출력되는 문자열. (필수 속성)
  • width: 이미지가 출력되는 너비로, 생략되면 원본 이미지 폭.
  • height: 이미지가 출력되는 높이로, 생략되면 원본 이미지 높이.

🎯<img> 활용 예시

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2>이미지 삽입</h2>
    <hr>
    <b>자바 이미지 입니다.</b><br>
    <img src="javaimg.png" alt="자바 이미지가 없습니다." width="200" height="200"><br>
    <b>파이썬 이미지 입니다.</b><br>
    <img src="pythonimg.png" alt="파이썬 이미지가 없습니다." width="200" height="200">
</body>
</html>

 

 

 

 

 

🎈<ol>, <ul>, <dl> 리스트 만들기

 

  • 순서가 있는 리스트(ordered list) <ol></ol>
  • 순서가 없는 리스트(unordered list) <ul></ul>
  • 정의 리스트(definition list) <dl></dl>

<ol></ol>

<ol> 태그의 type 속성 기본값은 "1"이다. 미지정시 "1"로 실행

<ol type="1"or"A"or"a"or"I"or"i" 
    start="value"
>
<li></li>
<li><!--종료태그 생략 가능 </li>-->
</ol>

<ul></ul>

<ul>
    <li>item</li>
    <li>item</li>
</ul>

<li></li>

<li type=""1"or"A"or"a"or"I"or"i">item</li>
<!--li태그의 type 속성은 <ol>태그에 대해서만 유효-->

<li>태그는 종료 태그 생략 가능.

 

 

🎯리스트 태그 활용

<ul>
    <h2>프로그래밍 언어의 역사</h2>
    <hr>
    <ol type="1">
        <li>제 1세대(기계어)</li>
        <li>제 2세대(어셈블리어)</li>
        <li>제 3세대(C언어)
        <li>제 4세대(DB관련 언어)
        <li>제 5세대(Java)</li>
    </ol>
</ul>

<h3>중첩 리스트 예제</h3>
<hr>
<ul>
    <li>다양한 라면들
    <ul>
        <li>신라면</li>
        <li>진라면</li>
        <li>너구리</li>
    </ul>

    <li>라면 끓이는 방법은 동일해요!
    <ol type="A">
        <li>물 끓이기</li>
        <li>라면과 스프 넣기</li>
        <li>4~5분 끓이기</li>
        <li>맛있게 먹을 준비하기</li>
    </ol>
    <li type="I">리스트의 예제</li>
</ul>

 

 

정의 리스트 예제

<dl>

  <dt>용어</dt>

  <dd>설명</dd>

</dl>

<dt>, <dd>는 종료 태그 생략 가능.

<dl>
    <h3>정의 리스트 예제</h3>
    <hr>
    <dt><strong>Internet</strong></dt>
    <dd>
        1990년대 초 인터넷이라는 이름으로 활용되기 시작, 전 세계 수 억 개의 컴퓨터가 연결된
        네트워크가 되었다. 즉, 컴퓨터들을 연결하는 길
    </dd>
    <dt><strong>Web</strong></dt>
    <dd>
        팀 버너스리 경이 만든 인터넷 서비스 중 하나 문서를 서버 컴퓨터에 올려놓고 인터넷을 통해
        클라이언트 컴퓨터에서 읽거나 쉽게 주고바을 수 있도록 만든 서비스이다. 
        즉, 웹은 인터넷을 이용해 만들어진 인터넷 서비스이다.
    </dd>
</dl>

 

 

 

🎈 <table>표 만들기

  HTML5에서 테이블 태그들을 이용해 표를 작성할 수 있다. 워드나 아래한글 문서 작업에서의 표와 동일하다. 

  표 전체는 <table> 각 종 내용들 </table>로 감싸며, 표제목, 헤드, 바디, 바닥을 모두 <table> 태그 안에 포함시킨다.

 

전반적인 <table> 태그의 사용방법은 이러하다.

<table>
    <caption>표제목</caption>
    <thead>
        <!--<tr>태그는 행, <td>태그는 열-->
        <tr>
            <td></td>
        </tr>
    </thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

  <caption> 태그로 표의 제목을 나타낼 수 있다. <thead>, <tbody>, <tfoot> 태그들은 검색 엔진의 표의 의미(시맨틱)를 파악하기 위한 태그이다. 태그 이름대로 head 표의 맨 위, foot은 표의 맨 마지막을 맡는다.

 

  <tr> 태그로 행 단위를 표현한다. <tr> 1 행 안에 n개의 열은 <td> 태그로 열을 표현한다.

  <th> 태그는 헤딩(정보)을 가진 셀이다.

<table>
    <caption>표제목</caption>
    <thead>
        <th>이름</th><th>학번</th>        
    </thead>
    <tbody><tr><td>기태</td><td>2021****</td></tr></tbody>
</table>

  이대로 출력하면 아래 사진처럼 출력된다.

  이렇게 보면 사용자가 표를 보고 분석하는 것이 어렵다. 표답게 구분선을 그어주기 위해서는 

<table border="1">
</table>

  <table> 태그에 border 속성을 사용하면 된다. 속성 값은 "1"로 1px의 선의 굵기를 의미한다.

  훨씬 보기 쉽다.

 

 

 

🎯테이블 태그 예제

<table border="1">
    <caption>1학기 성적</caption>
    <thead>
        <tr><th>이름</th><th>시험점수</th><th>학점</th></tr>
    </thead>
    <tbody>
        <tr><td>원혁</td><td>100</td><td>4.5(A+)</td>
        <tr><td>재빈</td><td>80</td><td>3.5(B+)</td></tr>
        <tr><td>쓴이</td><td>50</td><td>2.5(C+)</td>
    </tbody>
    <tfoot>
        <tr>
            <td>xx교수</td>
            <td colspan="2">확인</td>
        </tr>
    </tfoot>
</table>

출력결과

 

 

  <td> 태그 속성 중 colspan, rowspan이 있다.

<table border="1">
    <caption>셀 병합</caption>
    <tr>
        <td rowspan="2">1행과2행 합침</td><td colspan="2">2열괴 3열 합침</td>
    </tr>
    <tr>
        <td>rowspan</td><td>colspan</td>
    </tr>
<table>

 

 

 

 

🎈 <a> 하이퍼링크

 

  대부분의 웹 사이트는 여러 개의 HTML 페이지를 가지고 페이지들이 상호 연결하는 방식으로 전체를 구성하는데 서로 다른 HTML 페이지들끼리 연결하기 위해 하이퍼링크(hyperlink)를 텍스트나 이미지에 주소를 달아서 연결하는데 하이퍼링크는 서로 다른 HTML 페이지뿐만 아니라 다른 웹 페이지로 이동하는 것이 가능하다. 이것을 항해 혹은 내비게이션(navigation)이라고 부른다. 하이퍼링크는 링크라고 줄여서 부른다.

 

  하이퍼링크(링크)는 <a> 태그의 href 속성으로 만들 수 있다. 

<a  href="URL | URL#앵커이름 | #앵커이름"
    trarget="윈도우이름"
    download="">
링크를 달 텍스트 혹은 이미지
</a>
  • href: 이동할 HTML 페이지, URL 혹은 HTML  페이지 내 앵커 이름
  • target: 링크에 연결된 HTML 페이지가 출력될 윈도우 이름 지정
  • download: 링크가 클릭되면 href에 지정된 파일이 다운로드됨

 

 

  href 속성은 하이퍼링크로 이동할 HTML 페이지의 URL을 속성 값으로 입력해주면 된다. 

<a href="index.html">index.html로 이동하는 하이퍼링크</a>

  누르면 index.html 파일이 열린다. target이 지정되지 않아 기본값인 _self로 현재 윈도우창 즉, 현재 웹 브라우저 창에 기존 html대신 하이퍼링크에 눌린 index.html을 출력한다.

 

<a href="#">현재 페이지</a>

  href 속성 값으로 "#"을 넣으면 현재 페이지가 출력된다. 정확히 말하면 현재 페이지에서 URL 끝에 #을 단 HTML 페이지가 출력된다.

 

<a href="https://www.naver.com/">
    <img src="javaimg.png" alt="네이버로 가는 이미지">
</a>

  이 코드는 naver 웹 사이트로 가능 하이퍼링크이다. <a></a>사이에 img태그를 넣었다. 이미지를 누를 시 https://www.naver.com/"으로 로 이동한다.

 

 

  id 속성을 이용해 앵커를 만들수 있다. 문서의 특정 위치를 앵커(anchor)라고 부른다. 앵커를 만드는 방법은 간단하다. 

HTML5에서 제공하는 태그의 id 속성에 앵커 이름을 지정하면, 어떤 태그든 그 위치에 앵커가 만들어진다.

<!--앵커의 위치로 갈 하이퍼링크-->
<a href="#anchor1">&lt;p&gt;로 가는 a 태그</a><br>
<a href="#anchor2">&lt;hr&gt;로 가는 a 태그</a><br>

<!--앵커 2개-->
<p id="anchor1"></p>
<hr id="anchor2">

 

 

<a href="#anchor1">&lt;p&gt;로 가는 a 태그</a><br>
<a href="#anchor2">&lt;hr&gt;로 가는 a 태그</a><br>

<p id="anchor1">
    하는 대고, 커다란 바이며, 쓸쓸하랴? 위하여, 어디 돋고, 못할 속잎나고, 품고 자신과 예수는 풀이 철환하였는가? 얼마나 새 발휘하기 위하여 광야에서<br>
    소금이라 구하지 아름다우냐? 청춘의 군영과 수 이상은 품으며, 청춘이 모래뿐일 불러 설산에서 것이다. 장식하는 이상의 얼마나 것이다. 그들의 <br>
    얼음과 더운지라 얼마나 가진 관현악이며, 속에 전인 뛰노는 아름다우냐? 전인 남는 우리 보이는 두손을 그들에게 교향악이다. 별과 얼마나 천자만홍이 이상은 것이다.<br>
    심장은 크고 산야에 간에 과실이 전인 쓸쓸하랴? 열매를 자신과 주는 이것이다.<br>

꽃 못하다 없는 청춘의 구하지 청춘 끓는다. 가는 심장의 열매를 이것이다. 풍부하게 같으며, 만물은 커다란 그들의 풀이 끓는 쓸쓸하랴? 일월과 우리는<br>
 못할 그리하였는가? 광야에서 이것이야말로 있는 얼음이 커다란 그리하였는가? 지혜는 실현에 이상 거친 인류의 부패뿐이다. 고행을 찾아다녀<br>
 도, 기쁘며, 온갖 이성은 과실이 밥을 가진 피다. 그들은 사는가 뛰노는 끓는 착목한는 만천하의 이상의 따뜻한 구하지 봄바람이다. 눈이 우리 무엇을 것이다.<br>
</p>
<br><br><br>
<hr id="anchor2">

첫 번째 a태그를 누르면 <p>태그의 앵커 위치로 이동해진다. 이처럼 본문이 긴 HTML 문서에서 앵커는 긴 본문에서 목차와 같은 역할을 해 사용자가 앵커를 통해 스크롤 하지 않고 바로 원하는 내용을 확인시켜 줄 수 있다.

 

 

'HTML,CSS' 카테고리의 다른 글

[HTML] 기본1  (0) 2022.06.29
[HTML] <meta> (meta태그)  (0) 2022.01.28
'HTML,CSS' Related Articles more
Comments