15.1.1 CSS란?

웹 개발을 할 때 스타일링을 위해서 가장 대표적으로 사용되는 것이 바로 CSS입니다. CSS는 Cascading Style Sheets의 약자로써 스타일링을 위한 일종의 언어라고 생각하면 됩니다. 여기서 Cascading이라는 단어는 계단식이라는 뜻을 갖고 있습니다. CSS에서는 여러가지 스타일이 정의되어 있을 때 각 스타일은 해당 스타일이 적용되는 규칙을 갖고 있게 되는데, 하나의 Element가 여러개의 스타일 규칙을 만족할 경우 해당 스타일들을 마치 계단을 하나씩 내려가는 것처럼 우선 순위를 갖고 하나씩 적용하게 됩니다. 결과적으로 하나의 스타일이 여러개의 Element에 적용될 수 있고, 하나의 Element에도 여러개의 스타일들이 적용될 수 있습니다.

위에서 Element에 스타일이 적용되는 규칙을 selector라고 부릅니다. 단어를 그대로 해석하면 선택자라고 할 수 있는데요, 스타일을 어떤 Element에 적용할지 선택하게 해주는 것이라고 보면 됩니다. CSS는 크게 Selector와 실제 스타일로 이뤄져 있습니다. 이제 Selector와 스타일들을 카테고리별로 나눠서 배워보도록 하겠습니다.

15.1.2 CSS 문법과 selector

먼저 CSS의 기본적인 문법에 대해서 배워보도록 하겠습니다. CSS는 크게 Selector와 스타일들로 구성되어 있습니다. 아래 그림에서 나온 것처럼 Selector를 먼저 쓰고 이후에 적용할 스타일들을 중괄호 안에 세미콜론(;)으로 구분하여 하나씩 기술합니다.

Selector에는 해당 스타일이 적용될 HTML element를 넣게 됩니다. 위 그림처럼 HTML 태그를 직접 넣거나 다른 조건들을 조합하여 Selector를 작성할 수 있습니다. Selector에 대한 자세한 내용은 바로 뒤에서 다루도록 하겠습니다. Selector 다음에는 중괄호 안에 적용할 스타일들을 선언하게 됩니다. 각 스타일은 CSS 속성(property)과 값으로 이뤄진 키-값 쌍(Key-Value pair)이며, CSS 속성의 이름과 값을 콜론(:)으로 구분합니다. 그리고 중괄호로 묶여있는 하나의 스타일 블록에는 스타일들이 여러개 들어갈 수 있는데, 여기서 각 스타일은 세미콜론(;)으로 구분하면 됩니다.

그렇다면 Selector는 어떻게 작성해야 할까요? 지금부터 Selector사용법에 대해서 자세히 알아보도록 하겠습니다.

Element Selector

첫 번째 유형은 단순하게 특정 HTML 태그를 선택하기 위한 Element Selector입니다. 이 경우에는 Selector에 HTML 태그의 이름을 써주면 됩니다. 아래 코드는 <h1>태그의 글자 색깔을 초록색으로 바꾸기 위한 CSS 속성입니다.

h1 {
    color: green;
}

ID Selector

두 번째 Selector 유형은 ID Selector입니다. HTML에서는 Element에 id를 정의할 수 있는데, ID Selector는 이 id를 기반으로 선택하는 형태이며 샵(#) 뒤에 아이디를 넣어 사용합니다. 아래 코드는 id가 section인 Element를 정의한 HTML코드와 해당 Element의 배경 색깔을 검은색으로 바꾸기 위한 CSS 속성입니다.

<div id="section">
    ...
</div>

#section {
    background-color: black;
}

Class Selector

세 번째 Selector 유형은 Class Selector입니다. id는 고유하다는 성질을 갖고 있기 때문에 하나의 Element에 사용해야 한다면, class는 여러개의 Element들을 분류(classification)하기 위해서 사용합니다. Class Selector는 점(.) 뒤에 클래스명을 넣어서 사용합니다. 아래 코드는 class가 medium인 Element들을 정의한 HTML코드와 해당 Element의 글자 크기를 20px로 바꾸기 위한 CSS 속성입니다.

