[비전공자를 위한 HTML/CSS] (14) CSS

정리

[비전공자를 위한 HTML/CSS] (14) CSS

쿠르쿠르쿠 2021. 8. 7. 20:29

CSS(Cascading Style Sheets)

: HTML(마크업 언어)을 꾸며주는 역할을 한다. html이 문서의 정보, 구조를 설계한다면 css는 문서를 디자인 한다.

css는 마크업 언어 없이는 동작하지 않는다.

http://www.csszengarden.com/

CSS Zen Garden: The Beauty of CSS Design

So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into thi

www.csszengarden.com

CSS 문법의 규칙(rule set)

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

선택자(selector) - "h1"

속성(property) - "color", "font-size"

값(value) - "yellow", "2em"

선언(declaration) - "color: yellow;", "font-size: 2em"

선언부(declaration block) - "{ color: yellow; font-size: 2em }"

html의 속성(attribute)과 css의 속성(property)은 차이가 있다. attribute는 정적으로 값이 변하지 않는다. property는 동적으로 값이 변할 수 있다. 예). 체크박스를 체크하면 attribute의 상태는 변하지 않지만, property의 상태는 checked로 변한다.

CSS는 선택자와 선언부 사이의 개행은 허용하나, 속성이름과 속성값의 개행은 허용하지 않는다.

<!--올바른 CSS-->
h1
{ color: yellow; font-size: 2em;}

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

<!--잘못된 CSS-->
h1{
color:
red;
}

CSS 주석 선언

/*주석 내용*/


/*
주석은 여러줄로
선언도 가능하다.
*/

CSS 적용방식

Inline : 해당요소에 직접 스타일 속성을 이용해 규칙들을 선언.

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

Inline 스타일 방식은 코드의 재활용이 불가능하다. 따라서 자주 사용되지 않는다.

Internal : 문서에 <style>을 활용한 방법. <style>는 <head> 내부에 있으며, <style>안에 스타일 규칙이 들어간다.

<!DOCTYPE html>
<html lang="ko">
	<head>
    	<meta charset="UTF-8">
        <style>
        	div{color:red; font-size: 2em;}
       </style>
    </head>
    <body>
    	<div>내용</div>
    </body>
</html>

모든 <div> 에 같은 스타일을 줄 수 있으나 한계가 있다. 스타일을 적용해야 하는 페이지가 많을 경우 각각의 페이지에 규칙을 선언해야 되는 문제가 발생한다.

External : 외부 스타일 시트 파일을 이용하는 방법. 스타일 규칙을 별도의 .css 확장자를 가진 css파일로 작성한다. (주로 사용하는 방식)

/* 파일 이름 : style.css*/

div{ color: blue; font-size: 2em;}

<head>
	<link rel="stylesheet" href="./style.css">
</head>
<body>
	<div>내용!!!</div>
</body>

외부 스타일 시트 방식으로 스타일 시트를 선언하면 페이지가 많더라고 <link rel="stylesheet" href=" ">한 줄로 모든 페이지에 같은 스타일 적용 가능하다. 수정이 필요할 경우 css 파일만 수정하기 때문에 관리가 편하고, 용량또한 작아서 주로 사용한다.

Import : 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식.

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