I. CCS의 기본 - 1. 스타일과 스타일 시트

Hush 2022. 5. 31. 11:42

스타일

CSS 소스에서 한 줄이 하나의 스타일에 해당한다.

CSS스타일의 형식은 다음과 같다

선택자 {속성1: 속성값1 ; 속성2: 속성값2 }

선택자는 스타일을 어느 태그에 적용할 것인지 알려 주는 것이고, 중괄호 사이에는 스타일 정보를 넣는다.

속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라고 하며, 세미콜론으로 구분하여 여러개 지정 가능하다.

예를들어 텍스트단락의 글자를 가운데로 정렬하고 글자색을 파랑으로 하고 싶다면 다음처럼 하면 된다

p {
    text-align: center;
    color: blue;
}

css에서 주석은 /* */를 활용하여 작성할 수 있다.

스타일 시트

웹 문서 안에서는 스타일 규칙을 여러 개 사용한다.

이런 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한군데 묶어 놓은 것을 스타일 시트라고 한다.

스타일 시트는 크게 웹 부라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과 사이트 제작자가 만드는 사용자 스타일로 나눌 수 있다. 사용자 스타일은 다시 인라인 스타일과 내부 스타일 시트, 외부 스타일 시트로 나뉩니다.

스타일 시트
사용자 스타일			브라우저 기본 스타일
인라인 스타일	내부 스타일 시트	외부 스타일 시트

브라우저 기본 스타일

CSS를 사용하지 않은 웹 문서에서 사용되는 기본 스타일을 브라우저 기본 스타일이라고 한다.

우리가 지금껏 html실습을 할 때 본 스타일이 브라우저 기본 스타일이다.

인라인 스타일

간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시한다.

이런 방법을 인라인 스타일이라고 한다.

스타일을 적용하고 싶은 부분이 있으면 해당 태그에 style속성을 사용해 style="속성 : 속성값;" 형태로 스타일을 바꿀 수 있다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body>
        <h1 style="text-align: center; color: blue;">서울대학교 가는 법</h1>
        <p style="text-align:center">서울대 입구역에서 서울대생 전용 셔틀버스 승차, 학생회관에서 하차.</p>
    </body>
</html>

내부 스타일 시트

웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고 한다.

스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정해야 하므로 모든 스타일 정보는 <head>태그 안에서 정의하고 <style>태그 사이에 작성한다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            p {
                background-color: antiquewhite;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1 style="text-align: center; color: blue;">서울대학교 가는 법</h1>
        <p>서울대 입구역에서 서울대생 전용 셔틀버스 승차, 학생회관에서 하차.</p>
        <h1 style="text-align: center; color: rgb(168, 0, 0)">고려대학교 가는 법</h1>
        <p>안암역에서 하차, 도보 15분.</p>
    </body>
</html>

외부 스타일 시트

웹 사이트는 보통 여러개의 웹 문서로 작성된다. 이런 상황에서 여러 웹 무넛에 사용할 스타일을 별도 파일로 지정해 놓고 필요할 때 가져와서 사용하는 방법이 외부 스타일 시트를 활용하는 방법이다. *.css 라는 파일 확장자를 사용한다.

외부 스타일 시트 파일에 스타일을 작성할 때는 <style> 태그를 사용하지 않는다.

이렇게 만든 외부 스타일 시트는 웹 문서에 연결해야 스타일이 문서에 적용된다.

이때 사용하는 태그는 <link> 태그이다.

link 태그의 기본형은 다음과 같다

<link rel="stylesheet" href="외부 스타일 시트 파일 경로">

바로 전 예제의 스타일 시트를 별도의 파일로 만들어서 연결해 보았다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <link rel="stylesheet" href="testcss.css">
    </head>
    <body>
        <h1 style="text-align: center; color: blue;">서울대학교 가는 법</h1>
        <p>서울대 입구역에서 서울대생 전용 셔틀버스 승차, 학생회관에서 하차.</p>
        <h1 style="text-align: center; color: rgb(168, 0, 0)">고려대학교 가는 법</h1>
        <p>안암역에서 하차, 도보 15분.</p>
    </body>
</html>

p {
    background-color: antiquewhite;
    text-align: center;
}

저작자표시 (새창열림)