css style 태그로 스타일 시트 만들기

네 안녕하세요, 이번 포스팅에서는 css 스타일 시트를 본격적으로 작성을 한 번 해볼 겁니다.

css 스타일 시트는 html로 작성한 웹페이지를 좀 더 시각적으로 돋보이게 만들어주는 기능을 합니다.

그래서 정말 빠지면 안 되는 기능 중 하나이죠.

그래서 이번 포스팅에서는 이 스타일 시트를 어떻게 작성을 하는지 한 번 알아보도록 하겠습니다.

그럼 함께 보시죠.

1. 스타일 시트의 구성 : style 태그 이용

제가 이전 포스팅에 작성을 했듯이, 스타일 시트는 이런 식으로 생겼습니다.

<style>
	span {
		color : blue;
		font-size : 20px;
	} // span 태그 스타일 선언
</style>

이렇게 생겼습니다.

여기에서 괄호 바깥에 빠져있는 것을 우리는 선택자(selector)라고 부르고,

괄호 안에 보이는 것 중에 콜론 양 옆에 글자들이 쓰여 있죠?

여기에서 좌측에 있는 것을 프로퍼티라고 부르고, 우즉에 있는 것을 값이라고 합니다.

그리고 이 값을 쓰고나면 무조건 세미콜론을 붙여줘야만 인식을 합니다.

또한, 이 스타일 시트 역시 html의 한 부분이기 때문에 대소문자 구별을 크게 하지 않습니다.

2. css 스타일 시트 만들기 : style 속성 이용

그럼 이제 본격적으로 css 스타일 시트를 작성을 해볼 건데, css 스타일 시트는 다음과 같은 특징이 있습니다.

style 태그는 반드시 head 태그 내에 작성이 되어야 한다.
style 태그는 여러 번 작성이 가능하고, 그 시트들이 전부 합쳐져서 적용이 된다.
style 태그에 작성된 스타일 시트는 웹 페이지 전체에 작용을 한다.

보통 head 태그에 작성을 한 것은,

웹의 몸통, 다시 말해 body 태그가 시작이 되기 전에 무언가를 선언을 하는 것과 같은 기능을 합니다.

그래서 웹의 전체적인 부분에 적용이 됩니다.

웹의 일부만 적용을 하고싶으시다면,

body 태그 내에 있는 특정 태그 내에 style=" " 이런 식으로 속성을 붙여서 나타낼 수도 있습니다.

하지만 이것보다 좀 더 편안한 방법이 있는데,

그건 차차 css를 다루면서 알려드리도록 하겠습니다.

그럼 스타일 시트를 작성을 하여 나타낸 간단한 예제를 통하여 같이 봅시다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>%lt;style&gt; 태그로 스타일 만들기</title>
    <style>
        body {background-color: linen;
                color : blueviolet;
                margin-left: 30px;
                margin-right: 30px;}
        h3 {text-align: center;
            color : purple;}
    </style>
</head>
<body>
    <h3>손연재</h3>
    <hr>
    <p>
    저는 체조 선수 손연재입니다.
    음악을 들으면서 책 읽기를 좋아합니다.
    감치찌개와 막국수 무척 좋아합니다.
    </p>
</body>
</html>

이렇게 한 번 작성을 해봤습니다.

이렇게 하면 body 태그 내에 있는 모든 부분의 배경 색이 변해있고,

h3 태그 내에 있는 글자 색이 바뀌어 있습니다.

그럼 결과 화면도 같이 보실까요?

이렇게 잘 나와있음을 보실 수 있습니다.

해당 태그 내에 있는 것들의 색깔이 바뀌었습니다.

그리고 이렇게도 만들 수 있습니다.

그럼 예제를 통하여 같이 보실까요?

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>&lt;style&gt; 속성에 스타일 시트 만들기</title>
    <style>
        p {
            color: red;
            font-size: 15px;
        }
        /* 모든 p 태그에 적용 */
    </style>
</head>
<body>
    <h3>손 홍 민</h3>
    <hr>
    <p>오페라를 좋아하고</p>
    <p>엘비스 프레슬리를 좋아하고</p>
    <p style="color:blue">김치부침개를 좋아하고</p>
    <p style="color:magenta; font-size:30px">축구를 좋아합니다.</p>
</body>
</html>

이렇게 한 번 작성을 해봤습니다.

일단 head 태그 내에 있는 스타일 시트가 기본적으로 적용이 되었지만,

이걸 부분적으로 변경을 하고 싶다면,

p 태그 내에서 style 속성을 이용하여 변경을 해주면 됩니다.

그렇게 되면 우선순위가 변경이 되어서 해당 태그만 스타일이 바뀝니다.

그럼 결과 화면을 같이 보실까요?

이렇게 새롭게 p 태그 안에 다른 속성을 집어넣은 부분들은 변해있음을 알 수 있습니다.

우리가 특정 부분에만 포인트를 주고 싶을 때는 이러한 방법을 활용할 수 있습니다.

여기까지 스타일 시트를 만드는 기본적인 방법에 대하여 알아보았습니다.

다음 포스팅에서는 외부에서 스타일 시트 파일을 불러오는 방법에 대하여 배워보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css 클래스 셀렉터에 대하여 알아보기 (0)	2023.03.13
css 태그 이름 셀렉터에 대하여 알아보기 (0)	2023.03.13
css 규칙에 대하여 알아보기 (0)	2023.03.13
css link 태그 이용하여 외부 스타일 시트 불러오는 방법 알아보기 (2)	2023.03.13
css 기초 맛보기 (0)	2023.03.10

개발러 L의 뻔fun한 코딩

css style 태그로 스타일 시트 만들기