css 규칙에 대하여 알아보기

네 안녕하세요, 이번 포스팅에서는 css 규칙에 대하여 알아보도록 하겠습니다.

css도 프로그래밍 언어의 일부로써, 일련의 규칙이 존재합니다.

그래서 그 규칙을 지켜서 작성을 해야 제대로 된 기능을 발휘할 수 있습니다.

그럼 지금부터 이 규칙들에 대해 알아보도록 하겠습니다.

1. css 규칙

css 작성 시 지켜야 할 규칙들은 아래와 같습니다.

css 스타일은 부모 태그로부터 상속이 된다.
스타일 합치기가 가능하고, 오버 라이딩(덮어쓰기)가 가능하다.

1 - 1. css 스타일의 상속

모든 프로그래밍 언어가 그렇듯이, html에서도 상속이 존재합니다.

언제나 부모 태그에 상속이 됩니다.

이걸 좀 더 쉽게 말씀을 드리자면,

a라는 태그가 있습니다.

이 a 태그를 p 태그로 감쌌습니다.

이럴 경우에 부모 태그는 p 태그가 되고,

자식 태그는 a 태그가 되는 겁니다.

이런 식으로 상속이 됩니다.

그걸 이용한 간단한 예제를 통하여 봅시다.

<!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>부모 스타일 상속</title>
</head>
<body>
    <h3>부모 스타일 상속</h3>
    <hr>
    <p style="color:green">자식 태그는 부모의 스타일을
        <em style="font-size:25px">상속</em>받는다.</p>
</body>
</html>

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

이럴 경우에는 p 태그 내에 있는 em 태그가 상속이 된 겁니다.

em 태그는 폰트의 크기를 결정하는 태그이며, css에서 쓰입니다.

그럼 이제 이렇게 했을 때 결과는 어떻게 나오는지 한 번 보겠습니다.

보시게 되면 p태그의 글자색을 초록색으로 해둬서 em 태그로 감싼 글의 색도 초록색이 된 것이 보이시나요?

이러한 것을 보고 부모 태그에 자식 태그가 상속이 되었다고 합니다.

1 - 2. css 합치기와 오버라이딩

일단 css의 특징 중 하나는, 개발자가 만들어낸 css 스타일이 존재하지 않는다면,

브라우저는 각각의 태그에 대한 기본 스타일 시트를 가지고서 이를 적용을 하게 됩니다.

그래서 이러한 경우에는 4가지 종류의 시트가 동시에 적용이 될 수가 있습니다.

브라우저의 디폴트 스타일
css 스타일 시트 파일에 작성된 스타일
style 태그에 작성된 스타일
style 속성에 작성이 된 스타일

이렇게 많은 것들이 합쳐질 수 있습니다.

그래서 전에 보여드린 예제에서 스타일이 상속이 될 수가 있는 겁니다.

그리고 스타일의 오버 라이딩, 즉, 덮어쓰는 것이 가능한데,

이럴 경우에는 스타일 시트의 우선순위가 적용이 됩니다.

그래서 우선순위가 높을수록 그것이 제일 먼저 보입니다.

우선순위는 이렇습니다.

style 속성
style 태그 내에 작성된 스타일 시트
외부 css 스타일 파일
브라우저 기본 스타일

1이 가장 우선순위가 높고, 4가 우선순위가 가장 낮습니다.

그럼 이들을 적용한 간단한 예제를 통하여 알아봅시다.

<!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>스타일 합치기 및 오버라이딩</title>
    <link type="text/css" rel="stylesheet" href="external.css">
    <style>
        p {
            color: blue;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h3>p 태그에 스타일 중첩</h3>
    <hr>
    <p>Hello, students!</p>
    <p style="font-size:25px">안녕하세요 교수님!</p>
</body>
</html>

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

보시면 style 속성을 쓴 경우,

style 태그를 써서 작성한 경우,

외부 파일을 들여온 경우,

기본 브라우저가 제공하는 스타일이 적용된 경우가 다 있습니다.

그럼 결과 화면도 보여드리도록 하겠습니다.

이렇게 중첩이 잘 되어서 나온 것을 보실 수 있습니다.

이렇게 원하는 것들을 직접 합치고 덮어씌워서 표현이 가능합니다.

여기까지 css 규칙에 대하여 알아보았습니다.

다음 시간에는 태그 이름 셀렉터에 대하여 알아보는 시간을 가져보도록 하겠습니다.

긴 글 읽어주신 독자분들께 다시 한번 감사드립니다 ~

저작자표시 비영리 변경금지 (새창열림)

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

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

개발러 L의 뻔fun한 코딩

css 규칙에 대하여 알아보기