오뚝이개발자

[CSS] CSS 기초2 본문

Front-end/CSS

[CSS] CSS 기초2

땅어 2020. 7. 6. 21:11
728x90
300x250

글씨크기, 정렬

style태그 안에 아래와 같은 코드를 추가해보자.

h1 {
            font-size: 45px;
            text-align: center;
   }

위 코드는 h1태그가 사용된 곳의 글씨크기를 45px로 바꾸고, 가운데 정렬을 시행한다.

h1태그가 사용된 WEB의 크기가 45px로 바뀌고, 가운데 정렬이 되었다.

 

class 선택자

<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw">CSS</a></li>

위와 같이 코드를 수정한 뒤, style 태그 안에 아래와 같은 내용을 추가해준다.

.saw {
        color:gray;
}

그러면 saw라고 명명한 class들만 gray로 색상을 바꾸어준다. 이러한 것을 class 선택자라 하고 style 태그 안에선 위와 같이 style 옵션을 준다. class는 여러 개일수도 있고, 이들은 공백으로 구분한다. 아래와 같은 경우도 가능하다는 것이다.

<li><a href="2.html" class="saw active">CSS</a></li>

 

id 선택자

<li><a href="2.html" class="saw" id="active">CSS</a></li>

위와 같이 id를 추가해보자. 그 후 style태그 안에 아래와 같은 코드를 추가해주자.

#active {
            color:red;
        }

그러면 active라는 id를 가진 부분만 red로 색상을 바꾸어준다. 이러한 것은 id 선택자라 하고 style 태그 안에선 위와 같이 style 옵션을 준다. id선택자는 유일하다.(id라는 것이 본래 유일한 값인 경우가 많다는 것을 생각해보면 된다.)

 

선택자(selector) 우선순위

예시1)

<!doctype html>
<html>
<head>
    <title>WEB1 - HTML</title>
    <meta charset="utf-8">
	<style>
        a {
            color:orange;
            text-decoration: none;
        }
        .active {
            color:red;
        }
        .saw {
            color:gray;
        }
        h1 {
            font-size: 45px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html" class="saw">HTML</a></li>
        <li><a href="2.html" class="saw active">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>    
    </ol>
</body>

위와 같이 작성하면 "CSS"의 색은 무엇이 될까? 답은 gray다. 이유는 style 태그 안에서 .saw가 더 나중에 등장했기 때문이다. 이처럼 같은 선택자 간에는 나중에 등장하는 것이 우선한다.

예시2)

<!doctype html>
<html>
<head>
    <title>WEB1 - HTML</title>
    <meta charset="utf-8">
	<style>
        a {
            color:orange;
            text-decoration: none;
        }
        #active {
            color:red;
        }
        .saw {
            color:gray;
        }
        h1 {
            font-size: 45px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html" class="saw">HTML</a></li>
        <li><a href="2.html" class="saw" id="active">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>    
    </ol>
</body>

위와 같이 작성하면 "CSS"의 색은 무엇이 될까? 답은 red다. 이유는 id 선택자가 class 선택자보다 우선순위가 높기 때문이다. 즉, 서로 다른 선택자 간에는 우선순위를 따른다. 참고로, 선택자 우선순위는 id 선택자 > class 선택자 > tag 선택자이다.

728x90
300x250
저작자표시

'Front-end > CSS' 카테고리의 다른 글

[CSS] CSS 기초 6(미디어 쿼리)  (0) 2020.07.10
[CSS] CSS 기초 5(div, span, 그리드)  (0) 2020.07.08
[CSS] CSS 기초 4(경계선, 박스모델 조절)  (0) 2020.07.08
[CSS] CSS 기초3(CSS 박스 모델)  (0) 2020.07.06
[CSS]CSS기초 1  (0) 2020.06.30
'Front-end/CSS' Related Articles more
Comments