성장에 목마른 코린이

[CSS] 정의, 속성 본문

CSS

[CSS] 정의, 속성

성장하는 코린이 2022. 11. 15. 13:58
728x90

CSS

CSS는 Cascading Style Sheet의 약자입니다.

CSS는 문서의 콘텐츠와 레이아웃, 글꼴 및 시각적 요소들로 표현되는 문서의 외관(디자인)을 분리하기 위한 목적으로 만들어졌습니다.

CSS 명세는 World Wide Web Consortium에서 관리합니다.

CSS는 세 개의 주 레벨이 정의되어 있고 이 레벨들은 버전이나 세대라고 볼 수 있으며, 현재 CSS1, CSS2 및 CSS3가 정의되어 있습니다.

CSS 속성

여러 속성 값은 반드시 공백으로 구분되어야 합니다.

축약 표현 속성은 여러 속성 값을 하나의 간소화된 선언으로 적용할 수 있습니다.

속성이 명시되지 않으면 해당 속성의 기본 값이 적용됩니다.

CSS 속성의 주요 위치

하나의 규칙으로 여러 HTML 요소와 HTML 문서를 제어할 수 있기 때문에 대부분의 경우 외부 CSS 파일에 규칙을 정의하는 것을 선호합니다.

HTML 주석 태그()는 호환되지 않는 브라우저에서 CSS 코드를 숨기는 용도로 사용합니다.

link 요소를 이용한 외부 CSS 파일

HTML의 태그를 이용하여 외부 파일을 포함합니다.

<head>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

import를 이용한 외부 CSS 파일

@import CSS 선언을 이용하여 다음 위치에 외부 CSS 파일을 포함합니다.

  • 문서의 <head> 태그
  • 다른 CSS 파일. 이 경우 하나의 CSS 파일이 여러 개의 다른 CSS 파일을 중첩하여 포함할 수 있습니다.
<head>
  <style type="text/css">
    @import url(style.css); 
  </style>
</head>

HTML 문서의 head 태그

<style> 태그를 이용하여 CSS 규칙을 선언할 수 있습니다.

<head>
  <style type="text/css">
    .logo {color: #eeeeee;} 
  </style>
</head>

HTML 요소에 인라인 스타일로 삽입

HTML의 style 속성을 이용하여 HTML 문서의태그 내 요소들에 인라인 스타일을 지정합니다.

<body>
  <p style="height:100px; color:blue">
</body>

'CSS' 카테고리의 다른 글

[CSS] 기본 문법, 우선 순위  (0) 2022.11.15
Comments