CSS 기본 구조 및 문법

CSS는 Cascading Style Sheets의 약자로 HTML이 웹페이지의 구조를 만든다면 CSS는 스타일링을 담당한다.

셀렉터 {
	
    Property: Value;
	
}

CSS를 작성할 때는 위와 같은 형식으로 작성한다.

 

• 셀렉터: HTML 파일에서 특정 요소를 선택하는 것으로 주로 태그 이름, id, class로 선택한다.

  /* 태그를 선택할 때 */
  body {
  
  }
  
  /* id로 선택할 때는 id 이름 앞에 # 를 붙인다. */
  #id{
  
  }
  
  /* class로 선택할 때는 class 이름 앞에 . 을 붙인다. */
  .class{
  
  }

• id와 class의 차이점으로는 id는 같은 이름으로 문서에 하나만 존재하고 class는 이름이 중복될 수 있다.
• Property: 선택한 요소의 바꾸고 싶은 특성을 뜻한다.
• Value: 바꾸고 싶은 특성을 어떻게 바꾸고 싶은지를 표현한다.

  /* 문서에 존재하는 모든 h1 태그의 폰트 색을 빨간색으로 변경한다. */
  h1 {
    color: red;	
  }

css 스타일을 문서 전체에 적용하고 싶으면 셀렉터에 * 을 사용하면된다.

/* 문서에 존재하는 모든 폰트의 색을 파란색으로 변경한다. */
* {
  color: blue;	
}

 

같은 스타일을 여러 개의 요소에 적용하고 싶다면 셀렉터에  , 로 구분 지어 추가하면 된다.

/* class 이름이 list인 요소와 모든 p 태그의 폰트가 이탤릭체로 변경된다. */
.list, p {
  font-style: italic;
}