여기서 두 번째에 나오는 스타일의 Selector는 p.medium이라고 되어 있습니다. 이것은 Element Selector와 Class Selector를 함께 사용한 것인데, 해당 HTML태그에 클래스가 있는 경우에만 스타일이 적용됩니다. 이렇게 사용하고 싶을 경우 HTML태그명 뒤에 점을 찍고 클래스 이름을 넣어주면 됩니다. 예를 들어, <h1>태그에 class가 medium인 경우에만 스타일을 적용하고 싶다면, Selector는 h1.medium이 되겠죠.

<span class="medium">
    ...
</span>

<p class="medium">
    ...
</p>

.medium {
    font-size: 20px;
}

p.medium {
    font-size: 20px;
}

Universal Selector

네 번째 Selector 유형은 Universal Selector입니다. universal이라는 단어는 전 세계적인, 보편적인 이라는 뜻을 갖고 있습니다. Universal Selector는 그 의미 그대로 특정 Element에만 선택적으로 적용하는 것이 아니라 전체 Element에 적용하기 위한 Selector이며, 한국에서는 흔히 별표라고 부르는 Asterisk(*)를 사용합니다. 아래 코드는 모든 Element의 글자 크기를 20px로 하고 글자 색깔을 파란색으로 바꾸기 위한 CSS 속성입니다.

* {
    font-size: 20px;
    color: blue;
}

Grouping Selector

다섯 번째 Selector 유형은 Grouping Selector입니다. grouping은 그룹으로 묶는다는 뜻을 갖고 있습니다. 그래서 Grouping Selector는 말 그대로 여러가지 Selector들을 그룹으로 묶어서 하나의 스타일을 적용하기 위해 사용하는 Selector입니다. 아래와 같이 똑같은 스타일들이 각기 다른 Selector로 나눠져 있다고 해보겠습니다. 이렇게 반복되는 것을 여러곳에 나눠서 쓰게되면 유지보수도 힘들고 굉장히 비효율적이겠죠.

h1 {
    color: black;
    text-align: center;
}

h2 {
    color: black;
    text-align: center;
}

p {
    color: black;
    text-align: center;
}

그래서 Grouping Selector를 사용하여 아래와 같이 바꿔주면 굉장히 간결해지고, 유지보수도 쉬워지게 됩니다. 이처럼 같은 스타일을 여러 조건의 Selector에 적용하고 싶을 때 각 Selector를 콤마(,)로 구분하여 Grouping Selector를 적용하면 됩니다.

h1, h2, p {
    color: black;
    text-align: center;
}

Element의 상태와 관련된 Selector

여섯 번째 Selector 유형은 Element의 상태와 관련된 Selector입니다. 여기에서 상태라는 것은 마우스 커서가 Element 위에 올라 오거나, Element가 활성되어 있거나 등을 의미합니다. 상태와 관련된 대표적인 Selector로는 :hover, :active, :focus, :checked, :first-child, :last-child 등이 있습니다.

:hover는 마우스 커서가 Element위에 올라왔을 때, :active는 주로 <a>태그(link)에 사용되는데 Element가 클릭됐을 때를 의미합니다. 그리고 :focus는 주로 <input>태그에서 사용되는데 말 그대로 Element가 초점(focus)을 갖고 있을 경우를 의미합니다. :checked는 radio button이나 checkbox 같은 유형의 <input>태그가 체크되어 있는 경우를 의미합니다. 마지막으로 :first-child, :last-child는 상위 Element를 기준으로 각각 첫 번째 child, 마지막 child일 경우를 의미합니다. 아래는 상태와 관련된 Selector들을 실제로 사용하는 예시입니다.

button:hover {
    font-weight: bold;
}

a:active {
    color: red;
}

input:focus {
    color: #000000;
}

option:checked {
    background: #00ff00;
}

p:first-child {
    background: #ff0000;
}

p:last-child {
    background: #0000ff;
}

---

