본문 바로가기
클라이언트/CSS
CSS 문법
Hana_h 2023. 3. 3. 21:15

// CSS, Cascading Style Sheet

 

    - HTML 서식을 담당하는 언어

    - 독립 실행이 안 된다. 반드시 HTML 코드가 있어야 CSS실행이 가능하다.
        > 모든 ML의 디자인을 담당하는 언어

    - CSS1, CSS2, CSS3(+HTML5)

    - HTML 서식 기능 > CSS 서식 기능(확장) + 생산성

// 캐스케이딩, Cascading
- 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙
- 모든 스타일 규칙들은 cascading의 단계적인 규칙에 따라 요소에 적용된다.
- 우선순위   
   1. 사용자 !important 스타일(잘 사용x)    
   2. 제작자 !important 스타일    
   3. 제작자 스타일    
   4. 사용자 스타일   
   5. 사용자 에이전트 스타일(잘 사용x)
- 우선순위가 같을 경우 위에서 아래로.

// CSS 구문

h1
{ color: yellow; font-size:2em; }

h1 {
    color: yellow;
    font-size:2em;
}

   
    ~ 선택자(selector) : "h1"
    ~ 속성(property) : "color"
    ~ 값(value) : "yellow"
    ~ 선언(declaration) : "color: yellow", "font-size: 2em"
    ~ 선언부(declaration block) : "{ color: yellow; font-size:2em; }"
    ~ 규칙(rule set) : "h1 { color: yellow; font-size:2em; }"

 ※선택자와 선언부 사이, 선언과 선언 사이는 앞뒤로 개행을 해도 상관이 없지만 속성이름과 속성값 사이에는 개행을 하면 안 된다.

//주석, Comment Tags

- 화면에 노출되지 않는 부연 설명

/* css 주석 */

// HTML 문서에 CSS를 적용하는 방법

1. 인라인 스타일 시트, Inline Style Sheet

- 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법

- 선언부에 내용만 스타일 속성의 값으로 넣어준다.

- 모든 태그는 style 속성을 가진다.

- 서식을 태그에 직접 적용한다.

- 특정 부분에 대한 서식 정의(잘 사용 안 함)

- 장점: 가독성이 높다.     

- 단점: CSS 재사용이 불가능하다.

<div style="color:red;"> 내용 </div>

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>css-inline</title>
    </head>
    <body>
        <p style="color: palevioletred;">Hello, CSS!</p>

        <p style="color: palevioletred;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia asperiores quaerat illo quidem commodi, autem harum dolore qui laboriosam aliquam unde! Voluptatum doloribus expedita amet aut quidem eaque placeat accusantium.</p>

        <p style="color: palevioletred;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, iste delectus! Inventore deserunt eveniet, numquam reiciendis expedita illo eligendi in qui, laudantium corrupti tempora ratione quas sunt dicta dignissimos error.</p>

        <p style="color: palevioletred;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, iste delectus! Inventore deserunt eveniet, numquam reiciendis expedita illo eligendi in qui, laudantium corrupti tempora ratione quas sunt dicta dignissimos error.</p>
    </body>
</html>

2. 내부 스타일 시트, Embeded Style Sheet

- 문서에 <style>을 활용한 방법
    ~ <style>은 <head>의 내부에 들어가고, <style> 안에는 스타일 규칙이 들어간다.

- 문서 내의 여러 태그에 한번에 서식을 적용할 수 있다.

- 현재 페이지에서 반복되는 서식 정의

- 장점: CSS 재사용이 가능하다.

- 단점: 가독성이 떨어진다.

<style> div {color: red;} </style>

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>css-internal</title>
        <style>
            p {color : palevioletred;}
        </style>
    </head>
    <body>
        <p>Hello, CSS!</p>

        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia asperiores quaerat illo quidem commodi, autem harum dolore qui laboriosam aliquam unde! Voluptatum doloribus expedita amet aut quidem eaque placeat accusantium.</p>

        <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, iste delectus! Inventore deserunt eveniet, numquam reiciendis expedita illo eligendi in qui, laudantium corrupti tempora ratione quas sunt dicta dignissimos error.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, iste delectus! Inventore deserunt eveniet, numquam reiciendis expedita illo eligendi in qui, laudantium corrupti tempora ratione quas sunt dicta dignissimos error.</p>
    </body>
</html>

3. 외부 스타일 시트, External Style Sheet

- 외부 스타일 시트 파일을 이용한 방법

- 스타일 규칙들을 별도의 외부 파일을 만들어 넣는다.(*.css 파일에 CSS를 작성한다.)
    1. CSS 파일을 만들어 스타일 규칙 선언
    2. <link> 이용하여 CSS 파일 연결

/*1.*/
div {color: red;}

/*2.*/
<link rel="stylesheet" href="css/style.css">


- 사이트 내의 모든 페이지 공통 서식 정의

- 장점: CSS 재사용률이 높다.(모든 문서에 적용 가능)

- 단점: 여러 페이지의 서식을 한 곳에 작성하기 때문에 가독성이 최악이다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>css-external</title>
        <link rel="stylesheet" href="H:\내 드라이브\프로그래밍\html\work\css\style.css">
    </head>
    <body>
        <p>Hello, CSS!</p>

        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia asperiores quaerat illo quidem commodi, autem harum dolore qui laboriosam aliquam unde! Voluptatum doloribus expedita amet aut quidem eaque placeat accusantium.</p>

        <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, iste delectus! Inventore deserunt eveniet, numquam reiciendis expedita illo eligendi in qui, laudantium corrupti tempora ratione quas sunt dicta dignissimos error.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, iste delectus! Inventore deserunt eveniet, numquam reiciendis expedita illo eligendi in qui, laudantium corrupti tempora ratione quas sunt dicta dignissimos error.</p>
    </body>
</html>

<!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>
    <style>
        li{ font-weight: bold;}
    </style>
    <link rel="stylesheet" href="../css/ex02.css"
</head>
<body>
    
    <h1>오늘의 할일</h1>

    <ul>
        <li>HTML 복습하기</li>
        <li style="color: red;">VS Code 설치하기</li>
        <li style="color: red;">DB 프로젝트 정리하기</li>
        <li>밥먹기</li>
        <li>잠자기</li>
    </ul>

</body>
</html>

 

li { font-style: italic; }

4. Import

- 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방법

- 성능상의 문제로 거의 사용 XX

@import url("css/style.css");

// CSS 서식 적용

    - 원하는 태그(들)를 찾아서 태그 자체 or 태그 내용물에 원하는 서식을 적용
    - CSS의 대부분의 속성은 모든 태그에 적용이 가능하다.★★★

'클라이언트 > CSS' 카테고리의 다른 글

CSS 속성 - 색상  (0) 2023.03.05
CSS 속성 - 단위  (0) 2023.03.04
CSS 구체성  (0) 2023.03.04
CSS 가상 선택자  (0) 2023.03.04
CSS 선택자  (0) 2023.03.03

'클라이언트/CSS' Related Articles

티스토리툴바