AI교육과정 - CSS.4

• CSS 2D
  • transform
    • 2차원 좌표에서 요소를 변형시키는 속성
    • 이동, 확대, 축소, 회전, 경사 등을 만들 수 있음
    1. translate(x,y): 이동
    2. rotate(각도): 회전
    3. scale(x,y): 확대, 축소
    4. skew(x,y): 경사

😏 벤더 프리픽스(vender prefix)

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

background: -webkit-linear-gradient(방향,색,색)

😋 postcss

• css를 현대적으로 바꿔주는 라이브러리
• css를 자동화하기 위한 자바스크립트 기반 라이브러리
• transition
  • 요소에 추가할 css 스타일 전환 효과를 설정
  • 추가할 전환 효과나 지속 시간도 설정
  • property: 요소에 추가할 전환 효과를 설정
  • timing-function: 전환 효과의 값을 설정
    • linear(처음부터 끝까지 일정한 속도)
    • ease(전환효과가 천천히 → 빨라지고 → 천천히 → 끝)
  • duration: 전환효과를 나타내는 시간을 설정
  • delay: 설정한 시간만큼 대기하다 전환효과를 나타냄
• CSS Animation
  • 요소의 현재 스타일을 다른 스타일로 변환
  • @keyframe 규칙을 사용
  • @keyframe

    • 시작: 0%, from

    • 과정: 1%, 5%, …

    • 끝: 100%, to

      0: ~~ / 5: !!! / 10: 1-1 / 100: ^^
      

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

    • animation-fill-mode: 애니메이션이 끝난 후 어떻게 처리할지 설정

      • forwards: 애니메이션 키프레임이 100%(완료) 도달했을 때 마지막 프레임으로 유지

    • animation-direction: 애니메이션의 진행 방향을 정하는 속성

      • reverse: 반대 순서로 진행
      • alternate: 정해진 순서로 진행했다가 다시 반대 순서로 진행
      • reverse-alternate: 반대 순서로 진행했다가 다시 정해진 순서로 진행

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

    • animation-iteration-count: 애니메이션이 몇 번 반복할지 설정

      • infinite: 무한반복
      • 숫자: 해당 숫자만큼 반복

    • animation-play-state: 애니메이션 재생 상태(재생 또는 중지)를 지정

      @keyframes moving {
                  from {}
      						to {}
      }

• CSS 우선순위 계산
  1. 동일한 속성을 적용할 경우 나중에 적용한 것이 우선
  2. 외부 스타일시트와 내부 스타일시트의 적용은 순서에 따라 나중에 적용한 것이 우선
  3. 내부, 외부, 인라인 스타일시트 중 인라인을 우선시 적용
  4. 계산식
     • id 속성: 100점
     • class, 속성선택자: 10점
     • element: 1점
  5. !important
     • 우선순위 상관없이 먼저 적용(사용 자중)

• Git
  • 버전관리 시스템의 종류

😑 버전관리

• 여러 파일을 하나의 버전으로 묶어 관리하는 것
• 버전관리 시스템 종류
  1. 클라이언트 - 서버 모델
     • 하나의 중앙 서버로 여러 클라이언트들이 각자 필요한 것만 가져와서 작업을 하고 다시 중앙 서버로 통합하는 방식
     • CVS, SVN
  2. 분산 모델
     • 하나의 중앙 서버가 존재하지만 여러 클라이언트들은 각자의 컴퓨터 저장소에 전체 사본을 가지고 작업하는 방식
     • Git
• Git 다운로드 https://git-scm.com/
  
• Git 버전확인
  • git bash를 실행 → git —version
• 윈도우용 터미널 프로그램 https://cmder.app/
  
• 맥용 터미널 프로그램 https://iterm2.com/
  • ls(dir): 현재 디렉토리 내의 파일 및 디렉토리를 표시 [ls는 mac, dir은 win]
  • cd: 다른 디렉토리로 이동
  • cls(ctrl + L): 화면 클리어
• Git 명령어 (Reference 참고)
  • https://git-scm.com/docs

  1. 프로젝트 디렉토리 내에 로컬 저장소를 생성

     • git init

     😥 .git 숨김 폴더 생성 확인

     • ls -al

  2. config 명령어 사용

     현재 설정되어 있는 이름,이메일 확인하기

     • git config user.name
     • git config user.email

     이름 설정하기

     local, global or system

     • git config --global user.name “Kim Danbi”
     • git config --global user.email “people7013@gmail.com”

     🤣 에러나서 변경 안될 때

     git config --global --replace-all user.name "Kimdb"

  3. 파일 상태 확인하기

     • git status

  4. 진행 히스토리 확인
     - git log

     😑 기본 브랜치 변경

  • git config --global init.defaultBranch main
  1. 파일을 선택하기 → stage에 올림
     • git add index.html
  2. 하나의 버전으로 만들기
     • git commit -m “index.html을 커밋”
  3. 파일을 한꺼번에 선택하기 → stage에 올림
     • git add .
  4. 선택된 여러 파일을 하나의 버전으로 만들기
     • git commit -m “현재 디렉토리에 있는 모든 파일을 커밋”