🌎 Web/CSS

[CSS] CSS의 기본 속성(property)

오늘 ONEUL 2022. 3. 21. 00:20

색상(Colors)

CSS에서 색을 표현하는 방법은 3가지다.

  1. 색상 이름
  2. HEX code(16진수 색상값)
  3. 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;
}

/* 속성값은 순서대로 원하는 글꼴, 기본 글꼴 */

 

 

웹폰트 사용법

 

 

 

 

아이콘(Icons)

Font Awesome과 같은 아이콘 라이브러리를 사용하면 다양한 아이콘을 추가할 수 있다.

  1. 다운로드하거나 설치할 필요 없이 <head> 태그 안에 <link> 태그를 다음과 같이 추가한다.
  2. <i> 태그의 class를 설정하여 미리 정의된 아이콘을 설정한다. Font Awesome 4 아이콘 보러 가기
  3. 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 값을 설정해야 한다.

 

 

 

 

 

※ 참고자료

http://www.tcpschool.com/css/intro

https://www.w3schools.com/css/default.asp

저작자표시