- font-variant:small-caps : 소문자 -> 작은 대문자
.bar{
font-variant: small-caps;
}
- line-height : 줄 높이 => 줄 간격
p{
line-height: 1.5; //1.5배
}
p{
line-height: 24px; //1.5배 (기본값 16px)
}
- font: [font-weight, font-style, font-variant] [font-size/line-height] [font-family]
세가지 순서 맞춰야함 / 글자 크기와 글꼴 생략 불가
.today{
font: bold 12px/1.6 "궁서";
}
형제 선택자
A+B = A와 인접한 형제 B만
A~B = A와 형제관계인 B태그 모두
|
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
|
<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>
h1 + h2{
color: azure;
}
h1 ~ h2 {
background-color: beige;
}
input[type=text]{
background-color: azure;
}
</style>
</head>
<body>
<h1>CSS3 공부</h1>
<h2>기본 선택자</h2>
<h2>응용 선택자</h2>
<h2>기본 속성</h2>
<h2>응용 속성</h2>
<form action="">
아이디<input type="text"><br>
비밀번호<input type="password">
</form>
</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
|
<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>
input[type=checkbox]:checked+div{height:0} //0일 때 단위 생략 가능
//체크된 체크박스와 인접한 div 높이 0으로 만듦 div{
width: 200px; //단위 필수!
height: 200px;
border: 1px solid aqua;
overflow: hidden;
//벗어나는 내용 숨김 //scroll: 내용이 border 밖으로 나올 때 스크롤 생성 transition: 3s; //스르륵
}
</style>
</head>
<body>
<input type="checkbox">뉴스감추기
<div>
<h2>오늘의 뉴스</h2>
<p>대학 새내기인 그에게 파리바게뜨의 노동탄압 문제는 “다 제 주변 이야기 같고, 내 이야기 같은” 이슈이다. 파리바게뜨는 과로, 부당노동행위 등 문제로 논란이 되고 있다. 파리바게뜨 담당 자회사 피비파트너즈 관리자들은 노조탄압 혐의로 검찰에 넘겨졌다. 2018년 불법파견 노동자를 정규직으로 전환하기로 노조와 합의했지만, 본사가 직접 고용하지 않고 자회사에 고용해 ‘간접고용’ 논란이 일기도 했다.</p>
<p>조씨는 “임 지회장과 파리바게뜨 제빵기사들이 남 같지 않고 우리 중의 한 사람 같아서” 불매에 나섰지만, 대기업인 SPC 제품을 불매하기는 쉽지 않았다고 했다. 파리바게뜨를 포함해 베스킨라빈스·파스쿠찌 등 일상 속 많은 식품브랜드가 SPC의 것이기 때문이다. 조씨 학교의 학생회가 기말고사 때 학생복지 차원에서 학생들에게 제공한 간식 쿠폰도 SPC의 한 브랜드 것이었다.</p>
</div>
</body>
|
cs |
속성 선택자
1. 태그 [속성이름=속성값]
: 해당 속성값 가진 태그에만 적용
2. 태그 [속성이름~=속성값]
ex. p[class~="kbs"] => p태그의 클래스명이 kbs / 여러 문자열 중 kbs 있을 때 (공백 기준, 정확히 일치해야 함 ex. kbss X)
3. 태그 [속성이름|=속성값]
ex. p[class|="kbs"] => 태그 클래스명이 kbs / kbs로 시작
4. 태그 [속성이름^=속성값]
: 속성값으로 시작
5. 태그 [속성이름$=속성값]
: 속성값으로 끝남
6. 태그 [속성이름*=속성값]
: 속성값이 포함
- 1
input[type=text]{
background-color: azure;
}
- 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<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{
list-style: none; /* 불렛기호 없앰 */
}
li{
display: inline-block; /* 인라인 배치 & 속성값 변경 가능 */
margin: 10px;
}
li>a{
text-decoration: none; /* 밑줄 없앰 */
color: blue;
}
a[title^="en"]{
background: url(images/us.png) no-repeat left;
padding: 5px 25px; /*상하 좌우*/
}
a[title^="ja"]{
background: url(images/0.png) no-repeat left;
padding: 5px 25px;
}
a[title^="ch"]{
background: url(images/ch.png) no-repeat left;
padding: 5px 25px;
}
</style>
</head>
<body>
<ul>
<li>외국어 서비스 : </li>
<li><a href="#" title="english">영어</a></li>
<li><a href="#" title="japanese">일본어</a></li>
<li><a href="#" title="chinese">중국어</a></li>
</ul>
</body>
|
cs |
- 5
|
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>
img{
width: 200px;
height: 300px
}
img[src$="png"]{
border: 3px solid red;
}
img[src$="jpg"]{
border: 3px solid green;
}
img[src$="gif"]{
border: 3px solid blue;
}
</style>
</head>
<body>
<h2>오늘의 교재</h2>
<img src="images/jajq.png" alt="">
<img src="images/node.jpg" alt="">
<img src="images/ux.gif" alt="">
</body>
|
cs |
가상(=상태) 선택자
<style> 내 순서 중요 (link - visited - hover, focus - active)
가상 클래스 - 가상 요소 순서 (ex. h1:hover::before)
※
가상 클래스 : 실제로 존재하는 요소에 가상으로 클래스를 줌 ex. :link, :hover, :first=child
가상 요소 : 실제로 존재하지 않는 가상의 요소를 만들어 스타일 줌 ex. ::before, ::first-letter
|
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
|
<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>
a:link{ /* 링크 방문 이력 없을 때 */
text-decoration: none; /* 기본값 : 밑줄 */
color: green;
}
a:visited{ /* 링크 방문 후 */
text-decoration: none;
color: red;
}
a:hover, a:focus{ /* 마우스 올렸을 때 //tab키 이동(or 클릭 직후) */
text-decoration: underline;
color: blue;
}
a:active{ /* 마우스 클릭 중 */
text-decoration: none;
color: yellow;
}
</style>
</head>
<body>
<ul>
<li> <a href="#">현재상영작</a>
</li>
<li> <a href="#">상영예정작</a>
</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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<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>
input[type=text]:focus{ /* 클릭 or tab 시 */
background-color: beige;
}
input:disabled{
background-color: #ddd;
border: 1px solid #ccc;
}
p>label{
display: inline-block; /* 입력창 위치, 길이 조정 */
width: 100px;
}
input:checked+span{ /*checked된 input과 인접한 span태그*/
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<form action="">
<p>
<label for="na">이름</label>
<input type="text" id="na" value="김철수" disabled>
</p>
<p>
<label for="tel">전화번호</label>
<input type="text" id="tel">
</p>
<p>
<label for="addr">주소</label>
<input type="text" id="addr">
</p>
<fieldset>
<legend>신청 과목</legend>
<p>방학특강에 신청할 과목 선택 바랍니다</p>
<!-- label 태그 안에 input 태그 넣어 연결 -->
<label><input type="radio" name="subject" value="excel">엑셀</label>
<!-- span 태그 -->
<label><input type="radio" name="subject" value="power"><span>파워포인트</span></label>
<label><input type="radio" name="subject" value="word"><span>워드</span></label>
</fieldset>
</form>
</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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<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{
cursor: pointer; /*커서 손모양으로 변경*/
}
a{
text-decoration: none;
}
a:hover{ /*마우스 올렸을 때만 밑줄*/
text-decoration: underline;
}
p>span{
text-decoration: line-through;
}
.trans1{
text-transform: lowercase;
}
.trans2{
text-transform: uppercase;
}
.trans3{
text-transform: capitalize; /* 앞글자 대문자 */
}
.target2{
letter-spacing: 5px; /* 글자 간격 */
}
.target3{
word-spacing: 2em; /* 어절 간격 */
}
</style>
</head>
<body>
<h2>토마토</h2>
<p>토마토는 비타민 A, C가 풍부한 채소입니다.</p>
<a href="#">직영농장</a>
<p>
<span>정상 가격 : 50,000원</span> ☞ 할인가 : 45,000원
</p>
<ul>
<li class="trans1">HTML</li>
<li class="trans2">css</li>
<li class="trans3">javascript</li>
<li class="trans3">have to study</li>
</ul>
<p class="target1">오늘은 월요일. 스타일 속성과 선택자 공부를 합니다.</p>
<p class="target2">오늘은 월요일. 스타일 속성과 선택자 공부를 합니다.</p>
<p class="target3">오늘은 월요일. 스타일 속성과 선택자 공부를 합니다.</p>
</body>
|
cs |
- text-shadow : 글자 그림자
|
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
|
<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>
h1{
font-size: 3em;
}
.shadow1{
text-shadow: 5px 5px 5px rgba(0,0,0,0.4); /*우 하 번짐 색*/
}
.shadow2{
color: beige;
text-shadow: 5px -5px 5px #000;
}
div{
width: 400px;
height: 200px;
background-color: #000;
}
.shadow3{
text-align: center;
color: #fff;
line-height: 200px; /*줄 간격 or 세로 정렬*/
text-shadow: 0 0 4px #ccc,
0 -5px 4px yellow,
2px -10px 6px orange,
-2px -15px 11px red,
2px -40px 15px firebrick;
}
</style>
</head>
<body>
<h1 class="shadow1">HTML5</h1>
<h1 class="shadow2">HTML5</h1>
<div>
<h1 class="shadow3">불타는 금요일</h1>
</div>
</body>
|
cs |
- white-space : 영역과 텍스트
|
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
|
<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{
width: 400px;
background-color: azure;
}
.nowrap{
white-space: nowrap; /*한줄 (영역 벗어나기 ok)*/
}
.pre{
white-space: pre; /*입력 모양대로 자유롭게 글자 출력 (영역 벗어나기 ok) */
}
.prewrap{
white-space: pre-wrap; /*영역 안(벗어나면 다음 줄) 입력 모양대로 글자 출력*/
}
.preline{
white-space: pre-line; /*영역 안(벗어나면 다음 줄) 입력 모양대로 왼쪽정렬*/
}
</style>
</head>
<body>
<p class="nowrap">예상 강우량은
제주 산지와 경산 동해안에 최고 40mm, 강원 영동과
경상도 내륙, 제주도에 5에서 20, 전라도에 5mm 안팎이고요.</p>
<p class="pre">예상 강우량은
제주 산지와 경산 동해안에 최고 40mm, 강원 영동과
경상도 내륙, 제주도에 5에서 20, 전라도에 5mm 안팎이고요.</p>
<p class="prewrap">예상 강우량은
제주 산지와 경산 동해안에 최고 40mm, 강원 영동과
경상도 내륙, 제주도에 5에서 20, 전라도에 5mm 안팎이고요.</p>
<p class="preline">예상 강우량은
제주 산지와 경산 동해안에 최고 40mm, 강원 영동과
경상도 내륙, 제주도에 5에서 20, 전라도에 5mm 안팎이고요.</p>
</body>
|
cs |
- text-overflow: ellipsis => 영억 넘어갈 때 .. 처리
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<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{
border: 1px solid;
width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /*영역 넘어가면 ... 처리*/
}
</style>
</head>
<body>
<p>예상 강우량은 제주 산지와 경산 동해안에 최고 40mm, 강원 영동과 경상도 내륙, 제주도에 5에서 20, 전라도에 5mm 안팎이고요.</p>
</body>
|
cs |
'Programming > 국비학원' 카테고리의 다른 글
| 220615 - css - 그라데이션, 레이아웃, 테두리 (0) | 2022.06.16 |
|---|---|
| 220614 - css - 선택자(가상, 가상 요소), 문단, 리스트, 배경 스타일 (0) | 2022.06.15 |
| 220610 - css(선택자, Vendor Prefix, 텍스트 스타일) (0) | 2022.06.11 |
| 220609 - html(select, datalist, 멀티미디어, meta, 기타, 시멘틱 구조 태그), CSS(외부/내부/인라인 스타일) (0) | 2022.06.10 |
| 220608 - html (form) (0) | 2022.06.09 |