지금까지 여러 종류의 CSS Selector에 대해서 배워봤습니다. 이것 이외에도 더 복잡한 Selector들이 많이 있지만, 이 문서가 CSS를 위한 것은 아니기 때문에 여기에서 다루지는 않도록 하겠습니다. 더 자세한 내용이 궁금한 분들은 아래 링크에서 더 다양한 CSS Selector들을 살펴볼 수 있습니다.

https://www.w3schools.com/css/css_selectors.asp
https://www.w3schools.com/csSref/css_selectors.asp

15.1.3 Layout과 관련된 속성

지금부터는 CSS 속성들 중에서 가장 많이 사용되는 것들을 카테고리별로 묶어서 하나씩 배워보도록 하겠습니다. 먼저 첫 번째로는 Layout과 관련된 속성입니다. 우리가 일반적으로 레이아웃이라고 하면 정해진 공간에 가구나 물건들을 어떻게 배치할지를 의미합니다. 웹사이트에서도 레이아웃이 비슷한 의미로 사용되는데, 화면에 Element들을 어떻게 배치할 것인지를 의미합니다. 그래서 레이아웃과 관련된 CSS 속성들은 화면상의 배치와 관련이 있다라고 생각하면 됩니다.

display 속성

레이아웃과 관련해서 가장 중요한 속성은 display입니다. display 속성은 Element를 어떻게 표시할지 그 방법에 관한 속성입니다. 모든 Element는 그 종류에 따라서 기본적으로 정해진 display 속성 값을 갖고 있습니다. 대부분의 Element는 block 또는 inline 값을 가집니다. display 속성의 값으로는 굉장히 많은 종류가 있는데, 대표적으로 아래 코드에 나온 값들이 가장 많이 사용됩니다.

div {
    display: none | block | inline | flex;
}

먼저 display: none;은 Element를 화면에서 숨기기 위해서 사용합니다. Element가 삭제되는 것이 아니라 존재하긴 하지만 화면에 보이지 않는 것이기 때문에 자바스크립트 코드를 넣을 때 주로 사용됩니다. 그래서 <script>태그의 display 속성의 기본값은 display: none;이 됩니다.

다음으로 display: block;은 블록 단위로 Element를 배치하는 것인데, 블록 단위라는 것은 Element가 새로운 줄에서 시작하여 위치한 곳 전체의 width를 차지한다는 것을 의미합니다. 대표적으로는 <p>, <div>, <h1> ~ <h6>태그의 display 속성 기본값이 display: block;입니다.

그리고 display: inline;은 말 그대로 Element를 라인 안에 넣는 것입니다. 대표적으로는 <span>태그의 display 속성 기본값이 display: inline;입니다. 이 속성을 사용하게 되면 모든 width, height와 관련된 속성들은 효과가 없어집니다.

마지막으로 display: flex;는 Element를 블록 레벨의 Flex container로 표시하는 것입니다. 컨테이너이기 때문에 내부에 다른 Element들을 포함한다고 생각하면 되는데, flex에 대해서는 뒤에서 자세히 나오기 때문에 그 부분에서 더 다루도록 하겠습니다.

visibility 속성

다음으로 나오는 CSS 속성은 visibility입니다. visibility는 우리 말로는 눈에 잘 보이는 성질(가시성) 이라는 뜻을 갖고 있습니다. CSS에서는 Element를 화면에 보여주거나 감추기 위해서 사용하는 속성입니다. 대표적으로 visible과 hidden 두 가지 값을 가장 많이 사용합니다. 아래 코드처럼 사용하면 됩니다.

div {
    visibility: visible | hidden;
}

visibility: visible은 Element를 visible하게 하는, 즉 화면에 보이게 하는 것입니다. 그리고 visibility: hidden은 화면에서 안 보이게 감추는 것입니다. 여기서 주의할 점은 visibility: hidden은 Element를 안 보이게만 하는 것이고 화면에서의 영역은 그대로 차지한다는 것입니다.

position 속성

