1. CSS

• cascading Style Sheets
• HTML 태그에 옷(=디자인)을 입혀주는 기법
• 문서 전체의 일관성을 유지할 수 있고,
  세세한 스타일 지정의 필요를 줄여준다.

2. HTML문서에 CSS를 적용 하는 방법

• CSS는 HTML문서 내의 어느 위치에나 올 수 있지만,
  일반적으로 태그 안에 위치한다.

3. 외부 파일 참조 방법

< link rel = "stylesheet" type ="text/css" href="외부 CSS파일 경로"/> - CSS코드를 별도의 외부 소스파일에 작성해 두고 HTML에서 해당 파일을 참조 하는 방법 - 이 방법은 한번 작성한 코드를 여러 페이지에서 재사용 할 수 있다는 장점이 있지만, CSS에 문제가 생길 경우 해당 파일을 참조하는 모든 웹페이지에 문제가 번질 수 있다는 위험도 있다.

4. HTML 태그에 style 속성을 사용하는 방법

- 이 방법은 세밀한 조정이 가능하다. - 전체적으로 소스코드 양이 지나치게 많아지고, 유지보수가 쉽지 않다.

5. CSS 코드를 작성하는 기본 형식

• selector {
  속성 1: 값, 속성2: 값, ...
  }

• selector는 {...} 범위안에 기술된 CSS구문이 적용될 대상을 의미한다.

• 속성의 이름은 실제 처리할 그래픽적인 속성으로, 폰트,
  문단, 크기 , 위치 , 색상 등을 지정하며, 값은 해당 속성에
  적용할 내용이다.

• 이러한 구조로 HTML페이지의 특정 부분이나 여러 개의
  요소를 selector로 지정하고 모양을 기술하는 것이 CSS의 표현방식이다.

6. 기본 셀렉터의 종류

• CSS에서 셀렉터를 작성하는 방법은 기본적으로 HTML의
  태그이름 , 클래스 속성, id 속성에 대한 명시가 있다.

6-1. 태그이름

• selector{..CSS본문...}
• 특정 태그를 가르킨다. HTML 내에 동일 태그가 존재할 경우
  모든 태그 요소를 일괄 처리한다.

6-2. 클래스

• .selector{...CSS본문...}
• 셀렉터 이름 앞에 점(.)을 붙여 표시하고 HTML태그의
  class속성에 점을 제외한 이름을 명시하여 지정한다.
• 태그의 종류를 가리지 않고 여러 요소에 복수 지정 가능하다.
• 재사용의 목적

6-3. id

• #selector{...CSS본문...}
• 셀렉터 이름 앞에 (#)을 붙여 표시하고 HTML태그의
  id속성에 샵(#)을 제외한 이름을 명시하여 지정한다.
• id속성의 값은 HTML 내에서 중복 사용될 수 없다.

6-4. 조합형 셀렉터

• tag.calss{...CSS속성...}
• tag#id{...CSS속성...}
• id값이나 calss값을 태그 이름과 함께 명시하여 적용하는 형태
• 셀렉터가 지정하는 대상을 자세하게 명시할 수 있다.
• 태그, 클래스, 아이디를 독립적으로 명시할 때 보다 우선적으로
  적용된다.

7. AND의 의미를 갖는 콤마(,)사용하기

selector1, selector2, ...., selectorn{
... CSS 적용...
}

• 여러 개의 요소에 동일한 CSS 내용을 적용하기 위해 셀렉터를
  콤마(,)로 구분하여 일괄 처리 할 수 있다.
• 태그, class, id 등 모든 형태의 CSS 셀렉터가 가능하다.

8. 가상 클래스

• HTML 태그에서 특정 상황이 발생했을 경우에만 적용되는
  CSS 셀렉터
• 가상 클래스는 CSS의 셀렉터 이름뒤에 ":상황"의 형식으로 명시한다.

9. 복잡한 형태의 셀렉터

• 자식 셀렉터 -> ">" 로 구분하기
• 자손 셀렉터 -> 공백("")으로 구분하기
• 속성 셀렉터 -> HTML태그의 속성에 따른 구분

9-1. 자식 셀렉터

• ">" 로 구분한 구조적 표현
• ">"는 HTML의 계층 구조의 표현을 의미한다.
• A>B일 경우 B의 요소는 반드시 A의 1depth안에 존재해야 한다.

9-2. 자손 셀렉터

• 공백으로 구분하여 태그의 구조를 표현
• 자식 셀렉터가 반드시 1depth안에 존재해야 했다면,
  자손셀렉터는 depth를 제한하지 않는다.
• 명시 과정에서 중간 단계를 생략해도 된다 . 몇 depth를 더
  내려가던, 지정한 태그의 범위 안에 존재하기만 하면 된다.

9-3. 속성셀렉터

• 태그의 속성에 따른 표현
• 스타일시트의 셀렉터가 적용되는 대상에게 특정 속성이
  있는지 여부와 특정 속성의 값이 적용되어 있는지 여부에 따라
  태그 요소를 좀 더 구체적으로 가리킬 수 있다.

10. text-align

• left
• right
• center
• justify

11. text-shadow

• 글자에 그림자를 추가하는 속성
• 셀렉터 {
  text-shadow: x-offset - y-offset - blur-radius color;
  }

12. 박스

• 가로축 : 부모를 가득 채운다
• 세로축 : 자신이 포함하고 있는 내용만큼 설정된다.
  내용이 없는 경우, 높이가 형성되지 않는다.

12-1. 박스의 크기를 구성하는 속성의 종류

• width : 가로
• height : 세로
• border : 박스의 테두리
• padding : 테두리와 내용여역 사이의 여백
  여백 사이즈에 대한 px단위

12-2. padding 속성

• 값의 지정 형식
• 1개의 값
  ->
• 2개의 값
  -> 공백으로 구분하여 2개의 값을 지정할 경우
  첫 번째 값은 "상/하", 두 번째 값은 "좌/우"로 지정된다.
• 4개의 값
  -> 공백으로 구분하여 4개의 값을 지정할 경우
  첫번째 값이 상단여백, 그 후 우측, 하단, 왼쪽의 순서로
  시계방향으로 적용된다 .

13. 상속

• 상속은 부모 엘리먼트의 속성을 가진 자식 엘리먼트가 물려받는
  것을 의미한다. 상속은 CSS에서 생산성을 높이기 위한 중요한
  기능이다.

14. 포지션

• 엘리먼트의 위치를 지정하는 4가지 방법
• static
• relative
• absolute
• fixed
• bottom vs top : top이 우선
• right vs left : left가 우선
• css 각각의 엘리먼트는 각각의 위치가 정적으로 존재한다.
  즉 static 하게 위치하게 된다. 여기서 me 기준으로 부모 엘리먼트
  안에 존재해야 하기 때문에 left, top 등등이 옵션이 무시된다.
• position을 static이 아닌 relative로 변경해야 한다.