1. 텍스트 스타일링 정리
글자 색 color
<span class="red">빨강</span>
<span class="orange">주황</span>
<span class="yellow">노랑</span>
.red {
color: #F23030;
}
.orange {
color: #F28705;
}
.yellow {
color: #F2CB05;
}
글자 크기 font-size
<span class="large">크게</span>
<span class="medium">중간</span>
<span class="small">작게</span>
.large {
font-size: 24px;
}
.medium {
font-size: 16px;
}
.small {
font-size: 8px;
}
글꼴 font-family
- 글꼴 이름을 쉼표로 연결해서 여러 개를 사용할 수 있다.
- 웹 브라우저가 차례대로 확인하면서 적용 가능한 글꼴로 보여준다.
<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-weight
<span class="bold">굵게</span>
<span class="regular">중간</span>
<span class="light">얇게</span>
.bold {
font-weight: 600;
}
.regular {
font-weight: 400;
}
.light {
font-weight: 200;
}
줄 높이 line-height
- 줄과 줄 사이의 간격을 조절할 때 CSS에서는 줄의 높이로 조절
- 줄 높이의 값인 line-height는 단위 없이 쓰는 글자 크기에 상대적인 값
<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 */
}
텍스트 꾸미기 text-decoration
- 텍스트에 밑줄을 넣거나, 취소선을 넣거나 하는 데 사용하는 속성
- 속성 값으로는 none, underline, line-through 등이 있다.
- none은 <a> 태그에 기본으로 들어 간 밑줄을 없애는 데 많이 사용
<a href="https://codeit.kr">
링크
</a>
<br>
<a class="none" href="https://codeit.kr">
밑줄 없는 링크
</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;
}
2. 배경 이미지 : background-image
- url 이라는 속성 값에 배경 이미지로 삽입하려는 이미지의 경로를 작성해준다.
- 단, 따옴표로 굳이 감쌀 필요는 없지만, 특수문자가 있다면 반드시 감싸주어야 한다.
- 배경 이미지는 기본적으로 주방 타일처럼 반복하여 깔린다.
background-repeat : no-repeat;을 하게 되면 반복되지 않도록 한다.
backgorund-position : center;은 이미지를 어떤 위치를 기준으로 배치할지 정하는 것
background-size : cover;은 이미지의 크기를 정하는 것으로 cover라고 하면 꽉 차게 하는 것
3. 그라디언트 : linear-gradient
- 그라디언트는 background-image라는 속성으로 넣을 수 있다.
- 그라디언트도 일종의 배경 이미지처럼 사용하는 것
- background-image : linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0))
- 그라디언트는 다양하게 만들 수 있기 때문에 직접 만드는 것보다는 Gradient generator를 검색
- 배경 이미지 위에다가 반투명한 그라디언트를 겹쳐넣음으로서 글자를 더 잘보이게 하는 효과
4. 그림자 : box-shadow
- box-shadow는 세로, 가로, 경계의 흐림정도, rgba값을 사용하여 작성
- 구글에서 box-shadow generator를 검색해보면 다양한 값을 조절하여 만들 수 있다.
5. 불투명도 : opacity
- 페퍼로니 햄이 다 떨어져서 품절되었다고 홈페이지를 수정하고자 한다
- opacity의 주의할 점은 태그 전체가 반투명해진다.
6. 새로 배운 CSS 속성 정리
배경 이미지 background-image
- url(...)이라는 문법으로 배경 이미지를 넣는다.
background-image: url('flowers.png');
- 배경 이미지는 여러 개 넣을 수 있다.
background-image:
url('a.png'), /* 제일 위에 보이는 이미지 */
url('b.png'),
url('c.png');
배경의 위치 background-position
- 기본값은 left top(왼쪽 위)이고, 가운데 정렬을 하려면 아래처럼 center를 사용
background-position: top; /* 위 */
background-position: right; /* 오른쪽 */
background-position: bottom; /* 아래 */
background-position: left; /* 왼쪽 */
background-position: left top; /* 왼쪽 위 (지정하지 않았을 때 기본값) */
background-position: center;
배경의 반복 background-repeat
- 기본값은 repeat(반복)이고, no-repeat으로 하면 반복되지 않게 할 수 있다.
background-repeat: repeat; /* 반복하기 (지정하지 않았을 때 기본값) */
background-repeat: no-repeat; /* 반복 안 함 */
배경의 크기 background-size
- 직접 가로 세로 크기를 지정할 수도 있고, 비율을 유지하면서 영역에 꽉 차게(cover)하거나,
영역 안에서 최대한 크게(contain)할 수도 있다.
background-size: cover; /* 비율 유지하면서 꽉 차게. 이미지 잘릴 수 있음 */
background-size: contain; /* 비율 유지하면서 최대한 크게. 이미지 잘리지 않음 */
background-size: 40px 30px; /* 가로 40px 세로 30px */
그라디언트 linear-gradient()
-기본적으로 시작 색상과 종료 색상으로 사용할 수 있다.
background-image: linear-gradient(#000000, #ffffff);
- 기본 방향의 각도는 180도 (위에서 아래로 내려오는 방향)
- 이 각도를 바꾸고 싶다면 맨 앞에다가 각도를 써 주면 된다. 각도의 단위는 deg이다.
background-image:
linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
그림자 box-shadow
- 가로, 세로 위치, 흐린 정도(Blur), 퍼지는 정도(Spread), 색상의 순서로 작성
box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6);
/*
가로: 5px
세로: 10px
흐린 정도(Blur): 15px
퍼지는 정도(Spread): 8px
색상: rgba(0, 0, 0, 0.6)
*/
불투명도 opacity
- 요소 전체의 불투명도를 조절할 때 사용합니다. 0에서 1 사이의 소수 값으로 단위 없이 사용
opacity: 0; /* 투명 */
opacity: 0.6;
opacity: 1; /* 불투명 */
