1. CSS 이론 ( 선택자, 전체, 타입, 클래스, id, 그룹 )

스타일 규칙은 태그뿐만 아니라 웹 문서의 어떤 요소에도 적용 가능

선택자는 웹 문서에서 어느 부분에 스타일을 적용할 지 알려주는 기능

 

전체 선택자 (universal selector)

- 스타일을 문서의 모든 요소에 적용할 때 사용

- 주로 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용

- (별표) 사용

- 웹 브라우저의 기본 스타일을 초기화할 때 사용

/*기본형*/
* { 속성: 값; ... }

 

타입 선택자 (type selector)

특정 태그를 사용한 모든 요소에 스타일 적용

= 태그 선택자(tag selector) = 요소 선택자(element selector)

타입 선택자를 사용해 스타일을 지정하면 해당 태그를 사용한 모든 요소에 적용

/*기본형*/
태그명 { 스타일 규칙 }

 

 <h1>롯데 자이언츠 선발 라인업</h1>
  <p>1번 타자 차은우</p>
  <p>2번 타자 송강</p>
  <p>3번 타자 박보검</p>
  <p>4번 타자 서강준</p>

p {
  font-style: italic;
}

 

클래스 선택자 (class selector)

- 특정 부분에 스타일 적용

- 클래스 이름을 사용하여 다른 선택자와 구별

- 클래스 이름 앞에 마침표( . )를 반드시 붙여야 한다❗

 

/*기본형*/
.클래스명 { 스타일 규칙 }

- 클래스 스타일 : 클래스 선택자를 사용해 만든 스타일

- 클래스 스타일 적용

→ 태그 안에 class=”클래스명” : class 속성을 사용하여 지정

<h1>롯데 자이언츠 선발 라인업</h1>
  <p class="oddNumber">1번 타자 차은우</p>
  <p>2번 타자 송강</p>
  <p class="oddNumber">3번 타자 박보검</p>
  <p>4번 타자 서강준</p>

.oddNumber {
  color: tomato;;
}

 

id 선택자 (id selector)

- 특정 부분에 스타일을 한 번만 적용

- 아이디 이름을 사용하여 다른 선택자와 구별

→ id 이름 앞에 # 기호를 반드시 붙여야 한다❗

/*기본형*/
#아이디명 { 스타일 규칙 }

 

-클래스 선택자는 문서에 여러 번 적용

- → id 선택자는 문서에서 한 번만 적용할 수 있다❗

- 주로 문서의 레이아웃과 관련된 스타일을 지정 OR 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용

  <h1 id="title">롯데 자이언츠 선발 라인업</h1>
  <div id="container">
    <p>1번 타자 차은우</p>
    <p>2번 타자 송강</p>
    <p>3번 타자 박보검</p>
    <p>4번 타자 서강준</p>
  </div>

#title {
  text-align: center;
  color: tomato;
}

#container {
  width:500px;  /* 너비 */
  margin:10px auto;  /* 바깥 여백 */
  padding:10px;  /* 테두리와 내용 사이 여백 */ 
  border:1px solid #000;  /* 테두리 */
}

 

그룹 선택자

- 같은 스타일 규칙을 사용하는 요소를 묶어서 적용

-여러 선택자에서 같은 스타일 규칙을 사용하는 경우

-쉼표( , )로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의

/*기본형*/
선택자1, 선택자2 { 스타일 규칙 }

 

  <h2>04월 08일 롯데 자이언츠 선발 투수</h2>
  <p>댄 스트레일리</p>

h2, p {
  color: tomato;;
}

p {
  font-style: italic;
}