eadgnus

css animation

    - 요소의 현재 스타일을 다른 스타일로 변환

@keyframes

    - 시작: 0%, from
    - 과정: 1%, 3%, 10%, ..
    - 끝: 100%, to

    0%         5%         50%      ...100%
    장면1     장면2    장면3     ...끝장면

animation-name: 애니메이션의 이름을 설정
-------------------------------------------------------------------------------------------------------------

animation-fill-mode: 애니메이션이 끝난 후 어떻게 처리할지 설정
                 forwards: 애니메이션 키프레임이 완료 되었을 때 마지막 프레임을 유지

-------------------------------------------------------------------------------------------------------------

animation-direction: 애니메이션의 진행방향을 정하는 속성
                  reverse: 반대 순서로
                alternate: 정해진 순서로 진행 했다가 다시 반대순서로 진행
   reverse-alternate: 반대 순서로 진행 했다가 다시 정해진순서로 진행

-------------------------------------------------------------------------------------------------------------

animation-duration: 애니메이션이 일어나는 시간을 설정

-------------------------------------------------------------------------------------------------------------

animation-iteration-count: 애니메이션이 몇번 반복할지 설정
                             infinite: 무한반복
                                숫자: 숫자만큼 반복

css 우선순위 계산

    1. 동일한 속성을 적용할 경우 나중에 적용한 것이 우선
    2. 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선
    3. 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용
    4. 계산식
        - inline: 1000점
        - id 속성: 100점
        - class, 속성 선택자: 10점
        - element(태그): 1점
    5. !important: 무조건 0순위

transform

    - 2차원 좌표에서 요소를 변형시키는 속성
        translate: 이동
        rotate: 회전
        scale: 확대, 축소
        skew: 경사, 비틀기

✔ 벤더 프리픽스(vender prefix)

    - 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기
      위해 사용하는 접두사
    - w3c css 권고한에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 
      사용할 때 붙임
             -webkit- : 크롬, 엣지를 위한 접두사
             -o- : 오페라를 위한 접두사
             -ms- : 익스플로러를 위한 접두사
             -moz- : 파이어폭스를 위한 접두사
    - 해당 속성이 적용되지 않았을 경우 표현해야 할 코드를 가장 먼저 작성해야 하며, 표준 문법 코드는 
      가장 마지막에 작성해야 함

transition

    - 요소에 추가할 css스타일 전환 효과를 설정
    - 추가할 전환 효과나 지속시간도 설정
        property: 요소에 추가할 전환 효과를 설정
        timing-function: 전환효과의 값을 설정
            linear: 처음부터 끝까지 일정한 속도로
            ease: 전환효과가 천천히 -> 빨라지고 -> 천천히 -> 끝
            duration: 전환효과를 나타내는 시간을 설정
            delay: 설정한 시간만큼 대기하다 전환효과를 나타냄

다단 레이아웃

    - 텍스트를 column 속성으로 다단을 생성
    - 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미
    column-count: 단의 갯수를 설정
    column-rule: 단과 단사이의 구분선, 구분의 모양, 두깨, 색상을 설정
    column-get: 단과 단 사이의 여백을 설정
    column-span: 단과 안의 포함된 요소를 다단편집에서 해제(all)

flex 레이아웃

    - 수평정렬을 하기 위한 속성
    - display: flex

flex-wrap

    - 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성
    - nowrap: 기본값, 플렉스 요소가 다음줄로 넘어가지않음, 너비를줄여 한줄에 배치
    - wrap: 요소에 여유공간이 없다면 다음줄로 넘기기
    - wrap-reverce: 요소에 여유공간이 없다면 다음줄로 넘김(단, 아래가아닌 위로)

flex-direction

    - 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성
    - row: 기본값, 가로로 배치
    - row-reverce: 가로로 배치(반대로)
    - column: 세로
    - column-reverce: 세로로 반대로

