CSS개요

1 분 소요

css

CSS (Cascading Style Sheets)

HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이며 룰기반의 언어(Rule-based)이다

Cascading: 흐르는 의미를 뜻하며, 어떤 스타일을 적용할지 우선순위를 정할 수 있다

/* 중괄호(선언블럭)를 열고 닫는다 */
element 또는 selector {
    /* 속성: 값; */
}

현재 버전은 CSS3 모듈별로 버전이 업데이트된다(지원이 되는지 확인하는 것이 좋다)
특정 요소, 선택자를 활용해서 요소에 스타일 규칙을 적용할 수 있다
주석은 /* 내용 */으로 작성할 수 있다
선언블럭내 각 값들 이후 세미콜론(;)를 붙힌다 (여러개 선언할 경우 무조건 필수)
선언 블럭내 코드들은 속성과 값이 쌍을 이룬다

▶️ CSS를 적용하는 방법

내부 스타일(embedded)
인라인 스타일(inline)
외부 스타일(external)

1. 내부 스타일(embedded)

<head></head>내에 <style></style>을 생성해서 적용한다

브라우저가 html문서를 해석하다가 style을 만나면 css로 인식하고 해석한다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 내부스타일 부분 -->
    <style>
        p {
            font-size: 50px;
        }
    </style>
</head>
<body>
    <p>Hi Jongbin!</p>
</body>
</html>

2. 인라인 스타일(inline)

html 내부에서 하나의 요소에 적용하고 싶을때 사용한다

유지보수 측면에서 좋지 않기 때문에 권장하지 않는다
요소의 태그 내 style 전역속성을 사용한다
여러가지 스타일을 적용하기 위해서는 세미콜론(;)을 입력해서 구분한다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 인라인 스타일 -->
    <p style="font-size:50px;">Hi Jongbin!</p>
</body>
</html>

3. 외부 스타일(external)

따로 css 파일을 생성해서 html에서 link태그를 이용해서 명시

rel속성: 현재파일과 해당 파일이 어떤 관계인지를 명시
href속성: 파일의 경로
빈태그이다
가장 권장하는 방법이다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="파일의 경로" />
</head>
<body>
    <p>Hi Jongbin!</p>
</body>
</html>

▶️ Cascading 원칙

css는 상속이 되므로 지정한 스타일이 중복되어 무시되거나 덮어씌워진다. 따라서 우선순위를 정해줘야 하는데 규칙은 다음과 같다

상속이 되므로 자식요소는 부모의 스타일을 덮어쓴다 (산속되지 않는 속성도 있음)
동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다
적용범위가 작을 수록 우선된다
코드상 뒤에 위치할수록 우선된다

▶️ 우선순위가 강한 정도

➡︎ 선언된 위치에 따라서
브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일

➡︎ 적용범위에 따라서
tag(요소) 스타일 < class스타일(.클래스명) < id스타일(#아이디명) < 인라인스타일

우선순위가 낮을 경우 스타일이 무시된다
css는 상속이 된다(상속되지 않는 속성도 존재)

CSS의 프로퍼티나 기능 등 브라우저의 지원현황을 확인하고 싶은 경우 다음과 같은 사이트를 이용하면 좋다

브라우저 지원 : https://caniuse.com/

요소나 프로퍼티 기능 등의 설명: https://developer.mozilla.org/ko/

Twitter Facebook LinkedIn

원종빈