<a>
HTML 링크는 다음 <a>태그로 하이퍼링크를 정의한다
링크의 대상은 href속성에 지정한다.
<a>링크가 이동하는 페이지의 URL을 지정(절대 및 상대 url, 슬래시로 시작하면 상대url)
링크 기본 속성(알아두면 좋다)
- 방문하지 않은 링크는 밑줄과 파란색으로 표시됩니다.
- 방문한 링크는 밑줄과 보라색으로 표시됩니다.
- 활성 링크는 밑줄과 빨간색으로 표시됩니다.
아래 예제는 CSS를 사용하여 링크 상태 색상을 변경할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Link Colors</h2>
<p>You can change the default colors of links</p>
<a href="html_images.asp" target="_blank">HTML Images</a>
</body>
</html>
mailto
속성 내에서 사용 href 하여 사용자의 이메일 프로그램을 여는 링크를 생성합니다.
(새 이메일을 보낼 수 있도록 함)
<a href="mailto:someone@example.com">Send email</a><img>
HTML 이미지는 <img>태그로 정의한다.
소스 파일( src), 대체 텍스트( alt), 대체제목(title) 속성이 있다.
alt 나 title 속성은 장애가 있는 분들을 위한 접근성 속성이다.
width및 height속성이도 있지만 style속성을 사용하는 것이 좋다.
(스타일 시트가 이미지 크기를 변경하는 것을 방지)
HTML은 애니메이션 GIF를 허용합니다.
// <img>태그 예시
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">HTML 파비콘(Favicon)
다음과 같이 브라우저 탭의 페이지 제목 왼쪽에 파비콘 이미지가 표시됩니다.
웹사이트에 파비콘을 추가하려면 파비콘 이미지를
웹 서버의 루트 디렉터리에 저장하거나
이미지라는 루트 디렉터리에 폴더를 만들고 이 폴더에 파비콘 이미지를 저장합니다.
파비콘 이미지의 일반적인 이름은 "favicon.ico"입니다.
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML 제목
HTML 제목은 <h1> ~ <h6>태그로 정의됩니다.
브라우저는 제목 앞뒤에 약간의 공백(여백)을 자동(글자 크기에 따라)으로 추가합니다.
HTML 단락
HTML <p>요소는 단락을 정의합니다.
단락은 항상 새 줄에서 시작하며,
브라우저는 자동(글자크기에 따라)으로 단락 앞과 뒤에 약간의 공백(여백)을 추가합니다.
띄어쓰기나 여러공백을 한칸의 공백으로 브라우저는 인식한다.
<hr>
수평선으로 표시
<br>
줄바꿈을 정의
스타일속성
style속성은 색상, 글꼴, 크기 등과 같은 요소에 스타일을 추가하는 데 사용됩니다.
background-color속성은 HTML 요소의 배경색을 정의
color속성은 HTML 요소의 텍스트 색상을 정의합니다.
font-family속성은 HTML 요소에 사용할 글꼴을 정의
font-size속성은 HTML 요소의 텍스트 크기를 정의
text-align속성은 HTML 요소의 가로 텍스트 정렬을 정의
텍스트 서식
<b> - 굵게
<strong> - 굵게
<i> - 이텔릭체 (기울임꼴)
<em> - 기울림꼴
<small> - 작게
<mark> - 강조표시
<del> - 삭제된 텍스트, 삭제된 텍스트에 줄을 긋는다.
<ins> - 텍스트를 삽입, 삽입된 텍스트에 밑줄을 긋는다.
<sub> - 아래 첨자 텍스트 정의할때, 화학식에 사용
<sup> - 위 첨자 텍스트를 정의할떄, 제곱식에 사용
table
<table>
<tr> // 레코드
<th>Person 1</th>
// 표 제목, 기본적으로 <th>요소의 텍스트는 굵고 가운데 정렬되지만 CSS로 변경할 수 있습니다.
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td> // 한킨 컬럼
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
border-collapse : collapse 하면 이중테두리(border)가 단일 테두리로 축소된다.
border-spacing : 셀 간격은 각 셀 사이의 공간이다. 기본적으로 공간은 2픽셀로 설정
table {border-spacing: 30px; }
border 스타일도 변경 가능하다.
https://www.w3schools.com/html/html_table_borders.asp
HTML Table Borders
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
사이트 참고
테이블 크기는 style 속성과 함께 width, height 로 조절한다.
<table style="width:100%">
<tr style="height:200px">
colspan : 셀이 여러 열에 걸쳐 있도록 사용하는 속성이다.
<th colspan="2">Name</th>
rowspan : 셀이 여러 행에 걸쳐 있도록 사용하는 속성
<th rowspan="2">Phone</th>
<caption> : 테이블 제목
<colgroup> : 열 그룹지정
<col> : 열 지정
<span> : 스타일을 가져오는 열 수를 지정
<col span="2" style="background-color: #D6EEEE">
</colgroup>
List
<ul> : 정렬되지 않은 목록
<ol> : 정렬된 목록
<li> : 목록 항목은 기본적으로 글머리 기호(작은 검은색 원 디폴트)로 표시 (ul, ol의 하위태그) ]
목록 마커(글머리 기호)는 type속성을 통해 바꿀 수 있다.
설명 목록
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>