flex-flow

    - flex-wrap과 flex-direction을 한꺼번에 지정
        ex) flex-flow: row-nowrap;

justify-content

    - 플렉스 요소의 수평방향 정렬방식을 설정
    - flex-start: 기본값, 앞쪽에서 부터 배치(왼쪽정렬)
    - flex-end: 뒤쪽에서부터 배치(오른쪽 정렬)
    - center: 가운데 배치됨 (가운데 정렬)
    - space-between: 요소들 사이에 여유공간을 두고 배치(앞뒤 양쪽에 붙임)
    - space-around: 요소들 사이에 여유공간을 두고 배치(앞뒤 약간의 공간을 둠)

align-items

    - 플렉스 요소의 수직방향 정렬 방식을 설정
        - stretch: 기본값, 아이템들이 수직축 방향으로 늘어남
        - flex-start: 요소들이 시작점으로 정렬
        - flex-end: 요소들이 끝으로 정렬
        - center: 요소들이 가운데로 정렬
        - baseline: 요소들이 텍스트 베이스 라인(하단선) 기준으로 정렬

align-self

    - 플렉스 요소에 수직축으로 다른 aligh 속성값을 설정

order

    - 플렉스 요소의 순서를 설정

align-content

    - 플렉스 요소가 설정된 상태에서 요소들이 2줄이상 되었을 때 수직방향 정렬 방식을 설정
    - flex-wrap의 값을 wrap으로 설정해야함
        - stretch: 기본값, 위 아래로 늘어남
        - flex-start: 요소들이 시작점으로 정렬
        - flex-end: 요소들이 끝으로 정렬
        - center: 요소들이 가운데로 정렬
        - space-between: 요소들 사이에 여유공간을 두고 배치(앞뒤 양쪽에 붙임)
        - space-around: 요소들 사이에 여유공간을 두고 배치(앞뒤 약간의 공간을 둠)

flex-basis

    - 플렉스 요소의 기본 크기를 설정

flex-grow

    - 플렉스 요소를 flex-basis의 설정한 값보다 커질수 있는지를 결정하는 속성

flex-shrink

    - 플렉스 요소를 flex-basis의 설정한 값보다 작아질수 있는지를 결정하는 속성(grow와 쌍으로사용함)

flex

    - flex-grow, flex-shrink,flex-basis를 한번에 설정할수 있음

미디어 쿼리(media query)

반응형 웹
하나의 웹 사이트에서 PC, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹 페이지 접근 방법

    @media 매체유형 and (속성에 대한 조건){
        css코드
        ...
    }

✔ 매체유형

all: 모든매체
screen: 컴퓨터, 태블릿, 스마트폰 ...
print: 프린터
speech: 스크린 리더

background-color

    - HTML 요소의 배경색을 설정

background-image

    - HTML 요소의 배경으로 나타날 배경이미지를 설정
    - 배경이미지는 기본 설정으로 반복되어 나타남
        background-image: url(파일경로)

background-repeat

    - 배경 이미지를 수평이나 수직 방향으로 반복하도록 설정(repeat-x, repeat-y, no-repeat)

background-position

    - 반복되지 않는 배경 이미지의 상대 위치를 설정
    - %나 px를 사용해서 상대위치를 직접 설정할 수 있음
    - 상대 위치를 결정하는 기준은 왼쪽 상단(left top)    

        left top        center top      right top
        left center     center          right center
        left bottom     center bottom   right bottom

        background-position: center bottom
        background-position: 가로위치값 세로위치값;
        ex) background-position: 10% 100px;

background-attachment

    - 위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있음
    - 고정된 배경 이미지는 스크롤과 무관하게 화면의 위치에서 이동되지 않음
    - fixed

