목표
5회차: 23/02/09 14:00~18:00
계획: CSS 기본 정리 (2)
목적: React 사용을 위함
방향: CSS의 기본 문법을 정리
결과
기본 문법
글자 색
<span class="red">빨강</span>
<span class="orange">주황</span>
<span class="yellow">노랑</span> .red {
color: #F23030;
}
.orange {
color: #F28705;
}
.yellow {
color: #F2CB05;
}글자 크기
<span class="large">크게</span>
<span class="medium">중간</span>
<span class="small">작게</span> .large {
font-size: 24px;
}
.medium {
font-size: 16px;
}
.small {
font-size: 8px;
}글꼴
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<p id="with-poppins">Poppins 있는 노토 산스 케이알</p>
<p id="without-poppins">Poppins 없는 노토 산스 케이알</p>
</body>
</html> #with-poppins {
font-family: Poppins, "Noto Sans KR", sans-serif;
}
#without-poppins {
font-family: "Noto Sans KR", sans-serif;
}- font-family는 웹 브라우저가 font를 차례대로 확인하면서 적용 가능한 글꼴을 적용
글짜 굵기
<span class="bold">굵게</span>
<span class="regular">중간</span>
<span class="light">얇게</span> .bold {
font-weight: 600;
}
.regular {
font-weight: 400;
}
.light {
font-weight: 200;
}줄 높이
<p class="loose">
넓게<br>
넓게<br>
넓게
</p>
<p class="regular">
보통<br>
보통<br>
보통
</p>
<p class="tight">
좁게<br>
좁게<br>
좁게
</p> .loose {
font-size: 16px;
line-height: 1.7; /* 16px * 1.7 = 27.2px */
}
.regular {
font-size: 16px;
line-height: 1.5; /* 16px * 1.5 = 24px */
}
.tight {
font-size: 16px;
line-height: 1; /* 16px * 1 = 16px */
}- line height는 글짜 크기에 상대적(비례)으로 적용
텍스트 꾸미기
<a href="https://naver.com">
링크
</a>
<br>
<a class="none" href="https://naver.com">
밑줄 없는 링크
</a>
<br>
<span class="underline">
밑줄
</span>
<br>
<span class="line-through">
취소선
</span>.none {
text-decoration: none;
}
.underline {
text-decoration: underline;
}
.line-through {
text-decoration: line-through;
}- 밑줄 -> underline
- 취소선 -> line-through
배경 이미지
background-image: url('flowers.png');background-image:
url('a.png'), /* 제일 위에 보이는 이미지 */
url('b.png'),
url('c.png');- 배경 이미지는 여러 개 넣을 수 있음(위에서부터 쌓임)
배경 위치
background-position: top; /* 위 */
background-position: right; /* 오른쪽 */
background-position: bottom; /* 아래 */
background-position: left; /* 왼쪽 */
background-position: left top; /* 왼쪽 위 (지정하지 않았을 때 기본값) */
background-position: center;- default 값은 left top
배경 반복
background-repeat: repeat; /* 반복하기 (지정하지 않았을 때 기본값) */
background-repeat: no-repeat; /* 반복 안 함 */- default 값은 repeat
배경 크기
background-size: cover; /* 비율 유지하면서 꽉 차게. 이미지 잘릴 수 있음 */
background-size: contain; /* 비율 유지하면서 최대한 크게. 이지미 잘리지 않음 */
background-size: 40px 30px; /* 가로 40px 세로 30px */그라디언트
background-image: linear-gradient(#000000, #ffffff);background-image:
linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));- default 방향 각도는 180도(위에서 아래로)
- CSS Gradient Generator에서 Gradient 코드를 얻을 수 있음
그림자
box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6);
/*
가로: 5px
세로: 10px
흐린 정도(Blur): 15px
퍼지는 정도(Spread): 8px
색상: rgba(0, 0, 0, 0.6)
*/불투명도
box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6);
/*
가로: 5px
세로: 10px
흐린 정도(Blur): 15px
퍼지는 정도(Spread): 8px
색상: rgba(0, 0, 0, 0.6)
*/vPadding
- 영역 안쪽에 여백을 넣을 때 사용
padding: 8px;- 상하좌우 한 번에
padding: 16px 8px;- 상하, 좌우 각각
padding: 16px 8px 24px;- 상, 좌우, 하 각각
padding: 16px 8px 24px 10px;- 상, 하, 좌, 우 각각
- 순서는 0시부터 시계 방향으로
Margin
- 영역 바깥쪽에 여백을 넣을 때 사용
- 좌우 바깥 여백에는
auto를 적용하면 자동으로 채움(width속성이 정해져 있어야 자동으로 채워짐) - 순서는 Padding과 똑같이 0시부터 시계 방향으로
margin: 8px;
margin: 16px 8px;
width: 520px; /* 반드시 너비가 정해져 있어야 자동으로 채울 수 있음 */
margin: 16px auto;
margin: 16px 8px 24px;
margin: 16px 8px 24px 10px;
김찬호 화이팅