Programming

CSS 추가방법

캐스케이팅

CSS가 적용되는 우선순위가 있음

  1. 인라인 스타일
  2. 내부, 외부 스타일 시트
  3. 브라우저 기본값

인라인 스타일

태그 내부에 스타일을 설정함

인라인 스타일은 스타일 시트의 많은 장점을 상실시킴

되도록이면 인라인 스타일은 쓰지 않는 것이 좋음

구문


<태그 style="속성1: 값; 속성2: 값;">

코드


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>

<body>
    <h1 style="color: aquamarine; background-color: coral; padding: 30px;">Heading</h1>
</body>
</html>

결과

내부 스타일 시트

한 페이지에 고유한 스타일을 설정함

내부 스타일은 HTML의 <head> 섹션 내부의 <style> 태그 내에서 정의됨

구문


<head>
    <style>
        선택자 {
            속성: 값;
        }
    </style>
</head>

코드


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body {
            background-color: darkorange;
        }
        
        h1 {
            color: aqua;
            margin: 3rem;
        }
    </style>
</head>

<body>
    <h1>Heading</h1>
</body>
</html>

결과

외부 스타일 시트

.css 확장자 파일을 사용하여 페이지에 스타일을 적용함

외부 스타일은 HTML의 <head> 섹션 내부에서 <link> 태그를 사용하여 설정함

외부 스타일은 한 개의 파일만으로 전체 웹패이지의 스타일을 바꿀 수 있어 유지보수가 아주 편함

외부 스타일을 사용을 권장함

구문

HTML

<!-- HTML에 외부 스타일 시트 적용 -->
<head>
    <link rel="stylesheet" href="파일명.css">
</head>
CSS

/* CSS 코드 */
선택자 {
    속성: 값;
}

코드

HTML

<!-- HTML 코드 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Heading</h1>
    
    <p>가나다</p>
</body>
</html>
CSS

/* style.css */
body {
    background-color: burlywood;
}

h1 {
    color: aquamarine;
}

p {
    color: darkcyan;
    background-color: beige;
    font-size: 1.3rem;
}

결과

↑ ↓