background-size 

    - 배경 이미지 크기를 설정
    - px, %, contain, cover
    - contain
        * 배경이미지의 가로, 세로 모두 요소보다 작다는 조건하에 가능한 설정 
        * 가로 세로 비율은 유지
        * 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같음

    - cover ★★★★★
        * 배경 이미지의 가로 , 세로 , 길이 모두 요소보다 크다는 조건하에 가능한 설정
        * 가로, 세로 비율은 유지
        * 배경 이미지의 크기는 요소보다 항상 크거나 같음

background

    - 배경속성을 한꺼번에 적용
        background 파일위치 반복여부 위치 사이즈 ....

박스 모델(Box Model)

    - 모든 HTML 요소는 박스모양으로 구성
    - 박스모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분

내용(content)

    - 텍스트나 이미지가 들어있는 박스의 실질적인 부분
    <p>안녕</p>

패딩(padding)

    - 내용과 테두리 사이의 간격
    - padding-top, padding-right, padding-bottom, padding-left
    - padding: 위 오른 아래 왼쪽 순으로 설정(시계방향)
        
        div#padding { padding: 20px 50px 30px 10px; }
                    위 20px, 오른 50px, 아래 30px, 왼 10px
        
        div#padding { padding: 20px 50px 30px; }
                    위 20px, 오른,왼 50px, 아래 30px
        
        div#padding { padding: 20px 50px; }
                    위,아래 20px, 오른,왼 50px
        
        div#padding { padding: 50px; }
                    위,오른,아래,왼 50px

        <div id='padding'>안녕하세요</div>

테두리(border)

    - 내용(content)과 패딩(padding) 주변을 감싸는 테두리
    - border-style(테두리 모양), border-color(색상), border-width(두께), border(한꺼번에 설정)

마진(margin)

    - 테두리(border)와 이웃하는 요소들 사이의 간격
    - 마진은 눈에 보이지 않음
    - 세로 겹침 현상이 나타남
    
    ✔ 세로 겹침현상
    세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘중 큰 값을 선택하는 

박스 사이징(box-sizing)

    - width, height 값에 padding, dorder 영역은 포함되지 않음
        ✔ 위드 하이트값은 content 크기만 말하는것임
    - 만약에 width가 100%로 설정되는 경우 padding이나 border속성을 추가하면 안됨
    - box-sizing 속성값을 border-box로 설정하면 width, height값에 padding과 border를 포함

css 디스플레이

    - 웹 페이지의 레이아웃을 결정하는 속성
    - block, inline, inline-block, none

    ✔ visivility: hidden; -> visivility: visible;

css 폼

    - 폼 요소의 스타일을 설정

css position

    - 요소의 위치를 결정하는 방식을 설정

    1. 정적 위치 지정방식
        - static position 기본값
        - HTML 요소의 위치를 결정하는 기본적인 방식
        - 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식

    2. 상대 위치 지정방식
        - relative position
        - HTML 요소의 기본위치(정적 위치 지정방식)를 기준으로 위치를 재설정 하는 방식
        - top, left, right, bottom

    3. 고정 위치 지정방식
        - fixed position
        - 웹페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치
        - 뷰 포트를 기준으로 위치를 설정하는 방식
        - top,left, right, bottom 속성값을 사용할수 있음

    4. 부모태그를 이용한 고정 위치 지정방식
        - sticky position
        - fixed가 브라우저 화면의 절대 위치를 사용하는 반면  sticky는 부모태그의 절대위치 값을 사용하는 방식
        - 익스플로러에서는 작동하지 않음

    5. 절대 위치 지정방식
        - apsolute position
        - 뷰 포트를 기분으로 위치를 설정하는 방식
        - 조상요소를 기준으로 위치를 지정 할 수 있음
        - 조상요소를 가지지 않으면 body 요소를 기준으로 위치를 결정
        - 조상요소를 기준으로 위치를 지정하려면 조상요소는 반드시 정적 위치 지정 방식이 아니어야함
        - top, right, left, bottom 속성 값 을 사용할 수 있음

z-index

    - HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있음
    - 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용
    - 순서는 숫자의 크기가 클수록 위에 위치하고 작을 수록 아래 위치하게 됨