다음 Layout과 관련된 CSS 속성은 position입니다. position속성은 Element를 어떻게 위치시킬 것인지(positioning)를 정의하기 위해서 사용합니다.

div {
    position: static | fixed | relative | absolute;
}

static은 기본값으로 Element를 원래의 순서대로 위치시킵니다.

fixed는 Element를 브라우저 window에 상대적으로 위치시킵니다.

relative는 Element를 보통의 위치에 상대적으로 위치시킵니다. 그래서 left: 16px; 같은 속성을 추가하면 Element의 왼쪽에 16픽셀의 여백이 추가됩니다.

absolute는 Element를 절대위치에 위치시키는데, 이 때 기준은 첫 번째 상위 Element가 됩니다.

Element의 가로, 세로 길이와 관련된 속성들

다음 CSS 속성은 Element의 가로, 세로 길이와 관련된 속성들입니다. 대표적으로는 width, height, min-width, min-height, max-width, max-height가 있으며, 값으로 보통은 실제 픽셀(pixel)값을 넣거나 상대값인 퍼센트(%)를 사용합니다. 또한 px단위가 아닌 em, rem 등의 단위도 사용할 수 있는데, 이 부분에 대해서는 여기서 다루지 않겠습니다.

각 속성은 단어의 의미 그대로 가로 길이(width), 세로 길이(height), 최소 가로 길이(min-width), 최소 세로 길이(min-height), 최대 가로 길이(max-width), 최대 세로 길이(max-height)를 의미합니다. 그리고 값으로 auto를 사용하면 브라우저에서 길이를 계산하며, 실제 값을 사용하면 해당 값만큼의 길이를 가지게 됩니다.

div {
    width: auto | value;
    height: auto | value;
    min-width: auto | value;
    min-height: auto | value;
    max-width: auto | value;
    max-height: auto | value;
}

CSS의 값의 단위에 대해서 궁금한 분들은 아래 링크를 참고하기 바랍니다.

https://www.w3schools.com/cssref/css_units.asp

15.1.4 Flexbox

이제 레이아웃에서 가장 많이 쓰이고 중요한 Flexbox에 대해서 알아보도록 하겠습니다. Flexbox는 기존에 CSS를 사용하여 레이아웃을 하는데 불편한 부분들을 개선하기 위해서 등장했습니다. Flexbox가 나오기 전에는 위에서 배운 것처럼 display: block;이나 display: inline; 등의 속성을 활용해서 레이아웃을 구성했습니다. 하지만 이런 속성들은 다양한 레이아웃을 자유롭게 구성하기에는 사용하기 불편한 부분들이 있었고, 이러한 문제를 해결하기 위해서 Flexbox가 나오게 되었습니다.

Flexbox는 크게 container와 item으로 구성됩니다. 위에서 display: flex;를 사용하면 Element가 Flex container가 된다고 설명드렸는데, 이게 바로 Flexbox의 container(Flex container)가 됩니다. 그리고 flex 컨테이너는 내부에 여러개의 Element들을 포함할 수 있습니다. 이 때 container에 포함되는 Element들이 바로 Flexbox의 item(flex item)이 됩니다. 아래 그림은 Flex container와 item을 표현한 것입니다.

container 안에 여러개의 item들이 존재할 경우, container에 들어있는 flex와 관련된 CSS 속성들은 이 item들을 어떤 방향으로, 어떤 순서로 배치할 것인지를 정의하게 됩니다. 아래는 가장 많이 사용되는 flex와 관련된 CSS 속성들을 나타낸 것입니다.

div {
    display: flex;
    flex-direction: row | column | row-reverse | column-reverse;
    align-items: stretch | flex-start | center | flex-end | baseline;
    justify-content: flex-start | center | flex-end | space-between | space-around;
}

먼저 Element를 Flex container로 사용하기 위해서 display: flex;를 써주어야 합니다. 그렇지 않으면 display 속성의 값이 flex가 아닌 Element의 기본값으로 지정이 되기 때문입니다. 그리고 이후에는 flex-direction속성을 사용하여 item들이 어떤 방향으로 배치될 것인지를 지정합니다. 각각의 값들이 의미하는 바는 아래와 같습니다.

