HTML | CSS

[CSS] CSS란?

728x90

Cascading Style Sheets, CSS는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어로 HTML과 XHTML에 주로 쓰이며, XML 에서도 사용할 수 있다.

HTML이 웹사이트의 뼈대를 담당한다면 CSS는 옷과 같이 꾸미는 역할을 담당한다고 할 수 있다.

https://wonillism.tistory.com/98

[HTML] HTML이란?

HTML이란? HyperText Markup Language 의 약자로서 웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어다. 하나의 언어(Language)로 취급 온라인 상에서 문서를 주고받을 때 연결하는 역할, 이

wonillism.tistory.com

CSS는 규칙 기반 언어이다.

규칙은 selector(선택자)와 함께 열린다. 스타일을 지정할 HTML element(요소)를 선택한다.

CSS를 HTML에서 사용하는 방법

inline : HTML 태그 안에서 사용하는 방법
internal : <head> 태그 안에서 사용하는 방법
external : CSS파일을 만들고 HTML 문서에 연결하여 사용하는 방법

inline

계층적인 성격을 띄는 HTML에 Style이 같이있다고해서 좋은 방법은 아니다.

<!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>
</head>
<body>
    <h1 id="title" style="color:red">WOPARK</h1>
    <script src="index.js"></script>
</body>
</html>

internal

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>
        h1 {
            color:blue;
        }
    </style>
</head>
<body>
    <h1 id="title">WOPARK</h1>
    <script src="index.js"></script>
</body>
</html>

external

페이지 전체적인 스타일을 일관성 있게 유지하면서 변경시에도 일괄적으로 변경 가능하다.

외부 스타일 시트 파일이 지나치게 복잡해지면 곤란하므로 CSS파일을 관리하는 노하우가 필요하다.

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>
</head>
<body>
    <h1 id="title">WOPARK</h1>
    <script src="index.js"></script>
</body>
</html>

css

h1 {
    color : yellow;
}

728x90

저작자표시 비영리 동일조건

Contents

새소식

인기 검색어