[HTML / CSS] CSS기초 2. style 선언자 (tag, id, class)

우선, 시작하기 전에 오늘 사용할 예제 코드를 소개한다.

<!-- HTML File -->

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <style>
        div{
            border: 1px soild black;
            width: 300px;
            height: 200px;
        }

        .class_1{
            width: 200px;
            height: 300px;
        }


        #id_1{
            width: 200px;
            height: 500px;
            border: 1px solid black;
        }
        

    </style>
</head>

<body>
    <div id="id_1">

    </div>
    <div class="class_1">

    </div>
    <div>

    </div>
</body>

</html>

설명을 쉽게 하기 위해 CSS는 쓰지 않고 html style 방식으로 대체한다.

위의 코드에 디자인을 넣기 위해서는, 원하는 tag를 지정하여 그 tag에만 style을 부여하여야 할 것이다.

이러한 경우 지정을 하기 위해서는 각 tag에 이름값을 지정해야 원하는 설정을 넣을 수 있을 것이다.

이러한 이름값들을 tag, class, id 로 지정할 수 있다.

위의 예시 코드에서 보면, style 태그 안에 3개 종류의 선언 방식이 있다.

아래에서 하나씩 설명한다.

TAG

div{
    border: 1px soild black;
    width: 300px;
    height: 200px;
}

style 요소의 맨 위를 보면 div라는 목표에 해당 속성들을 지정한 것을 볼 수 있을 것이다.

(속성들은 나중에 설명할 것이니, 지금은 중요하게 보지 않아도 된다.)

html을 공부하고 왔다면, html 태그 중 <div>라는 것이 있는 것을 알 것이다.

위의 코드는, 해당 html 파일 안의 모든 <div> 태그에 해당 속성을 부여하는 것이다.

해당 방식을 쓸 때 주의해야 할 점은, 모든 <div> 태그에 속성을 부여함으로

자칫하면 디자인이 전체적으로 망가질 우려가 있다.

이를 방지하기 위해, 아래의 방법을 쓴다.

Class

.class_1{
    width: 200px;
    height: 300px;
}

두번째 Style 요소를 보면, .class_1 이라는 목표에 해당 속성을 지정하였다.

html의 두번째 <div>를 보면 class="class_1"이라는 속성이 포함된 것을 볼 수 있을 것이다.

class는 보통 여러 태그에 동일한 효과를 넣기 위해 사용는 것이며,

style 요소에서 선언할 때는 앞에 . (dot)을 붙이고 그 뒤에 클래스명을 입력하는 것으로 선언한다.

ID

#id_1{
    width: 200px;
    height: 500px;
    border: 1px solid black;
}

마지막으로, 첫번째 <div> 속성을 보면 id가 지정된 것을 볼 수 있을 것이다.

class와 비슷한 속성으로 이해하면 된다. 단지, id는 html 파일 내에서 특정 태그를 찾기 위한 것임으로,

한 번 밖에 쓰지 않을 것임으로 여러 효과를 한번에 지정하고 싶다면 class 속성을 이용하는 것이 좋다.

style 요소에 선언할 때는 앞에 #을 넣고 그 뒤에 아이디명을 입력하는 것으로 선언한다.

우선순위

위의 설명을 듣고 나면, 한 가지 의문점이 생길 것이다.

tag 선언을 통해 <div>의 style을 선언했는데, 나머지 id / class 선언문도 <div>에 선언됬다.

그럼 이때 무엇이 제일 우선시되냐가 문제일 것이다.

답은, 선언자에 따라 우선순위가 다르다는 것이다.

우선 순위는 아래와 같다.

!important > ID > CLASS > TAG

위와 같이 ID에 속성이 지정되었을 경우, 같은 속성을 선언한 CLASS, TAG는 무효화되고 ID에 선언된 값만 표시된다.

그런데, 뜬금없이 !important라는 것이 튀어나왔다.

!important

div{
    border: 1px soild black;
    width: 300px;
    height: 200px !important;
}
#id_1{
    width: 200px;
    height: 500px;
    border: 1px solid black;
}

.class_1{
    width: 200px;
    height: 300px;
}

!important는, 선언자 우선 순위와는 관계 없이, 0순위 우선권을 부여하여 표시할 수 있게 하는 속성이다.

위의 코드를 해석하자면, .class_1의 속성이나 #id_1의 속성으로 인해 div 속성이 묻혀야 되는 것이 정상이지만,

!important 선언으로 순위를 깨버리고 최상위권으로 올라가 id / class 속성을 무효화 시킨 것이다.

이상으로 선언자들을 알아보았다.

다음 포스팅부터는 직접적인 style 속성들에 대해 알아볼 것이다.

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

'Develop > Web' 카테고리의 다른 글

[HTML / CSS] CSS calc() - 수치 연산 (0)	2018.12.15
[HTML / CSS] CSS기초 3. CSS 연결 (link / import) (2)	2018.11.22
[HTML / CSS] CSS 기초 1. Style과 CSS (0)	2018.11.22
[WEB / JQuery] Click 이벤트가 작동하지 않을 때 대처 (0)	2018.11.10
[WEB / Javascript] IE9 이하 브라우저 html5 지원 (0)	2018.11.08

TAG

Class

ID

우선순위

!important

'Develop > Web' 카테고리의 다른 글

티스토리툴바