• flex-direction
  • row: 기본값이며 item들을 행(row)을 따라 가로 순서대로 왼쪽부터 배치합니다.
  • column: item들을 열(column)을 따라 세로 순서대로 위쪽부터 배치합니다.
  • row-reverse: item들을 행(row)의 역(reverse)방향으로 오른쪽부터 배치합니다.
  • column-reverse: item들을 열(column)의 역(reverse)방향으로 아래쪽부터 배치합니다.

아래 그림은 flex-direction속성의 값에 따른 item들의 배치 순서를 나타낸 것입니다.

위 그림에서 flex-direction으로 지정된 방향으로 향하는 축(axis)을 Main axis라고 부르고, Main axis를 가로지르는 방향으로 향하는 축을 가로지른다는 의미에서 Cross axis라고 부릅니다. 아래 그림은 flex-direction에 따른 Main axis와 Cross axis를 나타낸 것입니다.

이 Main axis와 Cross axis의 방향에 따라서 아래에 나올 align-items와 justify-content속성의 값의 의미가 달라지게 됩니다. Main axis와 Cross axis를 잘 기억하면서 각 속성에 대해서 배워보도록 하겠습니다.

다음으로 나오는 flex와 관련된 속성은 align-items입니다. align-items는 말 그대로 container내에서 아이템들을 어떻게 정렬(align)할 것인지를 결정합니다. 이 때 정렬은 Cross axis를 기준으로 하게 됩니다. 각각의 값들이 의미하는 바는 아래와 같습니다.

• align-items
  • stretch: 기본값으로써 item을 늘려서(stretch) container를 가득 채웁니다.
  • flex-start: cross axis의 시작 지점으로 item을 정렬합니다.
  • center: cross axis의 중앙으로 item을 정렬합니다.
  • flex-end: cross axis의 끝 지점으로 item을 정렬합니다.
  • baseline: item을 baseline을 기준으로 정렬합니다.

아래 그림은 align-items속성의 값에 따른 item들의 정렬 결과를 나타낸 것입니다.

마지막으로 배워볼 flex와 관련된 속성은 justify-content입니다. justify-content는 container내에서 아이템(content)들을 어떻게 나란히 맞출(justify)것인지를 결정합니다. 이 때 맞추는 기준은 align-items와 반대로 Main axis를 기준으로 하게 됩니다. 각각의 값들이 의미하는 바는 아래와 같습니다.

• justify-content
  • flex-start: main axis의 시작 지점으로 item을 맞춥니다.
  • center: main axis의 중앙으로 item을 맞춥니다.
  • flex-end: main axis의 끝 지점으로 item을 맞춥니다.
  • space-between: main axis를 기준으로 첫 item은 시작 지점에 맞추고 마지막 item은 끝 지점에 맞추며, 중간에 있는 item들은 사이(between)의 간격(space)이 일정하게 되도록 맞춥니다.
  • space-around: main axis를 기준으로 각 item의 주변(around)의 간격(space)이 동일하게 맞춥니다. 여기서 주변의 의미는 item의 시작과 끝을 의미합니다.

아래 그림은 justify-content속성의 값에 따른 item들의 정렬 결과를 나타낸 것입니다.

지금까지 Flexbox와 관련된 CSS 속성들에 대해서 배워보았습니다. 우리가 배운것 이외에도 더 많은 속성들이 있지만, 이 문서에서는 다루지 않도록 하겠습니다. Flexbox의 더 자세한 내용이 궁금한 분들은 아래 링크를 참고하시기 바랍니다.

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

15.1.5 Font와 관련된 속성

지금부터는 CSS의 속성들 중에서 Font(글꼴)와 관련된 속성들에 대해서 배워보도록 하겠습니다. 아래는 Font와 관련해서 가장 많이 사용되는 CSS 속성들을 나타낸 것입니다.

