Programming

; develop a program

Front-End/HTML & CSS

[Front-End] HTML 기본 요소(2)

Clloud_ 2022. 10. 19. 11:14
반응형

이번 포스팅에서는 HTML의 기본 요소에 대하여 공부를 해보고자 한다.

 

HTML 링크(Link)

웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재한다.

이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 <a> 태그로 표현한다.

<a href="링크주소">HTML 링크</a>

더보기

<a> 태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시한다.

<a> 태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있다.

 

target 속성

<a> 태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시한다.

 

target 속성값 설명
_blank 링크로 연결된 문서를 새 창이나 새 탭에서 오픈.
_self 링크로 연결된 문서를 현재 프레임(frame)에서 오픈. (기본설정)
_parent 링크로 연결된 문서를 부모 프레임(frame)에서 오픈.
_top 링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 오픈.
프레임(frame) 이름 링크로 연결된 문서를 지정된 프레임(frame)에서 오픈.

 

링크의 상태(state)

HTML 링크의 상태는 다음과 같이 네 가지로 구분할 수 있다.

더보기

기본적으로 링크가 걸린 텍스트는 밑줄에, 텍스트 색상이 파란색으로 변경된다.

visited 상태의 링크는 밑줄에, 텍스트 색상이 보라색으로 변경된다.

active 상태의 링크는 밑줄에, 텍스트 색상이 빨간색으로 변경된다.

 

링크의 상태 설명
link 링크로 연결된 문서를 새 창이나 새 탭에서 오픈.
visited 한 번이라도 방문한 적이 있는 상태
hover 링크 위에 마우스를 올려놓은 상태
active 링크를 마우스로 누르고 있는 상태

 

HTML 이미지(Image)

이미지(image)란 2차원 평면 위에 그려진 시각적 요소를 의미한다.

웹 페이지에서 주로 사용되는 이미지의 종류는 JPEG 이미지/GIF 이미지/PNG 이미지이다.

 

이미지의 삽입

HTML 문서에 이미지를 삽입할 때는 <img> 태그를 사용한다.

태그는 종료 태그가 없는 빈 태그(empty tag)다.

<img src="이미지주소" alt="대체문자열">

 

src 속성은 이미지가 저장된 주소의 URL 주소를 명시한다.

alt 속성으로 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정할 수 있다.

더보기

예제

<img src="/img_html5_logo.png" alt="이미지가 없나봐요..">

 

이미지의 크기(width, height) 설정

HTML에서는 style 속성을 사용하여 이미지의 크기를 설정할 수 있다.

width 속성과 height 속성을 이용하면, 이미지의 너비와 높이를 각각 픽셀(pixel) 단위로 설정할 수 있다.

더보기

예제

<style>
    img {
        width:100%;
        border: 1px solid black;
    }
</style>
...
<img src="/examples/images/img_flag.png" alt="html size" width="320" height="214">
<img src="/examples/images/img_flag.png" alt="style size" style="width:320px; height:214px">

 

이미지의 테두리(border) 설정

border 속성을 사용하여 이미지의 테두리 사용 여부와 굵기를 설정할 수 있다.

더보기

예제

<img src="/examples/images/img_flag.png" alt="이미지 테두리"
    style="width:320px; height:214px; border: 3px solid black">

 

이미지에 링크(link) 설정

이미지에 <a> 태그를 이용하여 링크를 설정할 수 있다.

더보기

예제

<a href="/html/intro" target="_blank">
    <img src="/examples/images/img_flag.png" alt="flag" style="width:320px; height:214px">
</a>

 

이미지 맵 만들기

이미지 맵(image map)이란 이미지의 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능을 의미한다.

HTML에서는 <map> 태그를 이용하여 이미지 맵(image map)을 만들 수 있다.

 

<img> 태그의 usemap 속성을 <map> 태그의 name 속성과 연결하면 이미지와 맵 사이의 관계가 설정된다.

<map> 태그는 하나 이상의 <area> 태그를 가지며, 이 <area> 태그가 바로 버튼과 같은 역할을 한다.

더보기

예제

<img src="/examples/images/img_imagemap.jpg" alt="진실혹은거짓" usemap="#vending" 
	style="width:320px; height:240px" />
<map name="vending">
    <area shape="rect" coords="90,60,180,130" alt="거짓"
        href="https://ko.wikipedia.org/wiki/%EA%B1%B0%EC%A7%93%EB%A7%90">
    <area shape="rect" coords="210,200,70,130" alt="진실"
        href="https://ko.wikipedia.org/wiki/%EC%A7%84%EC%8B%A4">
