* CSS(Cascade Style Sheet) -> 다양한 디자인적 요소를 정의
선택자 : tag
선택자 { 속성 : 값; }
- CSS : 디자인, 모양, 크기 담당
html :페이지의 구조 담당
- style > width / border / text-align / border-collapse
|
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css01.html</title>
<style>
/* 다양한 디자인적 요소를 정의
선택자 : tag
선택자 { 속성 : 값; }
*/
table {
width: 500px;
/* solid : 테두리 */
border: 1px solid red;
/* border: 3px dotted blue; */
/* border-top: 2px solid red; */
text-align: center;
border-collapse: collapse;
}
tr {
background-color: rgb(248, 252, 215);
}
td {
border: 1px solid rgb(151, 151, 238);
}
/* a {
border: 1px solid rgb(255, 213, 213);
} */
</style>
</head>
<body>
<p>
<!-- html :페이지의 구조 담당 -->
<!-- CSS : 디자인, 모양, 크기 담당 -->
CSS(Cascade Style Sheet)
</p>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<br>
<br>
<br>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<br>
<!-- 네이버 글씨를 클릭하면 네이버로 이동할 수 있는 하이퍼링크 -->
<a href="http://www.naver.com" style="border:1px solid rgb(164, 228, 164)">네이버</a>
<a href="http://google.com">구글</a>
</body>
</html>
|
cs |
- style > color / background-color / font-size / font-family
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css02.html</title>
<style>
h1{
color:blue;
}
p{
background-color: pink;
}
/* 모든 */
* {
/* 글자색을 파란색 */
color: blue;
/* 글자 크기를 20px */
font-size: 20px;
/* 글꼴 지정 */
font-family: "나눔스퀘어", "궁서체", "나눔고딕", sans-serif;
}
</style>
</head>
<body>
<!-- h1{type 선택자}+p{HTML의 모든 요소는 선택자로 사용 가능}*4 -->
<h1>type 선택자</h1>
<p>HTML의 모든 요소는 선택자로 사용 가능</p>
<p>HTML의 모든 요소는 선택자로 사용 가능</p>
<p>HTML의 모든 요소는 선택자로 사용 가능</p>
<p>HTML의 모든 요소는 선택자로 사용 가능</p>
</body>
</html>
|
cs |
- style > color / font-size / #id
|
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
47
48
49
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 모든 글자는 파란색
폰트 크기는 20px */
* {
color: blue;
font-size: 20px
}
h1{
/* h1 글자 핑크 */
color: pink;
}
p{
/* p 태그 글자를 red */
color: red;
}
/* id가 aaa인 요소는 글자를 red
id가 bbb인 요소는 글자를 orange
id가 ccc인 요소는 글자를 yellow */
#aaa{color: red;}
#bbb{color: orange;}
#ccc{color: yellow;}
/* #아이디값 */
#ddd{color: green;}
</style>
</head>
<body>
<!-- h1{ID 선택자}+p{HTML의 모든 요소는 선택자로 사용가능}*4 -->
<!-- ID는 식별을 위한 것이기 때문에 중복된 값으로 쓰면 안됨 -->
<h1>ID 선택자</h1>
<p id = "aaa">HTML의 모든 요소는 선택자로 사용가능</p>
<p id = "bbb">HTML의 모든 요소는 선택자로 사용가능</p>
<p id = "ccc">HTML의 모든 요소는 선택자로 사용가능</p>
<p id = "ddd">HTML의 모든 요소는 선택자로 사용가능</p>
</body>
</html>
|
cs |
- style > list-style / text-decoration / color / font-siz / em
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* ctrl + space : 태그 불러오기 */
ol{
/* 리스트 스타일 지우기 */
list-style: none;
}
a{
color: #ff9999;
/* 글자의 쓸데없는 장식 지우기 */
text-decoration: none;
font-size: 20%;
/* 단위
절대단위: in, cm, mm, pt
상대단위: em, %
em: 폰트의 대문자 m의 너비를 기준으로 상대 단위
2em (배)
폰트 사이즈 기본값 : 12pt, 16px
1em 100% */
}
</style>
</head>
<body>
<!-- ul>(li>a[href='#'])*4 -->
<ol>
<li><a href="#">홈으로 </a></li>
<li><a href="#">게시판</a></li>
<li><a href="#">뉴스보기</a></li>
<li><a href="#">메일</a></li>
</ol>
</body>
</html>
|
cs |
- style > font-size
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css05.html</title>
<style>
body{
font-size: 10px;
}
h1{
/* h1 기본값 : 16px */
/* body 폰트 크기를 10px로 하면 h1에서 100% 했을 때, 10px > 상대크기 */
/* 1em이면 부모의 폰트와 같은 크기*/
/* 상대 단위는 부모를 기준으로.. > 모바일 페이지 개발을 위해.. */
font-size: 1em;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<!-- h1의 크기의 글자를 5px
p 태그의 글자를 20px이 되게 CSS 정의 -->
<h1>은하수</h1>
<p>푸른 하늘 은하수</p>
<p>하얀 쪽배</p>
</body>
</html>
|
cs |
- style > #id / .class
|
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
47
48
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css06.html</title>
<!-- 첫번째 p 태그의 글자 색을 red
두번째 p 태그의 글자를 blue
세번쨰, 네번째 p태그는 초록색으로 지정 -->
<style>
#aaa{color: red;}
#bbb{color: blue;}
/* #ccc, #ddd{color: green;} */
/* 클래스 글씨 색 지정 */
/* .blueE { color: yellowgreen; } <== 이렇게 간단히 적을 수도 있음*/
li.blueE { color: yellowgreen;
/* # : id
. : class */
li.bigFont { font-size: 30px; }
.pinkcolor { color: pink; }
</style>
</head>
<body>
<h1>ID 선택자</h1>
<p id = "aaa">HTML의 모든 요소는 선택자로 사용가능</p>
<p id = "bbb">HTML의 모든 요소는 선택자로 사용가능</p>
<!-- class는 동일한 애들끼리 묶기 위해 사용 -->
<p class="blueE">HTML의 모든 요소는 선택자로 사용가능</p>
<p class="blueE">HTML의 모든 요소는 선택자로 사용가능</p>
<!-- ul>li{상품$}*5 -->
<!-- 상품 1, 3에 새로운 클래스 bigFont를 지정하고 font의 크기를 30px로 변경되도록
css를 정의해 주세요bigFont
<!- 상품 2, 4, 5 : 클래스 pinkcolor 글자색 : pink -->
<ul>
<li class="bigFont">상품1</li>
<li class="pinkcolor">상품2</li>
<li class="bigFont">상품3</li>
<li class="pinkcolor">상품4</li>
<li class="pinkcolor">상품5</li>
</ul>
</body>
</html>
|
cs |
[ 응용 ]
- 스타벅스 케이크 메뉴 화면 예시
|
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<html>
<head><title>Cold Brew</title></head>
<style>
table{
border-collapse: collapse;
border-top: 2px solid black;
}
#title{font-size: 110%;}
#english{font-size: 50%; color: lightslategray;}
#bgcolor{background-color: rgba(201, 217, 231, 0.884);}
.kcal{font-size: 90%}
.right{font-size: 90%; text-align: right;}
</style>
<body>
<img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/04/[5110007192]_20210421153949188.jpg" width="300" height="300" alt="">
<br>
<br>
<img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/04/[5110007192]_20210421153949188.jpg" width="30" height="30"alt="">
<br><br>
<caption>
<element id="title"><b>레드벨벳 크림치즈 케이크</b></element>
</caption>
<br>
<caption>
<element id="english">Red Velvet Cream Cheese Cake</element>
</caption>
<table width = "500", border="0", cellspacing="0", cellpadding="20">
<!-- <tr>
<td id="title" colspan="4"><b>레드벨벳 크림치즈 케이크</b></td>
<!- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- </tr> -->
<!-- <tr>
<td id="english" colspan="4">Red Velvet Cream Cheese Cake</td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- </tr> > -->
<tr>
<td colspan="4">제품 영양 정보</td>
</tr>
<tr>
<td class="kcal">1회 제공량(kcal)</td>
<td class="right">5</td>
<td class="kcal">당류(g)</td>
<td class="right">0</td>
</tr>
<tr>
<td class="kcal">포화지방(g)</td>
<td class="right">15</td>
<td class="kcal">단백질(g)</td>
<td class="right">4</td>
</tr>
<tr>
<td class="kcal">나트륨(mg)</td>
<td class="right">0</td>
<td></td>
<td class="right"></td>
</tr>
<tr>
<td id="bgcolor" colspan="4">알레르기 유발요인 : 대두 / 우유 / 알류 / 밀</colspan>
<!-- <td></td> -->
</tr>
</table>
</body>
</html>
|
cs |
'HTML' 카테고리의 다른 글
| [HTML] javascript (2) - 응용 (0) | 2023.04.16 |
|---|---|
| [HTML] javascript (1) (0) | 2023.04.16 |
| [HTML] CSS - div ( block & in-line / position - relative, absolute, fixed / button (0) | 2023.04.09 |
| [HTML] http / 기본 구조 + html:5 (테이블/광고판/입력 표현/기능/form/검색창/로그인창) (0) | 2023.04.09 |
| [HTML] 기본 구조 (창에 글 쓰기/리스트/테이블/하이퍼링크) (0) | 2023.04.09 |