본문 바로가기
코드 정리/CSS

CSS 기본 문법과 선언 방식

by rien_d 2022. 11. 13.



css 기본 문법

선택자 {
  속성: 값;
  속성: 값;
}


css는 스타일을 적용할 선택자를 작성하고 중괄호를 열고 닫아 그 사이에서 속성과 값을 입력하여 작성한다.
이때 속성 뒤에는 콜론( : )을 값 뒤에는 세미콜론 ( ; )을 작성한다.


css의 선언 방식
css를 적용 하는 방식은 4가지 방법이 있다.

내장 방식
- html 문서의 head 태그 안에 <style></style> 태그를 사용하여 작성하는 방법.
- 유지 보수 측면에서 추천되지 않음.

내장 방식


인라인 방식
- html 요소의 style 속성에 직접 스타일을 작성하는 방식 (선택자 없음)
- 우선 순위가 너무 높아서 추후에 유지 보수가 어려움.

<div style="color: red; margin: 20px;></div>


링크 방식 (병렬 연결)
- 외부 css 문서를 html 내부에 직접 연결하는 방식
- head 태그 내부에 작성

<link rel="./main.css" />


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

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