J_world

• 글자 관련 : font-family(형태), font-size(크기), color(색), text-decoration(밑줄 유무,위치), text-transform(영문 대소문자 전환), font-style(기울게, 보통 전환), font-weight(굷게),text align(정렬), letter-spacing(글자 간격)
  
  
• 문단 관련 : margin(문단 간격), padding(문단 내부 간격), text-indent(첫줄 들여쓰기), line-hieght:(줄 간격),wor-wrap(줄바꿈)
  
  
• 크기 관련 : width(가로), height(높이), max-width/height(최대 너비/높이), min-width/height(최소 너비/높이)
  
  
• 테두리 관련 : dorder(선), border-width(선 두께), border-style(선 스타일), border-color(선 색상), border-radius(선 둥글기), outline(선 두께-요소크기에 영향을 주지 않음)
  
  
• 배경 관련 : background-color, background-image, background-size, background-position, backgroud-attrachment(스크롤 시 배경이미지 상태지정)
  
  
• 위치 관련 : position, float, transform:translate(가로, 세로)
  
  
• layout 관련 : flex, grid, display
  
  
• anmation 관련 : anmation, transition, @keyframes {내용}

1) CSS란?

- Cascading style sheets의 약자. 
  마크업 언어로 작성된 웹 페이지에 스타일과 레이아웃을 정의하는 스타일 시트 언어입니다.
  
2) CSS 작성 방법

선택자(Selector) : 서식을 적용할 대상

속성(Property) : 서식의 종류(글자, 문단, 배경, 배치 등) 

값(Value) : 속성을 사용하기 위한 지정 내용

1. 내부스타일 : 문서 내부에 스타일을 선언
2. 외부스타일 : 별도의 .css 시트 안에 스타일을 작성하여 link로 연결하는 방식
3. 인라인스타일 : 서식을 적용하려는 태그 요소 안에 직접 스타일을 작성하는 방식
4. import : css 문서 내에 다른 css 문서를 삽입하는 방식

3) CSS 선택자

- css 선택자 우선순위

  !important > inline > #id > .class > tag > 외부서식

- 명시도

  !important : 1000

  id : 100

  class :10

  tag : 1

- 기본 선택자

• class (.)
• id (#)
• tag selector (tag name)

- 자손 후손 선택자

• 자손 : a>b
• 후손: a b

- 그룹 선택자

• a, b, c

- 링크선택자

• :link : 하이퍼링크가 걸린 a 태그에 서식적용 a:link { }
• :visited : 링크를 클릭한 적이 있는 경우의 서식 적용 a:visited { }

- 반응선택자

• :hover : 마우스를 올렸을 때 서식 적용 div:hover { }
• :active : 마우스로 해당 영역을 누르고 있을 때 서식 적용 div:active { }

- 동위 선택자

• 선택자1 + 선택자 2 : 1 바로 뒤에 있는 2를 선택하여 서식 적용
• 선택자1 ~ 선택자 2 : 1 뒤에 있는 요소 중 2를 전부 선택하여 서식 적용

- 구조 선택자 (일반, 형태)

• 일반구조 선택자
  first-child{}
  last-child{}
  nth-child(n){}

• 형태구조 선택자
  first-of-type{}
  last-of-type{}