CSS (1) - CSS 적용 방법

css에서 스타일을 주는 방법에는 세가지가 존재한다.
이번 포스팅에서 css의 적용 방법에 대해 알아보자

<목차>

인라인 style을 활용한 css 적용법
<style> 엘리먼트를 활용한 css 적용법
외부파일 생성을 통한 css 적용법

<1. 인라인 style 방법>

이 방법은 특정 엘리먼트에 style이라는 속성을 주고 속성값 변경을 통해 css를 적용하는 방법이다.

<body> 

    <h1 style="font-size:12px; background: red;">내용</h1> <!--블록 -> 인라인형태로 변경가능 글자크기도 조절할 수 있다.--> 
    <h2 id="title">2</h2> 
    <h3 class="title">3</h3> 
    <h4>4</h4> 
    <h5>5</h5> 
    <h6>6</h6> 

</body>

위의 코드를 살펴보면 <body>엘리먼트 안에 있는 <h1>엘리먼트의 style 속성을 이용해 해당 엘리먼트가 웹페이지 상에서 차지하는 영역에 스타일을 준 것을 알 수 있다.
<h1 style="font-size:12px; background:red;">에서 font-size:12px;를 이용해 폰트 사이즈를 12px로 변경하였고 background:red;를 이용해 해당 엘리먼트가 차지하고 있는 영역만큼에 색상을 넣을 수 있다.

여기서 background:red;를 활용해 색상을 부여할 때 <h1>이 블럭(block)속성이기 때문에 한줄 전체를 차지하게 되고 <h1>이 차지하고 있는 영역 전체가 빨간색으로 변한 것을 볼 수 있다.
인라인(inline)속성을 가지고 있는 <span>엘리먼트에서도 style을 이용해 색상부여가 가능하다. <span>엘리먼트의 경우, 인라인 속성이기에 해당 영역만큼만 색이 칠해져 있는 것을 확인할 수 있다.

<body>

    <div>블럭1</div> 
    <span>인라인1</span> 
    <span style="background: blue;">인라인2</span> 
    <div>블럭2</div> 

</body>

<2. style 엘리먼트를 활용한 방법>

이 방법은 앞서 살펴본 인라인 스타일처럼 해당 엘리먼트에 속성값을 부여하는 형태로 다이렉트로 스타일을 주는 것이 아닌, <style>엘리먼트 안에 css만을 모아놓은 형태를 띤다.
<style>엘리먼트는 기본적으로 <head>엘리먼트 안에서 작성된다.
앞서 살펴본 바로, <head>엘리먼트는 사람의 뇌와 같은 역할을 하는 부분으로 화면에 표출되는 것이 아닌 내용을 저장하는 역할을 한다. 따라서 <head>엘리먼트 안에서 <style>엘리먼트를 작성하고 이때, 선택자(selector)를 사용해서 css를 적용하게 된다.

선택자에 대해 자세히 알아보기 전에 class와 id에 대해 먼저 짚고 넘어가야 한다. 모든 엘리먼트에게 부여 가능한 속성으로 id라는 속성과 class라는 속성이 있다. id는 엘리먼트의 고유한 이름으로 특정 엘리먼트를 집어내고 싶을 때 사용하고 class의 경우 그룹화하여 접근하고 싶을 때 사용한다. 다음의 코드를 살펴보자.

<body>

    <h1 style="font-size:12px; background: red;">내용</h1> 
    <h2 id="title">2</h2> 
    <h3 class="title">3</h3> 
    <h4>4</h4> 
    <h5>5</h5> 
    <h6>6</h6> 
    
</body>

해당 코드에서는 <h2 id="title">와 <h3 class="title">을 사용해 <h2>, <h3>엘리먼트 각각에 "title"이라는 id와 class를 부여했다.

이제 <head>부분의 코드를 살펴보자.

