[CSS]CSS의 기본 문법과 선언 방식

Front-end/HTML & CSS

[CSS]CSS의 기본 문법과 선언 방식

영벨롭 2022. 3. 24. 14:55

[ CSS의 기본 문법 ]

css의 기본 문법은 다음과 같습니다.

선택자 {
속성: 값;
}

선택자(Selector)는 html의 특정 요소를 선택하는 것으로 스타일을 적용할 대상을 의미합니다.

태그이름 {
속성: 값;
}

.클래스이름 {
속성: 값;
}

#id이름 {
속성: 값;
}

속성(Property)는 스타일의 종류를 의미합니다.

[ CSS 선언 방식 ]

1. 내장 방식

내장 방식은 html 문서의 <head> 태그 내부에 직접 작성하는 방식입니다.

<!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>
  	/* contents */
  </style>
  
</head>
<body>

</body>
</html>

장점	단점
css 파일을 따로 생성하지 않아도 html 내부에서 바로 작성할 수 있음	css 내용이 많아지면 html 내부에서 한번에 처리하기 어렵기 때문에 유지보수 측면에서 안 좋음

2. 링크 방식

<!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>
  
  <!-- 링크 방식 -->
  <link rel="stylesheet" href="main.css">
  
</head>
<body>

</body>
</html>

3. 인라인 방식

인라인 방식은 요소의 style 속성(선택자 없음)에 직접 스타일을 작성하는 방식입니다.

<!-- 인라인 방식 -->
<div>
	<p style="color: red;">Contents</p>
</div>

단점

너무 지나치게 우선되어 있기 때문에 유지보수 측면에서 좋지 않음

4. @import 방식

css의 @import 규칙으로 css 문서 안에서 또 다른 문서를 가져와 연결하는 방식으로 직렬로 연결됩니다.

장점이자 단점은 직렬로 연결되기 때문에 main css 파일이 html에 link 되지 않으면 또 다른 css 파일이 연결되지 않습니다.

@import url("다른 css 문서 경로"); 로 사용합니다.

/* temp.css 파일 */
div {
	background-color: red;
}


/* main.css 파일 */
@import url("./temp.css");

div {
	font-size: 50px;
}

저작자표시 비영리 변경금지