CSS 첫번째

1.CSS (Cascading Style Sheets)

• CSS 는 HTML이 있는 후에 CSS를 입힌다.

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

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

  2-1. 태그 이름

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

  2-2. 클래스

  .selector{...css본문... }
  -> 셀렉터 이름 앞에 점( . ) 을 붙여 표시하고 HTML 태그의 class 속성에 점을 제외한 이름을 명시
  하여 지정한다. 태그의 종류를 가리지 않고 여러 요소에 복수 지정 가능하다.
  재사용의 목적으로 생성된 클래스.
  이 경우 selector 의 이름은 자유롭게 지정 가능하다.

  2-3. id

  #selector{...css본문... }
  -> 셀렉터 이름 앞에 #을 붙여 표시하고 HTML 태그의 id 속성에 #을 제외한 이름을 명시하여 지정한다.
  id속성의 값은 HTML페이지 내에서 중복 사용될 수 없다.
  selector의 이름은 자유롭게 지정한다.

  2-4. 조합형 셀렉터

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

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

  selector1, selector2, ... selectorn {
  ...css본문...
  }

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

  3. 가상클래스

• HTML 태그에서 특정 상황이 발생했을 경우에만 적용되는 CSS 셀렉터

• 가상클래스는 CSS셀렉 이름 뒤에 : 상황 의 형식으로 명시한다.

  4. CSS셀렉터 조합방식 2

• 자식 셀렉터 : " > " 로 구분하기

• 자손 셀렉터 : 공백으로 구분하기

  4-1. 자식 컬렉터

• " > " 는 HTML의 계층 구조의 표현을 의미한다.

• A > B 일 경우 B 요소는 반드시 A의 1depth 안에 존재해야 한다.

  4-2. 자손 셀렉터

• 공백으로 구분하여 태그의 구조를 표현

• 자식 셀렉터가 반드시 1depth안에 존재해야 한다면, 자손 셀렉터는 depth를 제한하지 않는다.

• 명시 과정에서 중간 단계를 생략해도 된다. 몇 depth를 더 내려가던 지정한 태그의 범위 안에
  존재하기만 하면 된다.

  4-3. 태그의 속성에 따른 표현

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

  5. text-align

• left

• right

• center

• justify

  6. text-shadow

• 글자에 그림자 추가

  selector{
        text-shadow : x y blur color;

  }

  x: 가로축 거리(px) / y : 세로축 거리(px) / blur : 그림자 번짐정도(px) / color : 그림자의 색상

  7. 웹 폰트

• 웹 폰트는 사용자가 가지고 있지 않은 폰트를 웹페이지에서 사용할 수 있는 방법

• 폰트를 서버에서 다운로드하는 방식이라고 할 수 있다.

  8. box

• block element : 화면 전체를 사용하는 태그

• inline level element : 화면의 일부를 차지하는 태그

  8-1. padding

• padding : px값;

• 내용 영역과 border사이의 여백의 크기

• 값의 세분화
  padding-top : 상단 여백의 크기를 px 단위로 지정
  padding-right : 우 측 여백의 크기를 px 단위로 지정
  padding-bottom : 하단 여백의 크기를 px 단위로 지정
  padding-left : 좌 측 여백의 크기를 px 단위로 지정

• 1개의 값 : 상/하/좌/우 모두 같은 크기의 여백을 지정

• 2개의 값 : 첫번째 값은 상/하 , 두번째 값은 좌/우로 지정

• 4개의 값 : 공백으로 구분하여 4개의 값을 지정할 경우 첫번째 값이 상단, 우측, 하단, 좌측 순서로
  시계방향으로 적용

  8-2. auto

• 부모가 가변 크기를 갖는 경우, 자식 요소의 중앙 배치
  (부모 요소가 가로 80%, 자식 요소의 가로가 50%일 경우) 남는 공간을 계산하여 자식 요소를 부모 가운데로
  위치하도록 하기에는 너무 많은 수식이 필요하다 .

• auto

• width, height, margin-left, margin-right 에 대하여 적용할 수 있는 특수한 값으로, 어떤 속성에 적용되느냐에
  따라서 동작하는 원리가 달라진다.