06-1,2 CSS

스타일이란?

HTML 문서에서 자주 사용하는 글꼴, 색상, 정렬, 각 요소의 배치 방법과 같은 문서의 겉모습을 결정하는 것

1. 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다
2. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다

스타일 형식

• 한 줄이 하나의 스타일에 해당된다.

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

• 선택자 : 스타일을 어느 태그에 적용할 것인지
• 중괄호 안 : 스타일 정보

▶ 스타일 규칙 : 속성과 하나의 값이 묶인 것

<p>  태그에 스타일 적용하기

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

스타일 규칙을 작성하는 방법

• 세미콜론으로 구분하여 중괄호 안에 나열한다.

CSS 여러 줄로 표기하기

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

CSS 한 줄로 표기하기
p { text-align: center; color: blue; }

스타일 주석을 표기하는 방법

/* 여러줄
주석을
표기하는 법 */

/* 한줄 짜리 주석 표기 */

스타일 시트

• 스타일 규칙을 한눈에 확인하고, 필요할 때마다 수정하기 쉽도록
  한 군데 묶어놓은 것

• 브라우저 기본 스타일
  - 웹 브라우저에 기본적으로 만들어져 있는 것
  - CSS를 사용하지 않아도 웹 브라우저에선 기본 스타일로 표시된다
  
  

• 사용자 스타일 : 사이트 제작자가 만드는 것
  ◽ 인라인 스타일
  - 간단한 스타일의 정보일 경우, 스타일을 적용할 대상에 직접 표시
  - style="속성: 속성값;"

  <h1>레드향</h1>
  <p style="color: blue;"> 껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>

  

  ◽내부 스타일 시트
  - 웹 문서 안에 사용할 스타일을 같은 문서 안에 정리
  - 모든 스타일 정보는 < head > 안 < style > 태그 사이에 작성

   <style>
  h1 {      
    padding:10px;
    background-color:#222;
    color:#fff;
  }

◽ 외부 스타일 시트

• 여러 웹 문서에 사용할 스타일을 별도 파일로 작성하여 적용
• < style > 태그 대신 < link > 사용

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