선택자
- 가상 클래스 선택자
특정 이벤트나 환경에 맞춰 실제로 존재하는 요소에 가상으로 클래스를 부여해 처리
참고 : https://abcdqbbq.tistory.com/15
|
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
|
<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>
#menu>li:first-child{
color: blueviolet;
}
#menu>li:last-child{
color: cornflowerblue;
}
#menu>li:nth-child(4){ /*(n)번째 자식에 적용*/
color: darkcyan;
}
#menu>li:nth-child(2n+1){ /*수학식 매개변수 대입 가능*/
background-color: yellow;
}
table{
width: 200px;
border-collapse: collapse; /*border 이중선->실선*/
}
td{
padding: 10px;
text-align: center;
}
/* table>tr:nth-child(2n+1){ X => table>tbody>tr => 자식X 후손O
background-color: aqua;
} */
table tr:nth-child(2n+1){
background-color: rgb(189, 235, 189);
}
table tr:nth-child(2n){
background-color: rgb(255, 244, 225);
}
</style>
</head>
<body>
<h2>오늘의 메뉴</h2>
<ul id="menu">
<li>부대찌개</li>
<li>된장찌개</li>
<li>김치찌개</li>
<li>비빔밥</li>
<li>냉면</li>
<li>칼국수</li>
</ul>
<h2>건강에 좋은 음식</h2>
<table border="1">
<tr><td>블루베리</td></tr>
<tr><td>귀리</td></tr>
<tr><td>토마토</td></tr>
<tr><td>시금치</td></tr>
<tr><td>적포도주</td></tr>
<tr><td>견과류</td></tr>
<tr><td>브로콜리</td></tr>
<tr><td>연어</td></tr>
<tr><td>마늘</td></tr>
<tr><td>녹차</td></tr>
</table>
</body>
|
cs |
- 가상 요소 선택자 (::) : 내용 일부만 적용 (inline)
실제로 존재하지 않는 가상의 요소를 만들어 스타일 적용
|
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
|
<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::first-letter { /*요소의 첫 글자*/
font-size: 2em;
color: rgb(126, 195, 255);
}
p::first-line{
background-color: rgb(193, 238, 103);
}
p::selection{ /*블록 선택 시*/
background-color: bisque;
color: grey;
}
h3::before{ /*h3 앞에 적용*/
content: "여름";
color: rgb(255, 138, 138);
}
h3::after{
content: " - 7월, 8월";
color: cornflowerblue;
}
</style>
</head>
<body>
<h2>오늘의 뉴스</h2>
<p>오늘 서울 등 수도권 지역은 하늘만 흐린 가운데, 다소 더운 날씨가 이어지고 있습니다.
반면 수도권을 제외한 그 밖의 지방은 산발적인 비가 내리고 있는데요.
다만 누리호 이송과 발사가 하루씩 연기된 고흥 나로 우주센터 주변은 현재 비가 소강상태를 보이고 있고요.</p>
<h3>감기 조심하세요</h3>
</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
|
<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>
/*only-child => 형제X 유일 자식일 때
only-of-type => 형제 있더라도 해당 타입 하나 있을 때 */
p:first-of-type{ /*첫번째 형제*/
color: red;
}
/* p:first-child{ => 부모-자식,후손 관계만
color: blueviolet;
} */
p:nth-of-type(2n+1) { /*형제 간, n번째*/
background-color: beige;
}
</style>
</head>
<body>
<h2>오늘은 화요일</h2>
<p>CSS3 선택자 공부</p>
<p>CSS3 일반속성 공부</p>
<p>CSS3 레이아웃 속성</p>
<p>기본 홈페이지 제작</p>
<p>응용 홈페이지 제작</p>
</body>
|
cs |
문단 스타일
1. 블록
사용 가능한 최대 너비 => {width: 100%; height: auto;}
width, height로 크기 조정 가능 / padding, margin으로 상하좌우 여백 조정 가능 (조정하더라도 html 검사 시 한 줄 모두 공간 차지하고 있음)
여러개의 블록 요소들이 있을때, 수직으로 쌓임 (한 줄에 하나의 블록 요소만 위치할 수 있음) => 레이아웃 디자인에 유용
종류: div, h1, p
2. 인라인
너비와 높이를 내부 컨텐츠 크기만큼 지정 => {width: auto; height: auto;}
width, height로 크기 조정 불가 / padding, margin으로 좌우만 여백 조정 가능
여러개의 인라인 요소가 있을때, 수평으로 쌓임 => Text 작성에 유용
종류: span, img
3. 인라인-블록
너비, 높이 내부 컨텐츠 크기만큼 설정 (인라인) & width와 height로 너비, 높이, 상하좌우 여백 조정 가능 (블록)
여러개의 인라인블록 요소가 있을때, 수평으로 쌓임 (인라인)
css {display: "inline-block";}으로 스타일 적용
- text 스타일
|
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>
p{
width: 500px;
border: 1px solid;
}
.center{
text-align: center; /*블록 레벨에서만 사용 ex. p, span, ..*/
}
.left{
text-align: left;
}
.right{
text-align: right;
}
.acen{
display: block;
text-align: center;
text-indent: 16px;
}
.just{
padding: 10px;
text-align: justify; /*양쪽정렬*/
text-indent: 16px;
}
</style>
</head>
<body>
<p class="center">대한민국</p>
<p class="left">일본</p>
<p class="right">중국</p>
<a class="acen" href="http://kbs.co.kr">한국방송공사</a>
<p class="just">오늘 서울 등 수도권 지역은 하늘만 흐린 가운데, 다소 더운 날씨가 이어지고 있습니다.
반면 수도권을 제외한 그 밖의 지방은 산발적인 비가 내리고 있는데요.
다만 누리호 이송과 발사가 하루씩 연기된 고흥 나로 우주센터 주변은 현재 비가 소강상태를 보이고 있고요.</p>
<h3>감기 조심하세요</h3>
</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
|
<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.valign{
border: 1px solid;
}
.valign img{
vertical-align: top; /*수직 정렬*/
}
#box {
width: 200px;
border: 1px solid rgb(168, 203, 255);
}
#box p {
word-wrap: break-word; /*영역 벗어나면 다음 줄로 보냄 (왼쪽 정렬)*/
}
</style>
</head>
<body>
<p class="valign">
꼬마자동차
<img src="images/car_purple.jpg" alt="">
</p>
<div id="box">
<p>이름 : 김철수</p>
<p>이메일 : kim@naver.com</p>
</div>
</body>
|
cs |
리스트 스타일
- list-style
|
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>
#menu{
list-style-image: url("images/19s.png");
}
#menu ul{
list-style: disc;
}
</style>
</head>
<body>
<h2>오늘의 메뉴</h2>
<ul id="menu">
<li>부대찌개</li>
<li>된장찌개</li>
<li>김치찌개</li>
<li>비빔밥</li>
<li>냉면</li>
<ul>
<li>비빔냉면</li>
<li>물냉면</li>
<li>물회냉면</li>
</ul>
<li>칼국수</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
49
|
<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>list 스타일</title>
<style>
#menu{
background-color: rgb(89, 89, 206);
overflow: hidden;
text-align:center;
}
#menu>li{
list-style: none;
/* float: left; */
display: inline-block; /*블록->인라인블록*/
background-color: rgb(89, 89, 206);
padding: 15px;
}
#menu>li:hover{
background-color: rgb(178, 178, 223);
}
#menu a{ /*menu>li>a*/
cursor: pointer;
color: white;
text-decoration: none;
}
ol{
list-style-type: hangul;
list-style-position: inside; /*=> 문단 안쪽에 마커 위치 //기본값 : outside*/
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">회사소개</a></li> <!-- li : 블록 -->
<li><a href="#">제품소개</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">커뮤니티</a></li>
<li><a href="#">자료실</a></li>
</ul>
<ol>
<li>html5</li>
<li>css3</li>
<li>javascript</li>
<li>jQuery</li>
<li>nodejs</li>
<li>react</li>
</ol>
</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>
body{
background-color: rgb(185, 236, 236);
}
#box{
width: 90%; /*전체 픽셀의 n%*/
border: 1px solid;
padding: 10px;
background-color: rgba(255, 255, 255, 0.747);
}
</style>
</head>
<body>
<div id="box">
<h2>오늘의 뉴스</h2>
<p>우선 현재는 충청 이남 지역을 중심으로 비구름 자리하고 있는데요, 오늘 곳에 따라 5에서 최고 40mm의 비가 내리겠고요, 서울에도 가끔 빗방울이 떨어지겠습니다.</p>
<p>현재 서울의 기온 19.7도로 출발하고 있고요, 낮이 되면 서울의 기온 29도 남부 지방으로 부산의 기온 21도에 머물면서 어제보다 더욱 선선하겠습니다.</p>
</div>
</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
|
<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/muffin.png); */
/* background-repeat: repeat-x; => x축으로(수평) 반복 */
/* background-repeat: no-repeat; */
/* background-position: 150px 300px; => x y좌표 */
/* background-position: 50% top; => 가로% 맨위*/
/* background-position: 50% 50%; 세로 : 텍스트 높이 기준 */
/* background-attachment: fixed; 세로 : 화면 기준으로 변경 */
background: url(images/muffin.png) no-repeat 50% 50% fixed;
/*color url repeat position attachment*/ }
</style>
</head>
<body>
<div id="box">
<h2>오늘의 뉴스</h2>
<p>우선 현재는 충청 이남 지역을 중심으로 비구름 자리하고 있는데요, 오늘 곳에 따라 5에서 최고 40mm의 비가 내리겠고요, 서울에도 가끔 빗방울이 떨어지겠습니다.</p>
<p>현재 서울의 기온 19.7도로 출발하고 있고요, 낮이 되면 서울의 기온 29도 남부 지방으로 부산의 기온 21도에 머물면서 어제보다 더욱 선선하겠습니다.</p>
<p>우선 현재는 충청 이남 지역을 중심으로 비구름 자리하고 있는데요, 오늘 곳에 따라 5에서 최고 40mm의 비가 내리겠고요, 서울에도 가끔 빗방울이 떨어지겠습니다.</p>
<p>현재 서울의 기온 19.7도로 출발하고 있고요, 낮이 되면 서울의 기온 29도 남부 지방으로 부산의 기온 21도에 머물면서 어제보다 더욱 선선하겠습니다.</p>
<p>우선 현재는 충청 이남 지역을 중심으로 비구름 자리하고 있는데요, 오늘 곳에 따라 5에서 최고 40mm의 비가 내리겠고요, 서울에도 가끔 빗방울이 떨어지겠습니다.</p>
<p>현재 서울의 기온 19.7도로 출발하고 있고요, 낮이 되면 서울의 기온 29도 남부 지방으로 부산의 기온 21도에 머물면서 어제보다 더욱 선선하겠습니다.</p>
<p>우선 현재는 충청 이남 지역을 중심으로 비구름 자리하고 있는데요, 오늘 곳에 따라 5에서 최고 40mm의 비가 내리겠고요, 서울에도 가끔 빗방울이 떨어지겠습니다.</p>
<p>현재 서울의 기온 19.7도로 출발하고 있고요, 낮이 되면 서울의 기온 29도 남부 지방으로 부산의 기온 21도에 머물면서 어제보다 더욱 선선하겠습니다.</p>
</div>
</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
|
<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>
#box{
width: 500px;
height: 500px;
border: 2px solid red;
background: url(images/Penguins.jpg) no-repeat; /*norepeat 추가 위해 background 사용*/
background-size: 100%; /*넓은 길이 기준*/
/*cover: 가로세로 중 짧은 쪽 기준으로 하여 이미지 부분 잘림
contain: 이미지 전체 표시(=100%) auto: 영역 우선하여 이미지 부분 잘림*/ }
</style>
</head>
<body>
<div id="box">
</div>
</body>
|
cs |
- 이미지 겹치기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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/BackgroundFront.png)
, url(images/BackgroundBack.png); /*1,2 => 1이 앞 레이어*/
background-repeat: no-repeat;
background-size: 100%;
}
</style>
</head>
<body>
</body>
|
cs |
- 배경이미지 다수 배치
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<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>
#box{
width: 600px;
height: 400px;
border: 1px solid;
background: url(images/송해.jpg) no-repeat 0 0,
url(images/호동.jpg) no-repeat 100% 0,
url(images/형돈.jpg) no-repeat 0 100%,
url(images/웃는사람.png) no-repeat 100% 100%,
url(images/x.jpg) no-repeat 50% 50%;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
|
cs |
- background-clip (배경 자를 위치 결정), background-origin (배경 위치 시작점 결정)
참고 : https://moo-you.tistory.com/428
background-clip background-origin 차이
background-clip과 background-origin은 언뜻 비슷해 보입니다. 둘 다 border-box, padding-box, content-box 이 세가지 옵션을 가지고 있고 경우에 따라서는 결과값이 같게 나타나기 때문에 차이가 없어 보일 수..
moo-you.tistory.com
|
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>
#box{
width: 300px;
height: 300px;
border: 1px solid;
padding: 30px;
/* background-color: cornflowerblue; */
background-image: url(images/1.png);
background-clip: content-box; /*영역 내 padding 차집합 색칠*/
/*border-box: 기본값, 영역 전체 색칠 //padding-box: 영역 전체 색칠(border선 제외)*/ background-origin: content-box; /*보정*/
}
</style>
</head>
<body>
<div id="box">
<p>오후나 밤까지 흐린 날씨 속에 산발적인 빗방울 정도만 떨어질 가능성 있습니다. 누리호 이송이 예정된 내일 고흥 지역은 하늘만 흐린 날씨가 예상됩니다. 바람도 초속 1~3m 정도로 오늘보다 약해질 것으로 보입니다. 발사 예정일인 모레는 점차 맑은 날씨를 회복하면서, 구름 사이로 하늘이 드러나겠고, 고층의 다소 강한 바람도 지금보다 더 약해질 것으로 전망됩니다. </p>
</div>
</body>
|
cs |
- linear-gradient : 그라데이션
|
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>
#box{
height: 300px; /*width: 기본값(화면 전체)*/
background: rgb(255, 150, 150) ; /*그라데이션 지원 X 국가에서는 단일색 배경*/
/* background: -webkit-linear-gradient(45deg, rgb(255, 150, 150), #fff); => vendor prefix
background: -moz-linear-gradient(45deg, rgb(255, 150, 150), #fff);
background: -o-linear-gradient(45deg, rgb(255, 150, 150), #fff);
background: linear-gradient(45deg, rgb(255, 150, 150), #fff); */
background: -webkit-linear-gradient(left top, rgb(150, 166, 255), #fff);
background: -moz-linear-gradient(right bottom, rgb(150, 166, 255), #fff);
background: -o-linear-gradient(right bottom, rgb(150, 166, 255), #fff);
background: linear-gradient(to right bottom, rgb(150, 166, 255), #fff);
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
|
cs |
'Programming > 국비학원' 카테고리의 다른 글
| 220616 - css (box-sizing, float, column, transition, transform, animation) (0) | 2022.06.17 |
|---|---|
| 220615 - css - 그라데이션, 레이아웃, 테두리 (0) | 2022.06.16 |
| 220613 - css (텍스트 스타일, 선택자 - 형제, 속성, 가상 ) (0) | 2022.06.14 |
| 220610 - css(선택자, Vendor Prefix, 텍스트 스타일) (0) | 2022.06.11 |
| 220609 - html(select, datalist, 멀티미디어, meta, 기타, 시멘틱 구조 태그), CSS(외부/내부/인라인 스타일) (0) | 2022.06.10 |
