[CSS] 0.CSS?

Dev_Study/CSS 2021. 6. 9. 17:40

CSS 최신버전 로고

CSS?
종속형 시트 또는 캐스케이딩 스타일 시트( Cascading Style Sheets, CSS)는
마크업 언어가 실제 표시되는 방법을 기술하는 언어로,
HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다.
W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면
CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다.
즉, HTML 구조는 그대로 두고
CSS파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.

현재 개발 중인 CSS3의 경우 그림자 효과, 그라데이션, 변형 등
그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다.
또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있다.

역사
CSS는 1994년 10월 10일, 하콤 비움 리(Håkon Wium Lie)가 처음 제안하였다.

버전의 변화

CSS는 지속적으로 새로운 버전이 나오고 있다.
1996년에 도입된 CSS 1은 CSS의 바탕이 되었다.

CSS의 표준으로는 CSS 2.1이 있으며
이전 버전에 비하여 새로운 기능과 도구가 추가되었다.

대다수의 웹 브라우저는 CSS 3를 잘 지원한다.
현재 W3C에서는 CSS3을 표준으로 만들고 있다.

CSS는 여러 수준과 프로파일을 가지고 있다.
각 수준의 CSS는 일반적으로 새로운 기능을 담고 있으며
CSS1, CSS2, CSS3, CSS4로 나뉜다.
프로파일들은 일반적으로 특정한 장치나 사용자 인터페이스를 위해 만들어진
하나 이상 수준의 CSS의 하부 집합이다.
현재 휴대용 장치, 프린터, 텔레비전 수상기를 위한 프로파일들이 있다.

■ CSS1
첫 CSS 규격은 공식 W3C 권고안이 되었으며
그 이름은 CSS1이다.1996년 12월에 발표되었다.

■ CSS2
CSS2는W3C가 개발하였으며1998년 5월에 권고안으로 발표되었다.

■ CSS3
CSS3는 2005년 12월 5일이후 개발 중에 있다.
W3C CSS3 로드맵은 요약과 도입부를 제공하고 있다.
전체가 모듈화되어
사용자 에이전트가 모듈에 대한 모든 모듈을 지원하지 않거나
자유롭게 선택할 수 있도록 하고 있으며,
다른 세로 글쓰기와 HTML이외의 규격에까지 관여하는 내용으로 되어 있다.
현재 어떤 모듈도 권고안까지 이른 것은 없다.

■ CSS4
하나의 통합된 CSS4사양은 없는데,
이는 여러 개의 모듈로 나뉘어 있는데 기인하다.
그러나 "레벨 4" 모듈들이 존재한다.

문법

CSS는 단순한 문법을 가지며,
수많은 영어 키워드를 사용하여 다양한 스타일의 프로퍼티의 이름을 규정한다.

스타일 시트는 규칙의 목록으로 구성된다.
각 규칙이나 규칙 집합은 하나 이상의 셀렉터와 하나의 선언 블록을 이룬다.

CSS는 따로 CSS만의 코드가 필요하지 않고,
그대로 HTML 문서에 CSS의 키워드를 넣으면 된다.

h1 {
background-color: darkseagreen;
color: white;

}

■ 셀렉터

CSS에서 셀렉터(selector)는
마크업 자체에 태그와 속성을 일치시킴으로써
어느 부분의 마크업에 스타일을 적용할지 선언한다.

클래스와 ID들은 대소문자를 구분하며 문자로 시작해야 하며
영숫자와 언더바(_)를 포함할 수 있다.
클래스는 어떠한 요소의 어떠한 수의 인스턴스에도 적용할 수 있다.
ID는 하나의 요소에만 적용할 수 있다.
ID 값은 앞에 #이 붙고,
클래스 값은 앞에 .이 붙는다

<h1 id="idTest">IdTestText</h2>

<h2 class="classTest">ClassTestText</h2>

■ 선언블록
선언 블록은 괄호로 이루어진 선언들의 목록으로 이루어진다.
각 선언은 그 자체가 프로퍼티, 콜론( : ), 값으로 구성된다.
한 블록 안에 여러 선언이 있으면,
세미콜론( ; )이 개개의 각 선언에 삽입되어야 하며,
단 하나의 선언이라도 세미콜론을 넣지 않으면 동작하지 않는 경우도 있다.

HTML에 CSS를 적용하는 3가지 방법
1. 인라인 방식

<!DOCTYPE html>
<html>

