CSS 기초, HTML에 CSS를 삽입하는 방법 (feat. 글자색과 밑줄)

지난 CSS 첫 포스트는 오리엔테이션 같은 느낌이었습니다.
이번 CSS 포스트에서는 CSS의 기초(HTML에서 CSS 코드를 사용하는 방법, 기본 문법)를 공부해보겠습니다.

지난 포스트

CSS 포스팅을 시작하겠습니다.

CSS 포스팅을 시작하겠습니다. 포스트의 내용은 생활코딩의 CSS 강의를 기반으로 하고 있습니다.

HTML 웹페이지에 CSS를 삽입하는 두 가지 방법

선택자와 선언

CSS 속성 color

위의 영상에서 중요한 것은 글자색을 바꾸는 속성을 배우는 것이 아니라 CSS의 기본을 이해하는 것이지만, color 속성에 대해서 나왔으니 정리하고 넘어가 보겠습니다.

태그에 바로 style 속성을 주는 방법

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h3 style="color:red">Hello World</h3>
    </body>
</html>

HTML 웹페이지에서 CSS를 실행하는 첫 번째 방법입니다.
위와 같이 제목 태그인 <h3> 안에 style="color:red"라는 코드를 삽입하면, 제목에 해당하는 Hello World라는 글씨가 빨간색이 됩니다.
말할 것도 없이 역시 띄어쓰기에 주의하셔야 합니다.

style 태그 안에 CSS 코드를 넣는 방법

<!DOCTYPE html>
<html>
    <head>
        <style>
            h3{color:red}
        </style>
    </head>
    <body>
        <h3>Hello World</h3>
    </body>
</html>

CSS를 실행하는 두 번째 방법입니다.
위와 같이 head 태그 안에 style 태그를 삽입해서, 그 안에 h3{color:red} 라는 코드를 삽입하면, 역시 제목에 해당하는 Hello World라는 글씨가 빨간색이 됩니다.

Hello World

두 소스 코드 다 화면으로 보이는 결과는 같지만, 첫 번째 코드는 하나의 제목에만 적용이 가능하고, 다른 제목들에도 똑같이 적용하려면 그때마다 코드를 추가적으로 삽입해야 합니다.
두 번째 코드는 위와 같이 한 번만 해놓으면 모든 h3 태그에 다 똑같은 색상이 적용이 됩니다.
상황에 따라서 맞는 방법을 써야겠습니다.

CSS 속성 text-decoration

text-decoration

<!DOCTYPE html>
<html>
    <head>
        <style>
            li{
                color:red;
                text-decoration:underline;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </body>
</html>

이제 CSS의 선택자가 h3가 아닌 li가 됐으니 li 태그들의 속성 값이 바뀌게 됩니다.
위에서 가장 중요한 내용은 속성을 두 가지 이상 사용할 경우에는 코드 사이에 꼭 ; 을 넣어야 한다는 것입니다.

text-decoration 코드는 말 그대로 텍스트를 꾸며주는 기능을 합니다.
밑줄을 그어주는 underline 이외에도 line-through, overline, underline overline 등의 속성 값들이 있습니다.

HTML
CSS
JavaScript

위의 코드와는 효과를 다르게 줘봤습니다.
HTML이라는 텍스트에는 line-through,
CSS에는 overline,
JavaScript에는 underline overline이라는 속성 값을 줬습니다.