-
CSS 기초 - 3 | CSS 의 간단한 속성들프로그래밍 언어/CSS 2020. 5. 25. 19:05
CSS 에서 자주 쓰이는 속성들
CSS 에는 너무나도 많은 속성들이 있다. 정말 너무 많아서 나도 다 알지 못한다. 자주 쓰지 않는 새로운 속성이 필요할 때는 그냥 검색해서 찾아본다.
다만, 정말 자주 쓰이는 속성들은 외워두는게 좋다. 사실 외운다기보다는 많이 쓰다 보니 익숙해진 느낌이다. 따로 외우려고 노력한 적은 한 번도 없다.
그럼 정말 간단한 것 부터 하나씩 배워보자. 그전에 가볍게 HTML 세팅만 하고 넘어가자.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Practice</title> <link rel="stylesheet" href="style.css" /> </head> <body> <h1 class="title">Practice</h1> <p class="text">Text</p> </html>이 상태의 HTML 에서 CSS 를 연습해 보겠다.
color 속성
h1 { color: red; }이전 글에서 예시를 들면서 정말 많이 사용했던 속성이다. 말 그대로 color 즉 색을 바꿔주는 속성이다. 여기서 색이라 함은 글자색을 뜻한다. 위와 같이 CSS 파일을 적용해 보고 HTML 파일을 웹페이지에서 열어 확인해보자.
color 짠! h1 태그의 글자색이 성공적으로 빨갛게 변했다.
이때 color 속성은 속성 값을 어떻게 줘야 할까?
속성 값
- red, blue 등 이미 미리 정의된 색
- #000000, #FFFFFF 등 16진수 색상 코드
- rgb(256, 256, 256) 등 rgb 색상
- rgba(256, 256, 256, 0.5) 등 투명도가 적용된 rgba 색상
이렇게 다양한 방법으로 색상을 표현할 수 있다. 우린 연습을 위해 미리 정의된 색을 사용하지만, 나중에 디자인적으로 더 아름답게 꾸미고 싶다면 색상 코드나 rgb 색상을 사용하자.
아래는 내가 주로 색상을 뽑아오는 사이트이다. 유용하게 사용하자.
Color Hunt - Color Palettes for Designers and Artists
Color Hunt is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes
colorhunt.co
background-color
글자색을 정해줬다면 배경색도 한번 바꿔보자.
background-color 라는 속성을 이용해 해당 태그의 배경색을 바꿔줄 수 있다.
body { background-color: gray; }body 태그를 선택해 웹페이지 전체 배경색을 gray 로 바꿔보자.
background-color 와우! 배경색이 성공적으로 변했다.
그럼 이번엔 h1 태그의 배경색도 한번 바꿔보자.
h1 { color: red; background-color: aqua; }color 속성에 이어 background-color 속성도 지정해주었다.
background-color 예상한 대로 h1 태그의 배경색이 변했다. 다만 글자 부분을 뚫고 옆으로 끝까지 쭉 배경색이 지정되었다.
이게 왜 이렇게 되는지에 대해서는 나중에 자세히 알려주겠다. 지금은 그냥 넘어가자.
속성 값
- red, blue 등 이미 미리 정의된 색
- #000000, #FFFFFF 등 16진수 색상 코드
- rgb(256, 256, 256) 등 rgb 색상
- rgba(256, 256, 256, 0.5) 등 투명도가 적용된 rgba 색상
color 와 같은 속성 값을 가진다.
앞으로 색상을 지정해주는 속성들은 모두 이와 동일한 속성 값을 사용한다고 생각하자.
font 속성
텍스트의 폰트를 설정하는 속성이다. font 속성에는 6개의 세부적인 글꼴 관련 속성이 있다.
- font-size : 글자 크기를 설정한다.
- font-weight : 글자 두께를 설정한다.
- font-family : 글꼴을 설정한다.
- font-style : 글꼴 스타일을 설정한다. (normal / italic / oblique / inherit)
- font-height : 줄 간격을 설정한다.
- font-variant : 글자 변형을 설정한다.
우린 이 중에서 위에서부터 2개 정도만 사용할 것이다.
font-size
p { font-size: 30px; }폰트 사이즈를 설정한다. 이때 속성 값은 숫자 + 단위 의 형태로 나타낸다. CSS 에서 사용하는 단위는 여러 가지가 있지만 나중에 자세히 알아보고 지금은 px 을 기본으로 사용하자.
font-size 위와 같이 p 태그의 텍스트 크기가 30px이 되었다.
font-weight
p { font-size: 30px; font-weight: 700; }폰트의 굵기를 설정한다. 사용할 수 있는 속성 값은 아래와 같다. 숫자가 커질수록 굵어진다.
- 100 (=lighter)
- 200
- 300
- 400 (=normal)
- 500
- 600
- 700 (=bold)
- 800
- 900 (=bolder)
font-weight 위와 같이 p 태그의 텍스트 굵기가 굵어졌다.