"내가 보려고 만든 HTML 태그 정리"
[ HTML 기본 요소 ]
① <style> : 스타일 속성
- style속성을 이용하여 css스타일을 HTML요소에 직접 설정
- style 속성값에 사용되는 CSS속성과 속성 값은 세미콜론;으로 구분
- 여러개 CSS속성 중 맨 마지막 CSS속성은 세미콜론; 생략 가능
▼ CSS 속성 종류
- 배경색 설정
style = "background-color:white"
- 글자색 설정
style = "color:maroon"
- 글자 크기 변경
style="font-size:250%"
- 문단 정렬 변경
style="text-align:center"
[ 여러 CSS 속성 사용법 ]
1. 태그 안에 style속성 이용해서 CSS속성 지정
|
1
2
3
|
<h1 style="background-color:tomato; color:yellow; font-size:125%; text-align:center">
여러 style 속성 한번에 사용하기
</h1>
|
2. <head>태그안에 <style>태그 지정해서 CSS속성 지정
|
1
2
3
4
5
6
|
<head>
<meta charset="UTF-8">
<style>
table, th, td { border: 3px solid lightgray; border-collapse:collapse; text-align:center}
</style>
</head>
|
[ 다양한 HTML 색상 표현법 ]
- 색상 이름
: W3C에서 정의한 아래와 같은 표준 색상 이름을 가지고 색을 사용할 수 있다
출처 : www.w3schools.com/html/html_colors.asp
- RGB 색상값으로 표현
파란색 : rgb(0,0,255)
빨간색 : rgb(255,0,0)
초록색 : rgb(0,128,0)
- 16진수 색상 값으로 표현
- RGB 색상값을 16진수로 변환한 것 (00~FF 범위를 가짐)
파란색 : #0000FF
빨간색 : #FF0000
초록색 : #008080
▼ 색상 팔레트에서 원하는 색상의 코드를 얻을 수 있다
색상 팔레트 : 네이버 통합검색
'색상 팔레트'의 네이버 통합검색 결과입니다.
search.naver.com
② <background> : 배경 속성
- HTML 요소의 배경을 이미지로 설정 가능
- 단, 배경으로 이미지를 사용할 경우 웹 페이지의 로딩 시간 증가.
background = "이미지 주소"
|
1
2
|
<body background="/image.jpg">
</body>
|
③ <a href></a> : 링크 속성
- a태그의 href속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시할 수 있다.
"네이버" 클릭하면 새창으로 네이버 URL로 이동
|
1
2
3
|
<a href ="http://www.naver.com" target="_blank">
네이버
</a>
|
④ <table></table> : 테이블 태그
- 여러 종류의 데이터를 <table> 태그의 표를 활용해 보기 좋게 정리할 수 있다.
- <tr></tr> : 테이블에서 열을 구분
- <th></th> : 각 열의 제목을 나타냄, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬
- <td></td> : 테이블의 열을 각각의 셀로 나누어 줌.
테이블 예제1
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<h1>테이블 만들기</h1>
<table style="width:100%"; border:1px solid; border-collapse:collapse>
<tr style ="background-color:tomato">
<th>이름</th>
<th>생일</th>
<th>성별</th>
</tr>
<tr style ="text-align:center">
<td>주옹</td>
<td>1995-05-25</td>
<td>여자</td>
</tr>
<tr style ="text-align:center">
<td>석구</td>
<td>1992-01-10</td>
<td>남자</td>
</tr>
</table>
|
테이블 예제2
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Tables</title>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse }
</style>
</head>
<body>
<h1>테이블 만들기2</h1>
<table style="width:100%";>
<tr style ="background-color:tomato"> // 테이블 제목 배경색 토마토
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<td rowspan=3 style = "background-color:green">(1)</td> //현재 열부터 3개 합침 => (1),(5),(11)을 (1)열로 합침
<td>(2)</td>
<td>(3)</td>
<td>(4)</td>
<td>(5)</td>
</tr>
<tr>
<td>(6)</td>
<td>(7)</td>
<td colspan="2" style="background-color:yellow">(8)</td>//현재 행부터 2개 합침 => (8),(9)을 (8)행으로 합침
</tr>
<tr>
<td>(12)</td>
<td>(13)</td>
<td>(14)</td>
<td>(15)</td>
</tr>
</table>
</body>
</html>
|
cs |
'Front-end > HTML' 카테고리의 다른 글
| [ HTML ] HTML 태그_텍스트 요소 (0) | 2020.12.06 |
|---|---|
| [ HTML ] HTML? (0) | 2020.12.06 |