CSS 요약 정리

Hyunsu·2023년 4월 25일

CSS

Today I Learned

목록 보기

34/37

대학교 때 전선으로 처음 들었던 html 과 css 를 다시 한 번 빠르게 복습하려고 한다.

당시 php 와 mysql 등을 이용해서 쇼핑몰 홈페이지 제작 팀플을 진행했었는데 프론트부터 백엔드까지 하나하나 만들어나가는 과정이 너무 재밌었던 기억이 난다.

아마 그 때 프로젝트를 진행하면서 웹 개발자를 하면 재미있을 것 같다고 생각했던 것 같다. 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>