<!--
    HTML에 CSS를 적용하는 3가지 방법이 있다
    -----------------------------------------------------
    1. 인라인 방식
       해당 태그의 style속성에 작성하는 방식

    2. 내부 스타일 시트
        <style>태그 내부에 작성하는 방식

    3. 외부 스타일 시트
        link 태그를 사용하여 별도의 css 파일을 연결하는 방식
    -----------------------------------------------------

    1번에 해당하는 인라인 방식을 알아보자
-->

<body>
    <!-- 1. CSS 인라인 방식 -->
    <h1 style="background-color:Tomato;">Tomato</h1>
    <h1 style="background-color:Orange;">Orange</h1>
    <h2 style="background-color:DodgerBlue;">DodgerBlue</h2>
    <h2 style="background-color:aquamarine;">aquamarine</h2>
    <h3 style="background-color:blueviolet;">blueviolet</h3>
    <h3 style="background-color:chartreuse;">chartreuse</h3>
</body>

</html>

2. 내부 스타일 시트

<!DOCTYPE html>
<html>

<!--
    HTML에 CSS를 적용하는 3가지 방법이 있다
    -----------------------------------------------------
    1. 인라인 방식
       해당 태그의 style속성에 작성하는 방식

    2. 내부 스타일 시트
        <style>태그 내부에 작성하는 방식

    3. 외부 스타일 시트
        link 태그를 사용하여 별도의 css 파일을 연결하는 방식
    -----------------------------------------------------

    2번에 해당하는 내부 스타일 시트 방식을 알아보자
-->

<head>
    <!-- 2. 내부 스타일 시트 방식 -->
    <style>
        h1 {
            background-color: crimson;
        }

        h2 {
            background-color: fuchsia;
        }

        h3 {
            background-color: mediumslateblue;
        }
    </style>
</head>

<body>
    <h1>Tomato</h1>
    <h1>Orange</h1>
    <h2>DodgerBlue</h2>
    <h2>aquamarine</h2>
    <h3>blueviolet</h3>
    <h3>chartreuse</h3>
</body>

</html>

3. 외부 스타일 시트

<!DOCTYPE html>
<html>

<!--
    HTML에 CSS를 적용하는 3가지 방법이 있다
    -----------------------------------------------------
    1. 인라인 방식
       해당 태그의 style속성에 작성하는 방식

    2. 내부 스타일 시트
        <style>태그 내부에 작성하는 방식

    3. 외부 스타일 시트
        link 태그를 사용하여 별도의 css 파일을 연결하는 방식
    -----------------------------------------------------

    3번에 해당하는 외부 스타일 시트 방식을 알아보자
-->

<head>

    <!-- 3. 외부 스타일 시트 방식 -->
    <link rel="stylesheet" href="CSS_External_Style.css">
    
</head>

<body>
    <h1>Tomato</h1>
</body>

</html>

/*외부 스타일 시트 CSS_External_Style.css파일 작성*/
h1 {
    background-color: hotpink;
}

h2 {
    background-color: gold;
}

h3 {
    background-color: hotpink!important;
}

CSS 우선 순위

우선도	CSS원천의 종류	설명
1	중요성	‘!important’은 이전의 우선 타입들을 덮어쓴다.
2	인라인	HTML 'style' 속성을 통해 HTML 요소에 적용되는 스타일
3	미디어 타입	미디어 특정 CSS가 정의되어 있지 않다면 프로퍼티 정의는 모든 미디어 타입에 적용된다.
4	사용자 정의	대부분의 브라우저가 접근성 기능을 갖추고 있다: 사용자 정의 CSS
5	셀렉터 특정성	특정 컨텍스트 셀렉터(#heading p)는 일반 정의를 덮어쓴다.
6	규칙 순서	마지막 규칙 선언은 가장 높은 우선 순위를 가진다.
7	부모 상속	프로퍼티를 지정하지 않으면, 부모 요소에 상속된다.
8	HTML 문서 안에서의 CSS 프로퍼티 정의	CSS 규칙 또는 CSS 인라인 스타일은 기본 브라우저 값을 덮어쓴다.
9	브라우저 기본값	가장 낮은 우선 순위: 브라우저 기본값은 W3C 초기값 사양에 정의되어 있다.

이 글은 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0에 따라
공개된 위키백과 문서 https://ko.wikipedia.org/wiki/CSS의 자료를 사용합니다.

저작자표시

'Dev_Study > CSS' 카테고리의 다른 글

CSS Box Model (0)	2021.06.09

ABOUT ME

Free Will Free Will

'Dev_Study > CSS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'Dev_Study > CSS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바