기본 문법 & 스타일 방법

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;
}

참고

CSS 작동 원리 - CSS를 HTML에 적용하는 방법 → MDN

PreviousCSS란?Next선택자

Last updated 4 years ago

Was this helpful?