CSS

기초 개요

• HTML이 웹 페이지의 구조를 담당한다면, CSS는 HTML로 구성한 구조의 외부와 내부를 꾸미는 역할을 담당한다.

개념

• 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다.

CSS 문법 분해 해석

body{
	color:red;
    font-size:30px;
    }

• body :셀렉터 (Selector)
• {...} :선언 블록 (Declaration block)
• "color : red;" :선언 (Declaration)
• "font-size" :선언 (Declaration)
• "color, font-size" :속성명(Property)
• "red, 30px" :속성값(Value)
• " ; " :선언 구분자

css 속성 종류

• text-align : center; : 가로로 정렬해주는 text-align 과 가운데 정렬을 위해 center 를 사용 해줌
• background-color : 배경 색을 바꾸기 위한 속성

백그라운드의 경우 다양한 백그라운드 옵션을 띄어쓰기로 구분해서 한번에 줄 수 있다. 
	background: #color url("image url") no-repeat;
	
background-color은 단순히 배경색 옵션만 부여할 수 있다.
	background-color: #color;

• 기본 background-color는 단순히 색깔 옵션만 부여해서 사용할 수 있는 반면에 background는 다른 color / image / repeat / attachment / position과 background 옵션을 추가적으로 부여할 수 있다.

• 다양한 속성은 아래의 링크에서 확인 할 수 있다.
  https://www.w3schools.com/cssref/index.php

css 스타일 적용 방법 3가지

• 인라인 스타일 : 같은 줄에서 스타일을 적용하는 방법

인라인 스타일 예시 
<nav style="background: #eee; color: blue">...</nav>

• 내부 스타일 시트 : css 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고
• 외부 스타일 시트 : CSS 파일에 작성된 내용을 HTML 파일에 적용하는 방법

id와 class의 차이

• id : #으로 선택, 한 문서에 단 하나의 요소에만 적용 가능, 특정 요소에 이름을 붙이는 데 사용
• class : .으로 선택, 동일한 값을 갖는 요소 많음, 스타일의 분류(classification)에 사용