float

    - HTML 요소가 주변(수평)의 다른 요소들과 자연스럽게 어울리도록 만들기 위해 사용
    - float로 적용받은 요소의 다음에 나오는 요소들이 끌어올려짐
    - float를 적용받은 요소의 방향들을 결정 (right,left)
    - 컨텐츠 크기 만큼만 영역을 설정(블록)
    - float를 적용받은 요소는 다른 요소보다 위쪽에 위치(배경보다 위)

clear

    - float 속성이 적용된 이후 나타나는 요소들의 동작을 조절
    - float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 힘듬
    - clear 속성을 이용하여 float 이후에 등장하는 요소들이 더이상 float 속성에 영향을 받지 않도록 설정(left, right, both)

font-size

    - 텍스트 크기를 설정
    - px, %, em, rem
        ✔ em ->  디폴트가 pc: 16px, 모바일은 12px
        <p><span></span></p> 태그에서 p에서 2em이라면 span에서는 2em이 1em으로 표기한다.
        rem -> html에 단위 설정을 해주고 전체에 적용

font-family

    - 텍스트의 글꼴을 설정
        ✔ 글꼴을 선택하는 방법
        - 누구나 설치되어 있는 기본 글꼴을 사용
        - 이미지로 처리
        - 클라이언트에 글꼴을 다운로드 시켜 사용
        - 웹 폰트를 사용
            https://fonts.google.com/
            https://noonnu.cc/

font-weight

    - 텍스트의 굵기를 설정
    - 기본 굵기: 400 (범위 100 ~ 900)

CSS의 컬러

    1. 색상 이름으로 표현
        red, yellow, blue, green, salmon, ...

    2. RGB 색상값으로 표현
        rgb(0~255, 0~255, 0~255)
            RED    GREEN  BLUE
        rgba(0~255, 0~255, 0~255, 0~1의 소수)
            RED    GREEN  BLUE    ALPHA(투명도)

    3. 16진수 색상값으로 표현
        #0000ff -> 파랑색

        00 00 ff -> #00f 로도 사용가능
        R  G  B

CSS의 텍스트

    1. color
        텍스트의 색상을 설정, 기본값은 검정

    2. letter-spacing
        텍스트 내에서 자간 설정

    3. word-spacing # split(' ') 이랑 비슷
        텍스트 내에서 단어 사이의 간격을 설정

    4. text-align
        텍스트 수평방향 정렬(left, right, center, justify 양쪽분할)

    5. text-indent
        단락의 첫줄에 들여쓰기 설정

    6. line-height
        줄 높이를 정하는 속성
        ex) 글자 크기가 40px일때
            line-height: 1.5 -> 줄 높이는 40px의 1.5배인 60px -> 글자 크기는 40px이므로 글자 위와 아래에 각각 10px 
                                         의 여백이 생김 -> 만약 줄 높이가 글자크기보다 작으면 세로방향으로 글자가 겹침

text-decoration
    - 텍스트에 여러가지 효과를 설정하거나 제거하는데 사용(none, underline, line-through, overline)

text-transform
    - 텍스트에 포함된 영문자에 대한 대소문자 설정(lowercase, uppercase, capitalize)

font-variant
    - 소문자를 작은 대문자로 변경(small-caps)

text-shadow
    - 텍스트에 그림자 효과를 설정
        선택자 { text-shadow: 가로길이 세로길이 번짐정도 색상; }

white-space
    - 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 결정하는 속성(sowrap, pre, pre-wrap, pre-line)

text-overflow
    - 텍스트를 줄바꿈 하지 않았을때 넘치는 텍스트를 어떻게 처리할지 결정하는 속성(clip, ellipsis ...으로 생략)

overflow 
    - 요소내의 컨텐츠가 너무 커서 모두 보여주기 힘들경우 어떻게 보여줄지 결정(visible, hidden, scroll, auto)