![[CSS] CSS의 기본 속성(property)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbSNlHa%2FbtrwrHQb0Cs%2FsCk3uR0nXBJwllL4K6emMK%2Fimg.png)
색상(Colors)
CSS에서 색을 표현하는 방법은 3가지다.
- 색상 이름
- HEX code(16진수 색상값)
- RGBA(RGB 색상값, alpha는 투명도)
<h1 style="color:Tomato;">Hello World</h1>
<h1 style="color:#ff6347;">Hello World</h1>
<h1 style="color:rgba(255, 99, 71, 1);">Hello World</h1>
<!-- 모두 동일하게 '토마토' 색상을 나타낸다. -->
배경(Backgrounds)
HTML 요소는 모두 Box Model을 기반으로 각자의 배경을 가진다. background 속성을 이용하면 이러한 각 요소에 다양한 효과를 줄 수 있다.
| 속성 | 설명 |
| background | 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음. |
| background-color | HTML 요소의 배경색을 설정함. |
| background-image | HTML 요소의 배경 이미지를 설정함. |
| background-repeat | 설정된 배경 이미지의 반복 유무를 설정함. |
| background-position | 반복되지 않는 배경 이미지의 상대 위치를 설정함. |
| background-attachment | 배경 이미지를 스크롤과는 무관하게 해당 위치에 고정시킴. |
텍스트(Text)
CSS에서 사용하는 대표적인 text 속성은 다음과 같다.
| 속성 | 설명 |
| color | 텍스트의 색상을 설정함. |
| direction | 텍스트가 쓰이는 방향을 설정함. |
| letter-spacing | 텍스트 내에서 문자 사이의 간격을 설정함. |
| word-spacing | 텍스트 내에서 단어 사이의 간격을 설정함. |
| text-indent | 단락의 첫 줄을 들여쓰기할지 안 할지를 설정함. |
| text-align | 텍스트의 수평 방향 정렬을 설정함. |
| text-decoration | 텍스트에 여러 가지 효과를 설정하거나 제거함. (ex. <a> 태그의 효과 제거) |
| text-transform | 텍스트에 포함된 영문자에 대한 대소문자를 설정함. |
| line-height | 텍스트의 줄 간격을 설정함. |
| text-shadow | 텍스트에 그림자 효과를 설정함. |
| unicode-bidi | direction 속성과 같이 사용하여 텍스트의 기본 출력 방향을 설정함. |
| vertical-align | HTML 요소 내의 수직 방향 정렬을 설정함. |
| white-space | HTML 요소 내의 여백을 설정함. |
그림자(Shadow)
CSS를 사용하면 텍스트와 박스 요소에 그림자를 추가할 수 있다.
| 속성 | 설명 |
| text-shadow | 텍스트에 그림자 효과를 설정함. |
| box-shadow | 박스 요소에 그림자 효과를 설정함. |
h1 {
text-shadow: 2px 2px 5px red;
}
/* text-shadow 속성값은 순서대로 수평그림자, 수직그림자, 흐림효과, 색상이다. */div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
/* box-shadow 속성값은 순서대로 수평그림자, 수직그림자, 흐림효과, 확산반경, 색상이다.
중첩 사용도 가능하다.*/
글꼴(Fonts)
CSS에서 사용하는 font 속성은 다음과 같다.
| 속성 | 설명 |
| font | 모든 font 속성을 이용한 스타일을 한 줄에 설정할 수 있음. |
| font-family | 텍스트의 글꼴 집합(font family)을 설정함. |
| font-style | 주로 이탤릭체를 사용하기 위해 사용함. |
| font-variant | 텍스트에 포함된 영문자 중 소문자만을 작은 대문자(small-caps) 글꼴로 변경시킴. |
| font-weight | 텍스트를 얼마나 두껍게 표현할지를 설정함. |
| font-size | 텍스트의 크기를 설정함. 절대적 크기(px 등)와 상대적 크기(em, rem 등)가 있음. |
Tips! font-family 속성 값을 여러 개의 글꼴로 설정하면, 웹 브라우저는 위에서부터 순서대로 글꼴을 읽어 들이는데 만약 사용자의 컴퓨터에 읽어 들인 글꼴이 없다면 다음 글꼴을 확인한다. 브라우저 호환성을 위해 대체 글꼴을 설정해두는 것이 좋다.
p {
font-family: "Times New Roman", Times, serif;
}
/* 속성값은 순서대로 원하는 글꼴, 기본 글꼴 */
웹폰트 사용법
- <heae> 태그 안에 <link> 태그로 스타일 시트를 불러오는 방법
- CSS에서 임포트 하는 방법
- 내가 자주 사용하는 무료 웹폰트 페이지
- 구글 웹폰트 (https://fonts.google.com/?subset=korean)
- 눈누 (https://noonnu.cc/)
아이콘(Icons)
Font Awesome과 같은 아이콘 라이브러리를 사용하면 다양한 아이콘을 추가할 수 있다.
- 다운로드하거나 설치할 필요 없이 <head> 태그 안에 <link> 태그를 다음과 같이 추가한다.
- <i> 태그의 class를 설정하여 미리 정의된 아이콘을 설정한다. Font Awesome 4 아이콘 보러 가기
- text 요소이기 때문에 크기 설정 등 자유도가 높다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>
목록(Lists)
CSS를 이용하면 리스트에 다양한 효과를 적용할 수 있다.
| 속성 | 설명 |
| list-style | 모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있음. |
| list-style-type | 리스트 요소의 마커(marker)를 설정함. |
| list-style-image | 리스트 요소의 마커로 사용할 이미지를 설정함. |
| list-style-position | 리스트 요소의 위치를 설정함. inside로 설정하면 마커(marker)까지 리스트 요소에 포함됨. |
테이블(Tables)
다음 속성을 사용하여 테이블에 CSS 스타일을 적용할 수 있다.
| 속성 | 설명 |
| border | 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음. |
| border-collapse | 테이블의 테두리를 한 줄로 나타낼지를 설정함. |
| border-spacing | 테이블 요소(th, td)간의 여백을 설정함. |
| text-align | 테이블 내부 텍스트의 수평 방향 정렬을 설정함. |
| vertical-align | 테이블 내부 텍스트의 수직 방향 정렬을 설정함. (height값 설정 필수) |
| empty-cells | 테이블 내의 빈 셀(cell)들의 테두리 및 배경색을 표현할지 안 할지를 설정함. |
얼룩무늬 테이블
:nth-child 선택자를 이용하여 짝수(even) 혹은 홀수(odd) 번 째 <tr> 요소에 backbround-color 속성 값을 설정한다.
tr:nth-child(even) {
background-color: #f2f2f2;
}
하이라이트 테이블
:hover 선택자를 이용하여 <tr> 요소에 마우스를 올리면 행 전체가 하이라이트 되도록 설정한다.
tr:hover {
background-color: #ddd;
}
반응형 테이블
overflow 속성을 이용하여 콘텐츠의 양이 많은 경우 스크롤 막대를 설정한다.
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>※ 콘텐츠의 양이 충분하지 않으면 min-width 값을 설정해야 한다.
※ 참고자료
'🌎 Web > CSS' 카테고리의 다른 글
| [CSS] background img 꽉차게 채우는 법 (0) | 2022.03.25 |
|---|---|
| [CSS] CSS에서 위치를 담당하는 요소들 (0) | 2022.03.23 |
| [CSS] CSS에서 공간을 나누는 요소들(feat. 박스모델) (0) | 2022.03.21 |
| [CSS] CSS의 다양한 선택자(selector) (0) | 2022.03.20 |
| [CSS] CSS란? (0) | 2022.03.20 |