#title {
    font-family: "사용할 글꼴 이름", <일반적인 글꼴 분류>
    font-size: value;
    font-weight: normal | bold;
    font-style: normal | italic | oblique;
}

가장 먼저 나오는 속성은 바로 font-family입니다. font-family는 어떤 글꼴을 사용할 것인지를 결정하는 속성입니다. font-family속성의 값으로는 사용할 글꼴의 이름을 적어주면 되는데, 여기서 주의할 점은 글꼴의 이름에 띄어쓰기(space)가 들어갈 경우 큰 따옴표로 묶어주어야 한다는 것입니다. 실제 사용하는 예시는 아래와 같습니다.

#title1 {
    font-family: "Times New Roman", Times, serif;
}

#title2 {
    font-family: Arial, Verdana, sans-serif;
}

#title3 {
    font-family: "Courier New", Monaco, monospace;
}

그런데 사용할 글꼴의 이름만 하나 쓰면 될텐데 그렇게 하지 않고 콤마(,)로 구분하여 여러개의 글꼴이 써있는 것을 볼 수 있습니다. 이것은 font-family속성의 fallback시스템 때문입니다. fallback이라는 단어는 대비책이라는 뜻을 갖고 있습니다. 그래서 font-family속성에서의 fallback시스템은 지정한 글꼴을 찾지 못했을 경우를 대비해서 사용할 글꼴을 순서대로 지정해주는 것입니다. 이것은 최대한 많은 브라우저와 운영체제에서 글자들이 깨지지 않고 나올 수 있도록 하기 위함입니다.

fallback시스템의 가장 마지막에 써있는 것은 일반적인 글꼴 분류(generic font family)인데, 모든 글꼴들은 아래에 나와있는 일반적인 글꼴 분류중 한 가지에 속합니다.

• serif: 각 글자의 모서리에 작은 테두리를 갖고 있는 형태의 글꼴
• sans-serif: 모서리에 테두리가 없이 깔끔한 선을 가진 글꼴 (컴퓨터 모니터에서는 Serif보다 가독성이 좋음)
• monospace: 모든 글자가 같은 가로 길이를 가지는 글꼴 (코딩을 할 때 주로 사용)
• cursive: 사람이 쓴 손글씨 모양의 글꼴
• fantasy: 장식이 들어간 형태의 글꼴

그래서 font-family속성을 사용할 때 사용하고 싶은 글꼴들의 이름을 콤마(,)로 구분하여 순서대로 적고, 가장 마지막에는 일반적인 글꼴 분류를 적어주게 됩니다. 이렇게 하는 이유는 만약 사용하고자 하는 글꼴들이 모두 없을 경우 브라우저가 일반적인 글꼴 분류에서 가장 유사한 글꼴을 선택하도록 하기 위함입니다. 그래서 만약 위에서 #title1에 지정된 font-family속성에서 Times New Roman 글꼴이 없다면, 그 다음으로 Times 글꼴을 찾고, 그것마저 없다면 현재 시스템이 지원하는 serif 계열 글꼴 중에서 한 가지를 선택하여 글자를 표시하게 됩니다.

다음으로 글꼴의 크기와 관련된 CSS 속성으로 font-size가 있습니다. font-size의 값으로는 px, em, rem, vw(viewport width) 등의 단위를 사용할 수 있습니다. px은 고정된 값이기 때문에 브라우저를 통해 크기를 바꿀 수 없지만, em이라는 단위는 사용자가 브라우저에서 글꼴의 크기를 변경할 수 있게 해줍니다. 그리고 브라우저의 기본 글꼴 크기에서 1em은 16px과 동일합니다. 따라서 아래와 같은 공식이 성립합니다.

16 * em = pixels

font-size속성은 아래 예시와 같이 다양한 형태로 사용할 수 있습니다.

#title1 {
    font-size: 16px;
}

#title2 {
    font-size: 1em;
}

#title3 {
    font-size: 10vw;    /* viewport 가로 길이의 10%를 의미 */
}