<!DOCTYPE html>
<html lang="kor">
<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>Document</title>
    <style>
        /* 
           1. body태그 안에서 id가 title이라는 element 선택을 먼저 할 줄 알아야 합니다. 
           2. 컴퓨터적인 사고방식으로 어떻게 하는지 알아야 합니다. (선택자)
        */
        
        #title{
            /* css 내용 입력란 */ 
            font-size:12px; 
            background: yellow;
        }

        .title{
            font-size:12px; 
            background: green;
        }

    </style>
</head>

위의 코드는 <head>엘리먼트 안에 <style>엘리먼트를 작성하였고 id와 class라는 속성을 사용해서 css를 적용한 것이다. 이때 선택자(selector)를 사용하게 되는데 <style>엘리먼트 안에 작성된 #title과 .title이 바로 선택자이다.

#title{ /* css내용 입력란 */ }
-> 해당 코드는 title이라는 id를 가진 엘리먼트에게 중괄호 안에 있는 코드를 실행시키겠다는 의미이다.

.title{ /* css내용 입력란 */ }
-> 해당 코드는 title이라는 class를 가진 엘리먼트에게 중괄호 안에 있는 코드를 실행시키겠다는 의미이다.

코드 실행 결과를 보면 두 코드를 통해 title이라는 id를 가진 엘리먼트와 title이라는 class를 가진 엘리먼트에게 style을 부여할 수 있다는 것을 알 수 있다. 여기서 중괄호{ }를 사용하는 이유는 특정 선택자의 css 영역을 구분하기 위함이라고 보면 된다.

+) 추가로 id와 class의 차이를 조금 더 살펴보자면 id는 레이아웃을 구성할 때 주로 사용하고 하나밖에 없는 경우에 id속성을 부여해 사용한다. 반면에 반복적으로 사용되는 것들은 주로 class 속성을 부여해 사용한다. 기능적인 측면을 봤을 때 class와 id 중 하나만 사용하더라도 작동하는 데에는 아무런 문제가 없다.

앞서 살펴본 바와 같이 <style> 엘리먼트를 사용해 css를 적용할 때 선택자를 사용하게 되는데, id와 class 이외에 다른 선택자들도 많이 존재한다. <body> 부분에 다음과 같은 코드를 작성하였다고 하자.

<body>

    <ul>
        <li>리스트1</li>
        <li>리스트2</li>
        <li>리스트3</li>
        <li>리스트4</li>
    </ul>

    <ul>
        <li>리스트1</li>
        <li>리스트2</li>
        <li>리스트3</li>
        <li>리스트4</li>
    </ul>
    
</body>

이는 아래와 같은 형태로 웹페이지 상에 나타나게 된다.

이제 다음과 같이 <body>파트의 <ul>엘리먼트에 class 속성을 부여하고 부여된 class 속성을 활용하여 <head>파트의 <style>엘리먼트에서 선택자를 이용해 css를 적용해 보자.

<body>

    <ul class="menu1">
        <li>리스트1</li>
        <li>리스트2</li>
        <li>리스트3</li>
        <li>리스트4</li>
    </ul>

    <ul class="menu2">
        <li>리스트1</li>
        <li>리스트2</li>
        <li>리스트3</li>
        <li>리스트4</li>
    </ul>
    
</body>

/* 코드1 */ 

<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>Document</title> 
    <style>
    
        li{ display:inline; }
        
    </style> 
</head>

/* 코드2 */ 

<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>Document</title> 
    <style> 
        
        ul > li{ display:inline; } 
    
    </style> 
</head>

/* 코드3 */ 

<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>Document</title> 
    <style>
        
        .menu2 > li{ display:inline; } 
    
    </style> 
</head>

해당 코드들의 의미를 살펴보면 다음과 같다.

li { display:inline } : <body>엘리먼트 안의 모든 li가 인라인(inline)으로 변경됨.
ul > li { display:inline } : <ul>엘리먼트 안에 있는 <li>에만 적용.

여기서 <ul>엘리먼트가 여러개인 경우, <ul>엘리먼트마다 class를 부여하여 css를 적용할 수 있다.

.menu2 > li { display:inline } : class가 menu2인 <ul>엘리먼트 안의 <li>에 css 적용.

