css

CSS - 스타일 시트 시작하기

2월 23, 2019
CSS는 HTML 문서에 스타일(글꼴, 간격, 색상)을 첨부하여 문서 내의 데이터를 다양한 모습으로 표현할 수 있게 하는 표현 중심 언어입니다.

css는 문서 내에 넣을 수 있고 외부 파일로 연결할 수 있습니다.

<!-- 문서 내 스타일 시트를 사용합니다. -->
<style> 내용 </style>

<!-- 외부 스타일 시트를 사용합니다. -->
<link href='[URL]' rel='stylesheet' type="text/css" />

스타일시트 문서를 참조해야 하는 경우 다음의 형식을 따릅니다.

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

설 명
선택자 규칙이 적용될 요소의 이름
1. 선택자를 화면에 표현할 방식을 결정하는 문장.
2. 선택자는 <태그>, class, id 속성이 대상이 됨.
  ex.) a { …. }, p { .. }, div { … }
선언 { } 안에 명령을 기술합니다.
{ 속성 : 속성 값;} 형식으로 선언
Ex.) font-style : italic; font-weight : bold;


작성 규칙

  • style 명령은 { .... } 로 묶여야 함.
  • 복수의 빈칸은 구별하지 않음.
  • 선택자에 두 개 이상의 선언이 필요한 경우 세미콜론(;)으로 구분함.
    복수의 선언에 세미콜론을 생략하면 정의된 모든 속성이 무효가 됨.
  • 대소문자를 구분하지 않음.
  • 같은 style 을 중복해서 지정 했을 때는 나중에 지정한 선택자로 덮어씀.
  • 주석은 /* 내용 */ 으로 작성함.

스타일 시트는 다른 곳에 지정해도 되지만 가능하면 <HEAD>...</HEAD>에서 하는 것이 안전합니다.

/* 기본 지정 */
<STYLE type="text/css">
   P { background: yellow; color: black; }

   /* 아래 지정한 값으로 색상이 설정됩니다. */
   P { background: blue; color: yellow; }
</STYLE>

/* 불러 쓸 때는 이렇게 ... */
<P>내용</P>

Tag:

0 Comments

0 댓글