그라데이션
- radial-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
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>
#box{
height: 300px; /*width: 기본값(화면 전체)*/
background: rgb(255, 150, 150) ; /*그라데이션 지원 X 국가에서는 단일색 배경*/
/* background: -webkit-linear-gradient(45deg, rgb(255, 150, 150), #fff);
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); */
background: radial-gradient(white,rgb(255, 255, 175),rgb(255, 166, 166));
background: -webkit-radial-gradient(white,rgb(255, 255, 175),rgb(255, 166, 166));;
background: -moz-radial-gradient(white,rgb(255, 255, 175),rgb(255, 166, 166));;
background: -o-radial-gradient(white,rgb(255, 255, 175),rgb(255, 166, 166));;
}
</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
17
18
19
|
<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{
padding: 100px;
background-image: url(images/boy.png), url(images/bg5.png),
linear-gradient(to right,rgb(255, 255, 255), rgb(199, 253, 200,0.5));
background-repeat: no-repeat,no-repeat,no-repeat; /*배경이미지 3 설정*/
background-size: 100px, 100px, 100%;
background-position: left bottom, 97% 15%, left;
}
</style>
</head>
<body>
<p>다음주에는 실전으로 홈페이지를 제작합니다</p>
</body>
|
cs |
테두리 관련
- border-style, border-radius : 테두리 스타일, 테두리 깎기
|
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
<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: 200px;
height: 100px;
border-width: 10px;
/*두께- 4개:위에서부터 시계방향 2개:상하 좌우 3개:상 좌우 하*/
border-style: solid;
border-color: rgb(255, 150, 111);
margin: 20px;
display: inline-block;
}
.box1{
border-style: dotted;
}
.box2{
border-style: groove;
}
.box3{
border-style: ridge;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</body>
<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{ /*블록: 너비 좁아도 한 줄 영역 차지*/
width: 200px;
border-top: 5px solid rgb(171, 171, 255); /*윗줄*/
border-bottom: 4px solid rgb(171, 171, 255); /*아랫줄*/
padding-bottom: 5px;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>수요일입니다</h1>
<span>대한민국</span>
</body>
<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>
.title{
width: 200px;
border: 1px solid blue;
border-radius: 10px; /*둥근 모서리*/
}
#box1{
width: 200px;
height: 200px;
border: 1px solid;
border-radius: 50%;
/*=> 원 4개: 왼쪽위에서부터 시계방향 3개: 왼쪽위에서부터 3, 마지막은 맞은편과 동일 2개: 좌상우하, 우상좌하 */ /*border-top-left-radius*/
display: inline-block;
margin: 30px;
background: url(images/girl.jpg) no-repeat;
}
#box2{
width: 200px;
height: 100px;
border: 1px solid;
display: inline-block;
margin: 30px;
background-color: beige;
border-radius: 100px 100px 0 0;
}
#box3{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid;
display: inline-block;
margin: 30px;
background-color: beige;
border-radius: 100px 0px 0 0;
}
#box4{
width: 300px;
height: 200px;
border: 1px solid;
margin: 30px;
background-color: rgb(185, 185, 255);
border-radius: 10px 80px / 80px 10px;
/* x 좌표 clockwise / y좌표 clockwise */ }
#box4 h1 {
color: white;
text-align: center;
line-height: 150px;
}
</style>
</head>
<body>
<h1 class="title">수요일입니다</h1>
<span>대한민국</span>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"><h1>즐거운 식사하세요</h1></div>
</body>
|
cs |
- box-shadow, outline : 박스 테두리, 외곽 테두리
|
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>
.box{
width: 200px;
height: 100px;
display: inline-block;
margin: 15px;
border: 2px solid;
border-radius: 20px;
}
.box1{
box-shadow: 5px 5px 15px 5px gray; /*우 하 흐림 번짐 색상*/
}
.box2{
box-shadow: 10px -10px 5px 0 rgba(0, 0, 0, 0.5);
}
.box3{
outline: 5px solid rgb(209, 162, 255); /*border 외곽테두리*/
outline-offset: 2px; /*border과의 거리*/
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></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
|
<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: 200px;
height: 100px;
background-color: rgb(220, 255, 220);
padding: 10px;
}
.box1{
margin: 30px 50px 10px 20px; /*시계방향*/
}
.box2{
margin: 30px 50px; /*상하 좌우*/
}
.box3{
margin: 30px 50px 100px; /*상 우 하 좌(=우)*/
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</body>
|
cs |
레이아웃
요소 너비 = width+2(border+padding)
요소 높이 = height+2(border+padding))
- 레벨 요소, 요소 너비/높이
|
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>
.target{
display: inline-block;
/*=> 인라인&크기 조정 가능 inline: 블록->인라인 none: 화면에서 완전히 감춤*/
width: 200px;
height: 100px;
background-color: rgb(255, 255, 177);
}
#box {
visibility: hidden; /*요소 숨김, 영역 유지 cf. display: none*/
width: 300px; /*요소 너비 = width+2border+2padding=324px*/
height: 300px;
background-color: azure;
border: 2px solid rgb(176, 255, 238);
padding: 10px;
}
img{
opacity: 0.1;
transition: 0.5s;
}
img:hover{
opacity: 1; /*0: 투명*/
}
</style>
</head>
<body>
<span>대한민국</span>
<p class="target">오늘은 수요일입니다</p>
<span>우리나라</span>
<div id="box">나의 크기는 얼마?</div> <!-- div : 블록 -->
<p>지금은 레이아웃 속성을 배우는 중</p>
<img src="images/Penguins.jpg" alt="" width="300">
</body>
|
cs |
- float => 홈페이지 메뉴에 사용 -> 상위 요소에 overflow:hidden 적용 or 다음 요소에 clear:both 적용
|
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>
#menu {
overflow: hidden; /*1. float로 ul 벗어난 li 감싸 높이 부여*/
}
#menu li{
margin: 10px;
list-style: none;
float: left; /*ul에서 하나씩 꺼내짐 => display:inline-block과 유사 효과*/
}
#menu a{
text-decoration: none;
color: black;
padding: 10px;
background-color: rgb(123, 148, 202);
color: rgb(255, 255, 255);
border-radius: 10px;
}
#menu a:hover{
background-color: rgb(215, 230, 230);
}
p{
/* clear: both; => 2. float 해제 (못 나가게 함) */
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">회사소개</a></li>
<li><a href="#">제품소개</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">커뮤니티</a></li>
<li><a href="#">자료실</a></li>
</ul>
<p>아랫집 단락</p> <!-- float로 ul 빔 (높이 0) -> 위로 올라옴 -> overflow로 방어 -->
</body>
|
cs |
- ex. pet_box
|
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
<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-family: "맑은 고딕", "고딕", "굴림"; /*1,2,3순위 (글꼴 없을 경우 대비)*/
}
header{
width: 80%;
margin-left: auto; /*가운데*/
margin-right: auto;
background-color: rgb(121, 121, 231);
padding: 10px;
overflow: hidden;
}
header h1{ /*header 내에서 h1이 왼쪽 40%, nav이 오른쪽 60% 차지*/
width: 40%;
float: left;
color: #fff;
}
nav{
width: 60%;
float: right;
}
nav ul{
list-style: none;
}
nav ul li {
float: left; /*nav 내에서 왼쪽 차지*/
margin: 15px;
}
nav ul li a{
text-decoration: none;
color: white;
}
section{
width: 80%;
margin-left: auto;
margin-right: auto;
border: 5px solid #333;
padding: 5px;
}
article{
width: 90%;
margin: 20px 10px;
padding: 20px;
}
article h2{
font-size: 1.2em;
background-image: url(images/bg.png);
background-repeat: no-repeat;
padding-left: 30px;
background-position: left center;
}
article dt{
font-weight: bold;
color: purple;
}
#pet1 {
border: 1px solid;
border-radius: 10px;
}
#pet2 {
border: 1px dotted;
border-radius: 20px;
}
#pet3 {
border: 2px double green;
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
}
aside{
width: 80%;
margin-left: auto;
margin-right: auto;
background-color: bisque;
padding: 10px;
}
aside h2 {
font-size: 1.2em;
}
footer{
width: 80%;
margin-left: auto;
margin-right: auto;
padding: 10px;
background-color: #333;
color: white;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>애완견 종류</h1>
<nav> <!-- 메뉴 -->
<ul>
<li><a href="#">애완견 종류</a></li>
<li><a href="#">입양하기</a></li>
<li><a href="#">건강 돌보기</a></li>
<li><a href="#">더불어 살기</a></li>
</ul>
</nav>
</header>
<section> <!-- 콘텐츠 내용 -->
<article id="pet1"> <!-- 섹션 상세 설명 -->
<h2>활달한 강아지</h2>
<dl> <!-- 설명 목록 -->
<dt>요크셔테리어</dt> <!-- description title --> <!-- d data -->
<dd>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 겁내는 일이 없어 좋은 번견이고 우리나라 최고의의 가정견으로 자리 잡고 있다.</dd>
<dt>말티즈</dt>
<dd>애정이 많고, 충실하며 활발한 성격을 소유하고있다. 이 종은 1급 가정견으로 요크셔테리어와 함께 우리나라 최고의 가정견으로 자리잡고 있다.</dd>
<dt>포메라니안</dt>
<dd>활기차고 명랑한 개로 유명하고, 걷는 모습이 우아하다.충실하고 우호적인 성격이 가장 먼저 거론된다.</dd> <!-- d data -->
<dt>골드 리트리버</dt>
<dd>이 견종은 충성심이 강하고 성격이 활달하여 어린아이나 여성이 상대하기에 적합한 견종이다.참을성 또한 강하여 현재는실내에서도 많이 길러지고 있다.</dd>
</dl>
</article>
<article id="pet2">
<h2>온순한 강아지</h2>
<dl>
<dt>쉬즈</dt>
<dd> 얼굴에서 풍기는 모습처럼 온순, 쉽게 친숙해지고 우호적이며,어린아이나 여성들이 기르기에 적합한 견종이다.</dd>
<dt>퍼그</dt>
<dd>매우 사려가 깊고 사랑스러운 견종이며 그다지 손질이 필요하지 않고 식사량에 비해 많은 운동량이 필요하지 않다.</dd>
<dt>래브라도 리트리버</dt>
<dd>침착하고 영리하여 어린이들을 안심하고 맡길 수 있다. 사람을 즐겁게 해주려는 성질이 있다 공을 가지고 노는 것을 가장 좋아한다. 현재 맹인 안내견과 마약견으로 사용중이다. 온순한 강아지를 좋아하는 분에게는 적합한 견종이다.</dd>
</dl>
</article>
<article id="pet3">
<h2>복종적인 강아지</h2>
<dl>
<dt>미니어쳐핀셔</dt>
<dd>경계심이 강하고 영리하며 작은 몸집에 비해 매우 용감하다. 주인에게 매우 복종적이며 작은 몸집에 보디가드 역할을 충실히 수행한다.</dd>
<dt>푸들 </dt>
<dd>사납진 않으나, 상당히 복종적이며, 지능지수가 애완견종 중 가장 뛰어나다.</dd>
<dt>폭스테리어</dt>
<dd>가정에서 키우기에 적합한 품종이다. 보호본능이 강하고 정이 많다. 하지만 사냥을 하던 본능이 조금은 남아있어 사나운 면이 있다. 이종을 좋은 품종으로 기르기 위해서는 어릴 때부터 엄한 훈련이 필요하기도 하다.</dd>
</dl>
</article>
</section>
<aside> <!-- 사이드 (보조 내용) -->
<h2>건강한 강아지는</h2>
<ul>
<li>코가 젖어있고 눈꼽이 없어야 합니다.</li>
<li>털에 윤기가 있는 것을 골라야 합니다.</li>
<li>입에서 고약한 냄새가 나면 병이 있다는 증거입니다.</li>
<li>가장 활발하게 움직이는 녀석을 고르는게 좋습니다.</li>
<li>강아지들 중에서 적당한 체구를 유지한 강아지가 좋습니다.</li>
</ul>
</aside>
<footer>
<p>Copyright 2022 pet.com</p>
</footer>
</body>
|
cs |
'Programming > 국비학원' 카테고리의 다른 글
| 220617 - css (position, table 관련, filter, transition 문제), 홈페이지 구현 (0) | 2022.06.18 |
|---|---|
| 220616 - css (box-sizing, float, column, transition, transform, animation) (0) | 2022.06.17 |
| 220614 - css - 선택자(가상, 가상 요소), 문단, 리스트, 배경 스타일 (0) | 2022.06.15 |
| 220613 - css (텍스트 스타일, 선택자 - 형제, 속성, 가상 ) (0) | 2022.06.14 |
| 220610 - css(선택자, Vendor Prefix, 텍스트 스타일) (0) | 2022.06.11 |