</map>

 

HTML 리스트(List)

리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미한다.

 

순서가 없는 리스트(unordered list)

순서가 없는 리스트는 <ul> 태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 <li> 태그로 시작한다.

각각의 리스트 요소 앞에는 기본 마커(marker)로 검은색의 작은 원(bullet)이 위치한다.

더보기

예제

<ul>
    <li>사과</li>
    <li>멜론</li>
    <li>바나나</li>
</ul>

 

순서가 있는 리스트(ordered list)

순서가 있는 리스트는 <ol> 태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 <li> 태그로 시작한다.

각각의 리스트 요소 앞에는 기본 마커로 아라비아 숫자가 위치한다.

더보기

예제

<ol>
    <li>사과</li>
    <li>멜론</li>
    <li>바나나</li>
</ol>

 

정의 리스트(definition list)

정의 리스트는 용어와 그에 대한 정의를 모아놓은 리스트로 <dl> 태그로 시작한다.

<dt> 태그에는 용어의 이름이 들어가고, <dd> 태그에는 해당 용어에 대한 정의가 들어간다.

더보기

예제

<dl>
    <dt>호박</dt>
    <dd>- 박과의 한해살이 덩굴성 채소</dd>
    <dt>상추</dt>
    <dd>- 국화과의 한해살이 또는 두해살이풀</dd>
</dl>

HTML 테이블(Table)

테이블(Table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 말한다.

HTML에서는 <table> 태그를 사용하여 이러한 테이블을 작성할 수 있다.

더보기

CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있다.

border 속성 값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리를 가진다.

 

<table> 태그 종류

  • <tr> 태그는 테이블에서 열을 구분한다.
  • <th> 태그는 각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬시킨다.
  • <td> 태그는 테이블의 열을 각각의 셀(cell)로 나누어 준다.
더보기

예제

<table style="width:100%">
    <tr style="background-color:lightgrey">
        <th>참치</th>
        <th>고래</th>      
    </tr>
    <tr>
        <td>상어</td>
        <td>문어</td>
    </tr>
    <tr>
        <td>오징어</td>
        <td>고등어</td>
    </tr>
</table>

테이블의 열 합치기

colspan 속성을 사용하면 테이블의 열(column)을 합칠 수 있다.

더보기

예제

<table style="width:100%">
    <tr>
        <td>참치</td>
        <td colspan="2">고래</td>        
    </tr>
    <tr>
        <td>상어</td>
        <td>문어</td>        
        <td>꽁치</td>
    </tr>
</table>

 

테이블의 행 합치기

rowspan 속성을 사용하면 테이블의 행(row)을 합칠 수 있다.

더보기

예제

<table style="width:100%">
    <tr>
        <td rowspan="2">상어</td>
        <td>문어</td>        
        <td>꽁치</td>
    </tr>
    <tr>
        <td>고등어</td>        
        <td>돌고래</td>
    </tr>
</table>

 

테이블의 열과 행 합치기

colspan 속성과 rowspan 속성을 함께 사용하면, 더욱 복잡한 테이블도 표현할 수 있다.

더보기

예제

<table style="width:100%">
    <tr>
        <td colspan="6">1</td>
    </tr>
    <tr>
        <td colspan="6">2</td>
    </tr>
    <tr>
        <td rowspan="3">3</td>
        <td rowspan="3">4</td>
        <td colspan="2">5</td>
        <td>6</td>
        <td>7</td>
    </tr>
    <tr>
        <td colspan="3">8</td>
        <td>9</td>
    </tr>
    <tr>
        <td colspan="4">10</td>
    </tr>
</table>

 

테이블의 캡션(caption) 설정

<caption> 태그를 사용하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있다.

더보기

예제

<table style="width:100%">
    <caption>해양 생물</caption>
    <tr>
        <td>참치</td>
        <td>고래</td>
        <td>날치</td>    
    </tr>
</table>

 

반응형
저작자표시 비영리 변경금지

'Front-End > HTML & CSS' 카테고리의 다른 글

[Front-End] HTML 입력 양식  (0) 2022.10.20
[Front-End] HTML 공간 분할  (0) 2022.10.19
[Front-End] HTML 기본 요소(1)  (0) 2022.10.19
[Front-End] HTML 텍스트 요소  (0) 2022.10.18
[Front-End] HTML 개요  (0) 2022.10.18

'Front-End/HTML & CSS'의 다른글

  • 현재글[Front-End] HTML 기본 요소(2)

관련글

댓글

티스토리툴바