그리고 다음으로는 글꼴의 두께와 관련된 font-weight속성이 있습니다. 값으로는 normal, bold를 사용하거나, 100 ~ 900까지 100단위의 숫자로 된 값을 사용할 수도 있습니다. 숫자가 클수록 글자의 두께가 두꺼워지게 됩니다. 아래는 실제로 font-weight속성을 사용한 예시입니다.

#title1 {
    font-weight: bold;
}

#title2 {
    font-weight: 500;
}

마지막으로 나오는 글꼴과 관련된 CSS 속성은 font-style속성입니다. 이 속성은 이름 그대로 글꼴의 스타일을 지정하기 위한 속성입니다. font-style속성의 값으로는 아래와 같은 종류가 있습니다.

• normal: 일반적인 글자의 형태를 의미
• italic: 글자가 기울어진 형태로 나타남
• oblique: 글자가 비스듬한 형태로 나타남

여기서 italic과 oblique는 모양은 기울어진 형태로 비슷하게 보이지만, 글자를 표현하는 방식에서 약간의 차이가 있습니다. italic은 글꼴을 만들 때 디자이너가 별도로 기울어진 형태의 글자들을 직접 디자인해서 만든 것이고, oblique는 그냥 글자를 기울인 것입니다. 그래서 italic을 사용할 경우에는 해당 글꼴이 italic을 지원하는지를 확인한 뒤에 사용해야 합니다. 아래는 font-style속성을 사용한 예시입니다.

#title1 {
    font-style: italic;
}

#title2 {
    font-style: oblique;
}

15.1.6 기타 많이 사용하는 속성

지금까지 다양한 CSS 속성들에 대해서 배워봤습니다. 이제 위에 나오지는 않았지만 자주 사용되는 CSS 속성들에 대해서 배워보도록 하겠습니다. 먼저 Element의 배경색을 지정하기 위한 background-color속성이 있습니다. 값으로는 색상의 값이 들어가게 되는데, CSS에서 색상값으로 사용할 수 있는 것과 예시 값들은 아래와 같습니다.

• CSS의 색상값
  • 16진수 컬러값: #ff0000
  • 투명도를 가진 16진수 컬러값: #ff000055
  • RGB 컬러값: rgb(255, 0, 0)
  • RGBA 컬러값: rgba(255, 0, 0, 0.5)
  • HSL 컬러값: hsl(120, 100%, 25%)
  • HSLA 컬러값: hsla(120, 100%, 50%, 0.3)
  • 미리 정의된 색상의 이름: red
  • currentcolor 키워드: 현재 지정된 색상값을 사용

색상값으로 사용할 수 있는 것들의 종류가 굉장히 다양하지만, 보통은 미리 정의된 색상의 이름을 사용하거나 16진수 컬러값을 사용합니다. Element의 배경색을 지정하기 위해서는 background-color속성의 값으로 컬러값을 넣어주면 됩니다. 만약 배경색을 투명하게 만들고 싶을 경우에는 값에 transparent키워드를 써주면 됩니다.

다음으로 자주 사용되는 CSS 속성으로는 border속성이 있습니다. border속성은 말 그대로 테두리를 위한 속성입니다. 이 border속성은 border-width, border-style, border-color 이 세 가지 속성을 축약시켜서 한 번에 사용할 수 있게 만든 것입니다. 그래서 각 속성을 사용해서 테두리의 두께, 스타일, 색상을 지정할 수도 있고, border속성을 사용해서 한 번에 지정할 수도 있습니다. background-color속성과 border속성의 사용법은 아래와 같습니다.

div {
    background-color: color | transparent;
    border: border-width border-style border-color;
}

그리고 실제로 사용한 예시는 아래와 같습니다. Element의 배경색을 빨간색으로 지정하거나, 1픽셀의 검은색 직선으로 Element의 테두리를 만들어 줄 수 있습니다.

#section1 {
    background-color: red;
}

#section2 {
    border: 1px solid black;
}

지금까지 살펴본 속성들 이외에도 수많은 CSS 속성들이 있습니다. 더 자세한 내용이 궁금한 분들은 아래 웹사이트를 참고하기 바랍니다.

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