css 기본 문법1(선택자, 속성, 값, 주석, 선언 방식)

들어가기 앞서,

• CSS의 꼭 알아야할 기본적인 문법들에 대해서 다루어보겠다.

선택자, 속성, 값

CSS는 기본적으로 "선택자{속성: 값;}" 과 같은 형식으로 이루어져있다.

여기서 선택자는 스타일(CSS)을 적용할 대상(Selector)이고 속성은 스타일(CSS)의 종류(Property)이고 값은 스타일(CSS)의 값(Value)를 뜻한다.

ex) 

div {
  color: red;
  margin: 20px;
}

선택자는 div이고

속성은 글자의 색을 뜻하는 color와 요소 외부 여백을 뜻한는 margin이고

값은 빨강색을 뜻하는 red와 크기를 의미하는 20px이다.

주석

주석은 "/*주석 내용*/"과 같이 작성할 수 있다. 

단축키는 "Ctrl + /" or "Cmd + /" 이다. 이 주석 단축키는 대부분 같으므로 주석방법자체보단 이 단축키를 알고있으면 어떤 언어에서도 유용하게 사용할 수 있다.

CSS 선언 방식

html과 css를 서로 연걸하는 방식으로는 내장 방식, 인라인 방식, 링크 방식, @import 방식이 있다.

• 내장 방식: <style></style>의 내용(Contents)으로 스타일을 작성한다.
• 인라인 방식: 요소의 style 속성에 직접 스타일을 작성한다.
• 링크 방식: <link/>로 외부 CSS 문서를 가져와서 연결한다.

ex) 내장 방식, 인라인 방식, 링크방식

<!-- 내장 방식 -->
<style>
  div {
    color: red;
    margin: 20px;
  }
</style>

<!-- 인라인 방식 -->
<div style="color: red; margin: 20px;"></div>

<!-- 링크 방식 -->
<link rel="stylesheet" href="./css/main.css">

• @import 방식: CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결한다.

ex) @import 방식

box.css는 @import 방식으로 main.css에서 선언되고 main.css는 링크 방식으로 index.html에서 선언되는 구조이다.

<!-- index.html -->
<link rel="stylesheet" href="./css/main.css">

/*main.css*/
@import url("./box.css");

div {
  color: red;
  margin: 20px;
}

/*box.css*/
.box {
  background-color: red;
  padding: 20px
}