코드3 실행결과를 보면 class="menu2"인 <ul>엘리먼트만 인라인으로 속성이 변한 것을 확인할 수 있다.

선택자(selector) 방식을 요약하면 다음과 같다.

selector 방식에서 #은 id를 뜻한다.
selector 방식에서 .은 class를 뜻한다.
selector 방식에서 ">"은 하위 엘리먼트를 뜻한다.

<3. 외부파일 생성을 통한 방법>

이 방법은 css확장자(파일명.css)를 가지는 외부 파일을 생성한 후 해당 파일에서 작업을 진행하는 방식이다. 해당 방법을 사용하기 위해서는 우선 내가 작성한 html 파일에서 외부 파일을 가지고 올 수 있도록 연결을 해줘야 한다. 이 때 <link>엘리먼트를 사용하여 html 파일에서 외부 파일에 접속한다.

<link>엘리먼트에 대해 알아보자.
<link>엘리먼트에는 다음의 3가지의 속성값이 존재한다.

href : 파일의 경로
type : 파일의 형태
rel : stylesheet라는 것을 명시

<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>Document</title> 
    
    <link href="파일경로" type="text/css" rel="stylesheet"> 

</head>

이제 본격적으로 html 파일에서 <link>엘리먼트를 사용하여 css를 적용하는 법을 살펴보자.
html 파일에 아래와 같은 코드가 작성되어 있고 html 파일이 존재하는 해당 디렉토리에 css 파일이 아래와 같은 코드로 작성되어 존재하고 있다고 하자.

<!DOCTYPE html> 
<html lang="en"> 
<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>Document</title> 
    
    <link href=".\index.css" type="text/css" rel="stylesheet"> 
    
</head> 
<body>
    <div id="header">1</div> 
    <div id="visual">2</div> 
    <div id="content">3</div> 
</body> 
</html>

/* CSS style sheet */

#header{
    background:red;
    height:120px;
}


#visual{
    background: blue;
    height:450px;
}


#content{
    background: yellow;
    height:300px;
}

<body>의 <div>엘리먼트에 각각 "header", "visual", "content"라는 id 속성을 부여했고 css파일에서 선택자를 활용해 각각의 영역에 스타일을 줄 수 있다는 것을 확인할 수 있다.

이상으로 세가지 css 적용 방법에 대해 알아보았다. 주의할 점은 이 방법들에 우선순위가 존재한다는 것이다. 예를 들어 외부 파일을 생성하여 <link>엘리먼트를 사용하는 것보다 인라인 스타일로 해당 엘리먼트의 속성값에 다이렉트로 style을 넣는 것이 더 우선한다. 즉, 두가지 코드가 동시에 작성되었을 때 인라인 스타일로 css를 적용하는 방식이 <link>엘리먼트를 사용한 부분을 덮어써 버린다. 결국 결과값으로는 인라인 스타일로 css를 적용한 형태만 출력되게 된다.
우선순위가 가장 센 것은 인라인 스타일이고 <style>엘리먼트 활용 -> 외부 파일 활용 순으로 강하다.

우선순위

인라인 스타일 활용
<style>엘리먼트를 활용
외부 파일 생성을 통한 <link>엘리먼트 활용

또한 css는 절차지향적이기 때문에 외부파일을 생성하여 css 적용시 아래에 있는 코드가 위에 있는 코드보다 나중에 실행되기 때문에 결과값으로는 아래에 있는 코드가 출력되게 된다.

'CSS' 카테고리의 다른 글

CSS skills(2) - 속성 선택자 , display:none; , input[id=" "]:checked{ } , 인접 접근자 + , :nth-child (0)	2021.12.27
CSS skills(1) - display, float, position (0)	2021.12.22
CSS 문법 (0)	2021.12.21
CSS(2) - width, height, margin, padding (0)	2021.12.21
CSS란? (0)	2021.12.21

<목차>

<1. 인라인 style 방법>

<2. style 엘리먼트를 활용한 방법>

<3. 외부파일 생성을 통한 방법>

우선순위

'CSS' 카테고리의 다른 글

티스토리툴바