css태그정리_210330(화)
CSS
스타일과 스타일 시트
<style></style>
스타일 형식
1. head에 하는 방법
p{}
선택자: {와} 사이에 정의한 스타일 규칙이 적용될 대상.
같은 태그들 전체에 스타일을 줌.
*{} = 전체선택자
태그{} = 태그선택자
#id이름{} = "#" id 선택자
.class이름{} = "." class선택자
태그,태그: 그룹선택자
id선택자와 class 선택자 구분
(1)공통점
요소의 특정 부분에만
(2)차이점
class: 문서안에서 여러번 반복
id: 문서안에서 한번만 사용
margin: 전체 바깥여백(위아래오른쪽왼쪽 따로 설정가능)
font size
-px 크기고정
em 배율(2배,3배)
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>Document</title>
<style>
p {
text-align: center;
}
/* 순서없는 목록에 스타일 적용*/
ul {
list-style-type: none;
/* 불릿없앰 */
}
label.title {
font-weight: bold;
width: 80px;
}
fieldset legend {
color: indigo;
font-size: 18px;
}
fieldset {
margin: 10px;
/* 전체여백 */
margin: 15px 10px;
/* 바깥여백, 15px 위아래여백, 10px 오른쪽왼쪽여백 */
margin: 5px 10px 15px 20px;
/* 위,오른쪽,아래,왼쪽 여백순 */
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
|
cs |
캐스캐이딩 스타일 시트(css)
원칙 1: 스타일 우선 순위
인라인 스타일: 해당태그만 적용되는 스타일
id스타일: 지정한 부분만.
순차적으로 스타일이 적용
ex)
body{ color = blue} 문서 전체가 blue
h1{color = blone} h1만 blone으로 다시 변경
원칙 2:스타일 상속
부모요소에 스타일 속성들이 자식요소로 전달됨.
(하지만 배경색은 상속되지 않는다. 전체색을 바꿔서 그 색으로 보인다해도 실제로 자식태그들의 배경색이 바뀐게 아님.)
웹 브라우저들을 같이 호환해서 사용하는 방법
접두사를 붙인다.
-webkit
-moz
-o
-ms
|
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
|
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="js/prefixfree.min.js"></script>
<style>
/*웹폰트 링크 연결*/
@import url('https://fonts.googleapis.com/css2?family=Mukta&display=swap');
/* @font-face {
font-family: 'Mukta', sans-serif;
src=local("'Mukta', sans-serif"),
url('Mukta', sans-serif)
} */
* {
font-family: 'Mukta', sans-serif;
}
.box {
position: absolute;
/*위치고정*/
top: 150px;
left: 50px;
height: 70px;
border: 2px solid green;
width: 100px;
height: 100px;
}
.box:hover {
/* -webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg); */
transform: rotate(15deg);
}
.menu_list ul li {
display: inline;
border: 1px solid blue;
margin: 5px;
}
</style>
</head>
<body>
<div>
<div class="box">Mouse Over</div>
<div class="menu_list">
<ul>
<li>애완견종류</li>
<li>예방접종</li>
<li>건강돌보기</li>
</ul>
</div>
</div>
</body>
</html>
|
cs |
border 가장자리 속성
border-width
:가장자리 두께
{1px} 1개면 전체
{1px,2px} 2개면 위아래, 오른쪽왼쪽 묶어서
{1px,2px,3px,4px} 4개면 위 오른쪽 아래 왼쪽 순서
border-radius
:가장자리 둥그렇게
top, light, under, left 따로 가능.
box-shadow
:그림자 효과
background 배경이미지 속성
background -size 속성
배경이미지 크기조정
:auto 원본크기
:contain 가로맞춤
:cover 전체맞춤이지만 가운데 맞춤은 안되어있음
:100% 100% 퍼센트, 전체맞춤 + 가운데맞춤
background-position(background 속성에서)
:수평 수직
수평:right left 크기지정(px등)
수직:center, top, bottom
margin padding 안쪽 바깥쪽 여백
margin:바깥여백
padding:안쪽여백
text속성
1. text-decoration 밑줄
:none 밑줄이 없다.
:underline 밑줄을 긋는다.
2. text-transform 소,대문자 변경
3. letter-space 글자와 글자사이의 공백
4. text-align 텍스트 정렬 방법
5. text-jusify 글자들이 양쪽 끝에 맞춰 정렬하여 간격을 조절하는 방법
6. text-indent 문단의 첫글자 들여쓰기(글자를 감출 수도 있다.)
7. text-overflow 긴 글자 텍스트를 간추려 표시
:clip 잘라버림
:ellipsis ...으로 요약
플렉스 박스 레이아웃과 기본 속성들
그리드 레이아웃을 기본으로, 플렉스 박스를 원하는 위치에 배치하는 것.
여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있음.
1. display 속성
:flex 박스레벨 요소로 정의
:inline-flex 한줄로 정의
2. flex-direction 플렉스 항목 배티 방향 지정
:row 가로로
:col 세로로
3. flex-wrap 한줄 또는 여러줄로 배치
flex-flow 배치 방향과 여러 줄 배치를 한꺼번에 저장.
(flex-wrap 대신 사용 가능)
<플렉스 방향> <줄배치>
order 박스의 숫자를 바꿀 수 있다.
4. flex: 1 1 0;
<배로 늘리거나><배로 줄이거나><기본값0, auto등>
5. flex-start: 주축을 시작점으로 배치