기본 문법 & 스타일 방법

CSS 문법, CSS 기본 문법,

CSS 기본 문법

  • css는 html 문서 내에 포함시킬 수 있다

  • <head> 내부에서만 사용 가능하고 <style> 태그를 사용해서 css코드 넣기

  • <text/css> MIME type 지정, 하지만 html 5 에서는 생략 가능

선택자(대상) {     /* 대상 선택자, { 선언구간 시작 */
  속성1: 값;      /* ; 선언문 구분 */
  속성2: 값2;     /* : 속성, 값 구분 */
}               /* 선언구간 종료 */

CSS 스타일 방법

CSS 코드를 HTML 문서에 적용하여 스타일링하는 3가지 방법

  • 인라인 스타일 (inline style)

  • 인터널 스타일 (internal style)

  • 익스터널 스타일 (external style)

인라인 스타일

  • 요소에 직접 스타일링을 추가하는 방법이다.

  • 요소 내부에 style 속성을 이용하여 css 코드 작성 한다. 

<body>
    <section style="color: #903000">
    <h1 style="color: tan">
        <abbr
        style="cursor: help; text-decoration: none"
        </abbr>
     언어란?
    </h1>
</body>

인터널 스타일

  • CSS 코드를 HTML 문서에 포함

<head>
  <style>
    section {
      color: #903000;
    }
    h1 {
      color: tan;
    }
    abbr {
      cursor: help;
      text-decoration: none;
    }
  </style>
</head>

익스터널 스타일

  • CSS 파일을 HTML 문서에 연결한다. (Link 요소를 사용하여 외부에 있는 css 파일을 적용한다.) 

<head>
  <link rel="stylesheet" href="css/style.css" />
</head>
section {
  color: #903000;
}
h1 {
  color: tan;
}
abbr {
  cursor: help;
  text-decoration: none;
}

참고

PreviousCSS란?Next선택자

Last updated