CSS

앞서 만든 파일을 웹 브라우저에서 보면 아래 처럼 생겼을거에요.

스크린샷

지금까지는 웹사이트의 '내용'에 해당하는 HTML을 작성해봤습니다. 이제 내용을 어떻게 보여줄지 '생김새'에 해당하는 부분을 작성해보겠습니다.

style 속성 (style attribute)

HTML태그로 표현한 각각의 요소는 자신만의 색상, 크기, 위치 등의 다양한 스타일을 가질 수 있습니다.

앞서 작성한 HTML 파일에서 문장 하나의 색상을 바꿔보도록 하겠습니다.

<p style="color: red">이제부터 재미있게 만들어봐요</p>
<p>중간에 <strong>강조</strong> 하고 싶으면 strong 태그를 사용합니다.</p>

p태그에 style 속성을 추가했습니다. 그리고 안에 color라는 스타일을 red라는 값으로 지정했습니다. 이 파일을 다시 웹브라우저에서 열면 위의 문장 색상은 빨간색으로 바뀐것을 확인할 수 있습니다.

스타일은 항상 속성명: 속성값의 형태를 따릅니다. 여러 속성을 적용하고 싶다면 세미콜론 ;을 이용하여 여러 속성을 적용할 수 있습니다.

<p style="color: red; font-size: 20px;">이제부터 재미있게 만들어봐요</p>

style 태그와 선택자

만약 모든 문장의 색상을 바꿔주고 싶다면 어떻게 해야할까요?

모든 p 태그마다 style 속성을 추가한다면 너무 많은 단순 반복이 필요할겁니다. 이럴때 선택자를 이용하면 여러 요소들에 스타일을 적용할 수 있습니다.

스타일을 적용할때는 가급적 속성 보다 선택자를 이용하는게 좋은 방법입니다.

<!doctype html>
<html>
<head>
    ...
    <style>
    p {
        color: red;
    }
    </style>
</head>
<body>
    ...
</body>
</html>

위 처럼 style 태그를 추가하면 현재 페이지의 모든 p의 색상이 변경되는걸 확인할 수 있습니다.

위 코드의 의미는 다음과 같습니다.

<style>
선택자 {
    속성명: 속성값;
}
</style>

style 태그 안에서는 선택자와 중괄호의 쌍으로 스타일을 지정합니다.

선택자는 따라오는 {} 안에 정의된 스타일이 어디에 적용될지 지정하는 역할을 합니다. 세미콜론; 은 줄과 줄을 구분하는 역할을 합니다. 줄이 끝난 지점에서는 반드시 ;를 입력해 주어야 합니다. 그냥 줄내림은 새 줄로 인식하지 않아요.

태그 선택자

p {
    color: red;
}

앞서 본 코드에서 p는 모든 p 태그에 적용한다는 의미입니다.

id 선택자

모든 태그가 아닌 하나의 태그에만 적용하고 싶다면 id 선택자를 사용할 수 있습니다. id 선택자를 사용하려면 먼저 태그에 id 속성을 추가해야 합니다.

<p>이번달은 돈을 아껴써야 되요</p>
<p id="warn">아껴써야 된다고!</p>

그리고 <style> 에서 적용하고 싶은 태그의 id를 id선택자를 이용해 지정합니다. (id이름 앞에 #이 붙어있는걸 보세요.)

<style>
#warn {
    font-size: 30px;
}
</style>

이제 id가 warn인 p에만 속성이 적용되는 것을 볼 수 있습니다.

class 선택자

모든 태그마다 하나씩 id를 만들어준다면 중복해서 적어야 하는 내용이 많아지고 비효율 적일겁니다. 가급적 비슷한 것들을 묶어 공통된 class를 사용하는것이 일반적으로는 좋은 습관입니다.

<p class="info">정보</p>
<p class="warn">경고</p>
<p class="info">정보</p>

style 태그에서 클래스를 지정할 때에는 . 을 사용합니다.

.info {
    color: #B7C47F
}

.warn {
    color: #E3C381
}

계층 선택자

선택자는 중첩해서 사용할 수 있습니다. 선택자를 중첩해서 사용하면 앞서 선택된 요소들 가운데 다시 선택을 하게 됩니다.

<p class="info">정보<strong></strong></p>
<p class="warn">경고<strong></strong></p>

위와 같은 HTML에서

.warn strong {
    color: red;
}

위와 같은 선택자를 사용하면 info안에 있는 strong에는 적용되지 않고 warn안에 있는 strong에만 color가 적용되는걸 볼 수 있습니다.

외워야 할 게 이렇게나 많나요?

숙련된 웹 개발자라도 모든 CSS의 속성을 알고 있는 경우는 매우 드뭅니다. 미리 모두 외울 필요는 없고 필요한 것이 있을때 찾아서 사용할 수 있으면 됩니다.

CSS 선택자에 익숙해질 수 있는 게임도 있어요.

어떤 속성들이 가능한지는 Codepen 같은 곳에서 영감을 얻을 수 있습니다.