html 과 css 를 빠르게 복습하려고 한다.
css 요약 정리를 해보자 📚
📝 목차
- 선택자
- 단위
- 기본 속성
- 애니메이션
- 버튼 만들기
1. 선택자
선택자 적용은 다음과 같다.
/* 아이디에 스타일 적용 */
#one {
color: blue;
}
/* div 태그 안의 p 태그에 스타일 적용 */
div p {
color: #0000ff;
}
/* 전체에 스타일 적용 */
* {
font-size: 10px;
}
/* 클래스에 스타일 적용 */
.one {
font-weight: 900;
}2. 단위
단위 종류는 다음과 같다.
px : 고정 크기 단위 픽셀
em : 글꼴을 상대적으로 표현하는 단위로 부모의 크기에 등배단위 처리
rem : root element 인 html 태그 기준으로 등배단위 처리
% : 부모요소가 갖고 있는 크기에 % 처리
vw : 창 사이즈인 뷰포트의 가로폭 기준으로 처리
vh : 창 사이즈인 뷰포트의 세로폭 기준으로 처리3. 기본 속성
기본 속성은 다음과 같다.
/* 테두리 설정 */
border: 1px solid black;
/* 픽셀 사이즈 고정 */
box-sizing: border-box;
/* 상하좌우 안쪽 여백 설정 */
padding: 10px;
/* 상하좌우 바깥쪽 여백 설정 */
margin: 100px;
/* 폰트 설정 */
font-family: 'Dancing Script', cursive;4. 애니메이션
애니메이션 적용 방법은 다음과 같다.
@keyframes 애니 {
50% {
transform: translate(200px, 0);
}
100% {
transfrom: translate(200px, 200px);
}
}
div {
background: red;
width: 100px;
height: 100px;
animation: 애니 2s;
transition: all 1s;
}
div:hover {
background: dodgerblue;
width: 200px;
height: 200px;
}5. 버튼 만들기
CSS 를 활용해서 다음과 같이 버튼을 만들 수 있다.
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
border: 4px solid palevioletred;
border-radius: 4px; /* 모서리 둥글게 */
padding: 30px 60px; /* 상하 30 좌우 60 */
background: none;
color: palevioletred;
font-size: 32px;
position: relative; /* 기준점 이동 */
overflow: hidden; /* 내용 초과 시 숨김 */
cursor: pointer; /* 커서를 올렸을 때 손모양 아이콘 */
transition: all 0.3s;
}
.btn:hover {
color: white;
border: 4px solid firebrick;
}
</style>
</head>
<body>
<button class="btn">Click</button>
</body>
</html>Reference
현수의 개발 저장소