02. CSS 스타일을 적용하는 3가지 방법(Inline CSS, Internal CSS, External CSS)

Frontend/CSS

02. CSS 스타일을 적용하는 3가지 방법(Inline CSS, Internal CSS, External CSS)

개발개발빈이 2022. 3. 28. 21:13

○ Inline CSS

- 스타일을 적용할 부분의 여는 태그 안에 바로 적용

- 형식 : style="속성1: 속성값; 속성2: 속성값; ..."

<div style="width: 100px; height: 100px; background-color: cadetblue;"></div> 

<div style="width: 200px;        /* 주의: css에서는 단위생략X */
            height: 150px; 
            background-color: darkmagenta;"></div>

○ 선택자(Selector)

- 스타일을 적용하기 위한 대상

- HTML요소를 사용할 수도 있고 ID, Class의 형태로 정의할 수도 있다

- 유형

① 태그(HTML 요소)

② #선택자 이름 : 본문에 적용할 때 id="선택자이름" (선택자이름을 한번만 적용할 수 있다)

③ .선택자 이름 : 본문에 적용할 때 class="선택자이름" (선택자이름을 여러번 적용할 수 있다)

○ Internal CSS

- 내부 스타일 시트(internal CSS) : HTML 문서 안에 <style></style> 태그로 해당 문서에서 사용할 스타일을 정리

- 보통 <head> 안에 위치하지만, <body>에 있을 수도 있고 여러 개의 <style> 태그가 존재할 수도 있다

- <style> 태그 안은 CSS의 공간 → HTML문서 안에 존재하지만 HTML문법이 아닌 CSS문법에 맞게 작성

<!DOCTYPE html>
<html>
    <head>
        <title>internalCSS</title>
        <style>
            h1 {background-color: bisque; color: brown;}
            h2 {background-color: cadetblue; color: white; text-indent: 15px;}
            input {border: 2px solid coral; /*선굵기 직선 선색상*/}  
            #myDiv {background-color: darkseagreen;}
            .intro {background-color: firebrick; color: white;}
        </style>
    </head>
    <body>
        
        <h1>제주특별시</h1>
        <h2>제주시</h2>
        <h2>서귀포시</h2>
        <hr>
        
        <input type="text" autofocus>
        <input type="password">
        <hr>

        <div id="myDiv">손흥민</div>        <!--id는 같은 이름은 문서 내에서 한번만 사용-->
        <hr>

        <p class="intro">황의조</p>
        <span class="intro">황인범</span>
        <div class="intro">황희찬</div>      <!-- class는 여러번 사용가능-->
    
    </body>
</html>

○ External CSS

- 외부 스타일 시트(external CSS) : 스타일만 따로 모아놓은 .css 파일을 만든 뒤 HTML문서로 import해서 사용

- css파일 import : <link rel="stylesheet" href="css파일 경로 및 이름">

@charset "UTF-8";     
            /* 문자인코딩 UTF-8 : 반드시 첫줄에 와야 한다 */

/* myStyle.css */

/* <style> 태그없이 선택자{속성: 속성값;}만 입력 */

* {font-family: 궁서체;
   font-size: 15px;
   font-style: italic;
   font-weight: bold;} /* * : 모든 요소*/

body{background-color: beige;
     margin: 0;  /* 바깥쪽 여백 상하좌우 모두 여백0, 순서는 위부터 시계방향 */
     padding: 0; /* 안쪽 여백*/}

.line{border:1px dotted gray}

#myLayer{width: 200px; height: 200px;
         background-color: darkcyan;}

△ css 문서 예시

<!DOCTYPE html>
<html>
    <head>
        <title>externalCSS</title>
        <!-- mystyle.css 파일 import -->
        <link rel="stylesheet" href="mystyle.css">
    </head>
    <body>
        <h3>무궁화 꽃이 피었습니다</h3>
        <input type="text" class="line">
        <textarea cols="10" rows="3" class="line"></textarea>
        <div id="myLayer"></div>
    </body>
</html>

△ external CSS 적용한 HTML문서 예시

○ CSS 스타일을 적용하는 3가지 방법

- inline CSS: 일회성

- internal CSS : 현재 페이지에서 반복해서 사용가능

- external CSS : 다른 페이지에서도 반복된 스타일을 사용하고 싶을 때