본문 바로가기
Front-End/CSS

CSS 구문(형식), 주석, 스타일 시트

by project100 2023. 2. 24.

CSS 구문(형식)

 

CSS의 구문(형식)은 선택자와 선언 블록으로 구성된다.

 

선택자 { 속성:속성값}

 

선택자는 스타일을 지정할 HTML 요소를 가리키며,

선언 블록에는 선택자에 어떤 속성을 부여할 것인지 속성 이름과, 속성값은 무엇을 줄 것인지 선언한다.

 

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

 

여러 CSS 선언은 세미콜론으로 구분되며, 선언 블록은 중괄호로 묶는다.

 

예)

<html>
<head>
<style>
   p {
     color: red;
     text-align: center;
     }
</style>
</head>
</html>
 

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

        p { color:red; text-align:center; }

선택자는 p
속성은 color, text-align
속성값은 red, center
  • p는 CSS의 선택자(스타일을 지정하려는 HTML 요소를 가리킴: <p>).
  • color는 속성이고 red속성 값
  • text-align는 속성이고 center속성 값

 

참고: 속성 값과 단위 사이에 공백을 추가하지 마세요!

 

올바르지 않은 작성예시(공백)

20 px

{ margin-left: 20 px; }

 

올바른 작성예시(공백 없음)

20px

{ margin-left: 20px; }

CSS 주석

 

CSS 주석은 <style>요소 내부에 배치된다.
/* 시작하고 끝난다 */

 

CSS 주석은 브라우저에 표시되지 않는다.
원하는 위치에 주석을 추가할 수 있으며, 여러 줄에 걸쳐서 표시할 수 있다.
 
예)
<!DOCTYPE html>
<html>
<head>
<style>
/* 주석은 여러 줄에 걸쳐서
작성할 수도 있고,
코드를 이해하고 수정을 할 때 편리하다 */
p {
  color: red;  /* p태그의 글자 색은 빨간색 */
} 
</style>
</head>
</html>

 

CSS를 삽입하는 방법

  1. 인라인 CSS
  2. 내부 CSS
  3. 외부 CSS

 

1. 인라인 CSS

인라인 스타일은 단일 요소에 고유한 스타일을 적용하는 데 사용할 수 있다.

인라인 스타일을 사용하려면 해당 요소에 style 속성을 추가하면 된다.

내부 CSS와 외부 CSS를 주로 사용하기 때문에 드물게 사용되는 방식이다.

<!DOCTYPE html>
<html>
<body>
/*이 아랫부분이 바로 인라인 적용 스타일시트 
h1태그와 p태그에 직접적용한 예*/
<h1 style="color:blue;text-align:center;">이것은 제목입니다.</h1>
<p style="color:red;">이것은 본문입니다.</p>

</body>
</html>

 

 

2. 내부 CSS

내부 스타일은 <style> 요소 내부, head 섹션 내부에 정의된다.

<!DOCTYPE html>
<html>
<head>
<style>
/*내부 CSS 적용 방법, 꼭! style 태그 안에 작성해야 한다.*/
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>제목을 작성하세요.</h1>
<p>본문내용을 작성하세요.</p>

</body>
</html>

 

 

3. 외부 CSS

외부 스타일 시트를 사용하면 파일 하나만 변경하여 전체 웹 사이트의 모양을 변경할 수 있다!

 

외부에서 CSS를 불러오는 방법은 2가지가 있다.

  1. <link>로 불러오기
  2. @import로 불러오기

 

1. <link>로 불러오기는 방법

각 HTML 페이지는 헤드 섹션 내부의 <link> 요소 내부에 외부 스타일 시트 파일을 참조해야 한다.

<link rel="stylesheet" href="외부스타일 시트 파일 경로">

 

예시 <link rel="stylesheet" href="mystyle.css">

 

외부 스타일 시트는 모든 텍스트 편집기에서 작성할 수 있으며 .css 확장자로 저장해야 한다.

외부 .css 파일에는 HTML 태그가 포함되어서는 안 된다.

 

다음은 "mystyle.css" 파일을 <link>로 참조한 예시입니다.

<!DOCTYPE html>
<html>
<head>
<!--아래 link태그가 외부CSS를 불러온 것입니다.-->
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>제목을 작성하세요.</h1>
<p>내용을 작성하세요.</p>

</body>
</html>

 

 

 

2. @import로 불러오기

 

<llink>와 마찬가지로 외부 스타일 시트는 .css 확장자로 저장해야 한다.

다른 점은 <style> 태그 안에 @import를 선언한 후 불러오다는 것이다.

작성방법은 다음과 같다.

@import url("외부스타일시트 파일 경로");

예시  <style>
             @import url("extern_css.css");
          </style>
<!DOCTYPE html>
<html>
<head>
   <style>
        /*@import로 css 불러오기*/
        @import url("mystyle.css");
        p {
            color : gold
        }
   </style>
</head>
<body>

<h1>제목을 작성하세요.</h1>
<p>내용을 작성하세요.</p>

</body>
</html>

 

계단식 순서

스타일 시트는 외부에서 불러온 것, 내부 스타일 스타일 등을 모두 섞어서 사용할 수 있다.

 

그렇다면,

HTML 요소에 대해 지정된 스타일이 둘 이상인 경우 어떤 스타일이 사용될까?

 

기본적인 적용 순서

 

1번이 가장 높은 우선순위를 갖는다.

  1. 인라인 스타일(HTML 요소 내부)
  2. 외부 및 내부 스타일 시트(헤드 섹션)
  3. 브라우저 기본값

 

적용 범위 순서 

  1. !important 
  2. 인라인 스타일
  3. id 스타일
  4. class 스타일
  5. type 스타일

!important : 어떤 스타일보다 우선 적용하는 스타일, 이 수식이 붙는다면, 순서와 상관없이 무조건 실행된다.

서로 겹칠 때에는 요소와 가까이에 있는 것을 화면으로 보여준다.

 

link 외부와 내부는 실행 순서(시점)에 따라서 다르지만

!important는 무조건 실행된다는 것! 

따라서 !important는 충돌이 일어나지 않도록 하나만 작성하는 것이 좋다.

 

 

소스 작성 순서

순서대로

나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.

즉, 제일 마지막 실행한 순서를 보여준다.

 

순서대로 작성하여 스타일을 적용했을 때

내가 원하는 속성이 나오지 않는다면 순서를 바꾸어 실행해 보자!

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

'Front-End > CSS' 카테고리의 다른 글

CSS 색상, 단위  (0) 2023.03.31
CSS 결합자(combinators)란?  (0) 2023.02.04
CSS에 대한 보충 설명  (0) 2023.02.03
Bootstrap  (0) 2023.01.30
CSS란?  (0) 2023.01.20

관련글

티스토리툴바