영벨롭 개발 일지

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

Front-end/HTML & CSS

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

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

[ CSS의 기본 문법 ]

 

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

선택자 {
        속성: 값;
}

 

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

 

태그이름 {
        속성: 값;
}		 .클래스이름 {
        속성: 값;
}		 #id이름 {
        속성: 값;
}

 

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

 

 

 

[ CSS 선언 방식 ]

 

1. 내장 방식

 

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

 

 <style></style>의 내용(Contents)으로 스타을을 작성합니다.

 

<!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. 링크 방식

 

 <link/> 태그를 사용하여 외부 css 문서를 가져와서 연결하는 방식입니다. 병렬로 연결하는 방식으로 가장 많이 사용하는 방식입니다. 

 

 <link rel="stylesheet" href="외부 css 문서 경로"/> 로 사용합니다. 

 

<!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;
}
반응형
저작자표시 비영리 변경금지

'Front-end > HTML & CSS' 카테고리의 다른 글

[CSS]선택자 우선순위: 점수 매기기  (0) 2022.03.29
[CSS] 선택자 종류 살펴보기: 기본, 복합, 가상클래스, 가상요소, 속성  (0) 2022.03.24
[HTML]태그의 전역 속성  (0) 2022.03.24
[HTML]인라인 요소와 블록 요소: 요소가 화면에 출력되는 특성  (0) 2022.03.21
[HTML]핵심 태그들 정리하기  (0) 2022.03.10
'Front-end/HTML & CSS' Related Articles more