선택자
선택자 {
속성:속성값;
}
* : 전체 선택자
# : id 선택자
. : 클래스 선택자
특정 태그(ex.h2) : 태그 선택자
id 이름 : 유일값 / class 이름 : 중복 가능
=> 숫자로 시작 X, 띄어쓰기 X
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자</title>
<style>
/*
* { //전체 선택자 (전체 적용)
color:cornflowerblue;
}
h2 {
background-color: cornsilk;
}
p {
background-color: azure;
}
ul {
border: 1px dotted violet; //solid: 실선, dotted : 점선
}
*/
#title {
color: cornflowerblue;
}
#back {
background-color: beige;
}
.target {
background-color: antiquewhite;
}
.bor {
border: 2px solid rebeccapurple;
}
p.target { //p태그 중 class이름 target인 경우에만
font-family: "궁서체";
}
</style>
</head>
<body>
<h2 id="title">css 선택자 수업</h2>
<p class="target bor">프론트엔드 수업(CSS)</p> //class => 이름 다수 부여 가능
<p class = "target">html5 수업 - 홈페이지 뼈대</p>
<p id="back">css3 수업 - 디자인, 레이아웃</p>
<h2>웹페이지 제작</h2>
<ul>
<li>페이지 구상</li>
<li>와이어 프레임</li>
<li>html 제작</li>
<li class="target">css 작업으로 완성</li>
</ul>
</body>
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자</title>
<style>
body {
background-image: url(images/Koala.jpg);
}
#box {
background-color: rgba(255, 255, 255, 0.5);
}
.red {
color: hsl(300, 100%, 50%);
}
</style>
</head>
<body>
<div id="box">
<h2>오늘은 금요일</h2>
<p> <span class="red">CSS3</span> 선택자 공부 중</p>
<p>즐거운 주말 되세요</p>
</div>
<p>다음주부터 <span class="red">CSS3</span> 본격적으로 시작!</p>
</body>
</html>
|
cs |
※ 색상 표기법
#ff0000 : 16진수 표기법
rgb(255,0,0) : rgb 표기법(10진수)
rgba(레드,그린,블루,알파(투명도))
hsl(300,100%,50%) => 색상, 채도, 밝기에 따름 (디자인용)
- 선택자 우선순위
1. 인라인 스타일
2. id 스타일
3. 클래스 스타일
4. 태그 스타일
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자</title>
<style>
#week {
color:red;
}
.ch {
color: green;
}
p {
color: blue !important; //우선순위 1순위 강제
}
</style>
</head>
<body>
<div>
<h2>오늘은 금요일</h2>
<p class="ch">CSS3 선택자 공부 중</p>
<p id="week">즐거운 주말 되세요</p>
</div>
<p>다음주부터 CSS3 본격적으로 시작!</p>
</body>
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자식선택자, 후손선택자</title>
<style>
#area>p{
color:blueviolet;
}
#area p {
background-color: aliceblue;
}
</style>
</head>
<body>
<div id="area">
<h2>css 선택자 수업</h2>
<p>프론트엔드 수업(CSS)</p>
<p>html5 수업 - 홈페이지 뼈대</p>
<p>css3 수업 - 디자인, 레이아웃</p>
<h2>웹페이지 제작</h2>
<ul>
<li>페이지 구상</li>
<li>와이어 프레임</li>
<li>html 제작</li>
<li>css 작업으로 완성</li>
</ul>
<div id="inner">
<p>내부 단락</p>
</div>
</div>
<p>즐거운 주말 되세요!</p>
</body>
|
cs |
Vendor Prefix (공급업체 접두사) : 각 브라우저에 맞춰 지원
브라우저 표준화될수록 사라질 기능
- 다단
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>공급업체 접두사</title>
<style>
p {
-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
-ms-column-count:3;
column-count: 3;
}
img:hover{
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
</style>
</head>
<body>
<img src="images/car_green.jpg" alt="">
<p>문화체육관광부는 한국공예·디자인문화진흥원과 함께 '한복과 한류 연계 협업 콘텐츠 기획·개발' 사업을 추진한다고 10일 밝혔다. 이번 사업은 한류 문화예술인의 힘을 보태 한복의 매력을 해외에 알리고, 국내 한복업체가 만든 한복의 해외진출을 돕기 위해 마련했다.
올해는 유니세프 국제친선 대사로 활동 중인 김연아씨가 참여한다. 문체부는 국제사회를 무대로 각종 사회공헌 활동을 지속하며 선한 영향력을 전하고 있단 점에서 품격 있는 전통의복인 한복의 매력을 돋보이게 할 것으로 보고 김연아씨를 발탁했다. 지난해엔 K팝 그룹 브레이브걸스와 다크비가 참여했다. 이들은 미국 뉴욕 타임스퀘어 전광판에 송출된 한복의 디지털 패션쇼 영상에서 한복의 아름다움을 알렸다.
김연아씨는 "한복의 아름다움을 표현할 수 있는 상품을 새롭게 기획·개발하고, 우리 옷 한복이 가진 가치와 장점을 적극적으로 알릴 기회를 얻게 되어 기쁘다"라고 소감을 전했다.</p>
</body>
|
cs |
텍스트 스타일
- 폰트 사용방법
1. CDN (font.google.com 연결)
2. 직접 업로드 (.eot, .woff)
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 관련 스타일</title>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR&display=swap" rel="stylesheet">
<style>
/* @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR&display=swap'); */
@font-face {
font-family: "trana";
src: url(fonts/trana.eot),
url(fonts/trana.ttf)format("woff"),
url(fonts/trana.woff)format("truetype");
}
h2{
font-family: 'IBM Plex Sans KR', sans-serif;
}
h1{
font-family: "trana";
}
</style>
</head>
<body>
<h1>CORONA</h1>
<h2>css 선택자 수업</h2>
<p>프론트엔드 수업(CSS)</p>
<p>html5 수업 - 홈페이지 뼈대</p>
<p>css3 수업 - 디자인, 레이아웃</p>
</body>
|
cs |
- 폰트 크기
기본 글꼴 크기 = 16px
- 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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 관련 스타일</title>
<style>
body{
font-size: 14px;
}
h1{
font-size: 2em; /* 부모 기준 2배 => 28 */
}
h2{
font-size: 1.5em;
}
p, ul{
font-size: 1em;
}
</style>
</head>
<body>
<h2>css 선택자 수업</h2>
<p></p>프론트엔드 수업(CSS)</p>
<p>html5 수업 - 홈페이지 뼈대</p>
<p>css3 수업 - 디자인, 레이아웃</p>
<h2>웹페이지 제작</h2>
<ul>
<li>페이지 구상</li>
<li>와이어 프레임</li>
<li>html 제작</li>
<li>css 작업으로 완성</li>
</ul>
</body>
|
cs |
- rem : 최상위 부모(<html> 폰트 크기) 기준
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 관련 스타일</title>
<style>
ul{
font-size: 20px;
}
li{
font-size: 1.5em;
}
.target{
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2>웹페이지 제작</h2>
<ul>
<li>페이지 구상</li>
<li>와이어 프레임</li>
<li>html 제작</li>
<li class="target">css 작업으로 완성</li>
</ul>
</body>
|
cs |
- vw : viewport(보여지는 영역) 내 백분율 ( ex. 1vx => 너비의 1% 차지 )
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 관련 스타일</title>
<style>
h2{
font-size: 5vw;
}
p{
background-color: antiquewhite;
width : 50vw;
}
</style>
</head>
<body>
<h2>오늘의 뉴스</h2>
<p>이들 지역 중 대부분에는 이날 밤까지 소나기가 올 것으로 기상청은 내다봤다. 경기북부와 강원영서북부에는 11일 새벽까지 소나기가 오겠다.
제주에는 기압골의 영향으로 10일 밤부터 11일 아침까지 5~20㎜ 비가 내릴 것으로 예상된다.
11일 오후 서울 등 중부내륙, 전라내륙, 경북북부내륙, 경남북서내륙 곳곳에 소나기가 올 전망이다. 전라내륙과 경남서부내륙의 경우 소나기가 저녁까지 이어지겠다.</p>
</body>
|
cs |
- font-weight : 폰트 두께
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 관련 스타일</title>
<style>
p{
font-weight: 700;
h2{
font-weight: normal; /*400*/
}
.target{
font-style: italic;
}
</style>
</head>
<body>
<h2>웹페이지 제작</h2>
<p>홈페이지 제작 순서</p>
<ul>
<li>페이지 구상</li>
<li class="target">와이어 프레임</li>
<li>html 제작</li>
<li>css 작업으로 완성</li>
</ul>
</body>
|
cs |
'Programming > 국비학원' 카테고리의 다른 글
| 220614 - css - 선택자(가상, 가상 요소), 문단, 리스트, 배경 스타일 (0) | 2022.06.15 |
|---|---|
| 220613 - css (텍스트 스타일, 선택자 - 형제, 속성, 가상 ) (0) | 2022.06.14 |
| 220609 - html(select, datalist, 멀티미디어, meta, 기타, 시멘틱 구조 태그), CSS(외부/내부/인라인 스타일) (0) | 2022.06.10 |
| 220608 - html (form) (0) | 2022.06.09 |
| 220607 - html (0) | 2022.06.08 |
