1주차 학습 내용 정리

2022.01.11 - 2022.01.15
몰랐던 것 위주로 정리

- 1. html
- 2. css
- 3. git

🚩 HTML

1. 웹사이트 제작시 고려 사항

1. 웹 표준 : 웹에서 요구하는 공식 표준이나 기술 규격을 만족하는지 여부
2. 웹 접근성 : 장애 여부와 상관 없이 모두가 웹사이트를 이용할 수 있는지 여부
3. 크로스 브라우징 : 모든 브라우저와 기기에서 웹사이트가 제대로 작동하는지 여부

2. HTML 태그 참고

✅ html 학습 사이트 → https://w3schools.com/

✅ img태그의 속성중 alt는 꼭 작성! (웹사이트 reader에 필요)

🚩 CSS

1. 모션 효과

0. prefix

🥕 다른 버전의 브라우저에서 실행할 때 사용(최신 버전에 맞추는 경우 필요 없음)
- -webkit- : 크롬, 사파리
- -moz- : 파이어폭스
- -ms- : 익스플로러 9.0
- -o- : 오페라

1. transform

🥕 사용 방법

transform: function();

🥕 속성

✔ rotate(angle) : 입력한 각도만큼 회전(평면적, 음수 가능)
✔ scale(width, height) : 입력한 숫자의 비율만큼 확대(축소할 땐 0<n<1, scaleX(), scaleY()로 따로 사용 가능)
✔ skew(x_angle, y_angle) : x축, y축 기준으로 회전(입체적, skewX, skewY 사용 가능)
✔ translate(x, y) : 입력한 좌표값으로 위치 선정
✔ matrix(scaleX, skewY, skewX, scaleY, translateX, translateY) : 한꺼번에 사용

2. transition

🥕 사용 방법

transition-property : value;
:hover와 주로 같이 쓰임

🥕 속성

✔ transition-property : 효과를 적용하는 css 속성

transition-property: width; /*너비에 적용*/

✔ transition-duration : 효과 적용 시간

transition-duration : 1s; /*1초 지속*/

✔ transition-timing-function : 효과 속도

transition-timing-function : linear; /*일정한 속도로 효과 적용*/

✔ transition-delay : 효과 적용까지 걸리는 시간

transition-delay: 2s; /*2초 후 효과 적용*/

✔ transition : 한꺼번에 적용

transition : width 1s linear 2s;

✅ transition의 경우 꼭 4가지 속성 다 적용하지 않아도 되며 숫자가 하나이거나 먼저 나오는 숫자는 무조건 duration에 적용
✅ transition을 모든 css속성에 적용할 경우 transition-property: all; 로 설정

3. animation

🥕 사용 방법

animation-property: value;
@keyframes와 함께 사용

🥕 속성
✔ animation-name : 애니메이션 이름 지정

animation-name: widthStretch; /*애니메이션 이름: widthStretch*/

✔ animation-duration : 효과 적용 시간(default: 0s)

animation-duration : 1s; /*1초 지속*/

✔ animation-timing-function : 효과 속도

animation-timing-function : linear; /*일정한 속도로 효과 적용*/

timing-function 속성 값
1. linear : 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.
2. ease : 기본값으로, 애니메이션 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.
3. ease-in : 애니메이션 효과가 천천히 시작됩니다.
4. ease-out : 애니메이션 효과가 천천히 끝납니다.
5. ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝납니다.
6. cubic-bezier(n,n,n,n) : 애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.
출처: [TCP School]
http://www.tcpschool.com/css/css3_transform_animation

✔ animation-delay : 효과 적용까지 걸리는 시간

animation-delay: 2s; /*2초 후 효과 적용*/

✔ animation-iteration-count: 애니메이션 반복 횟수

animation-iteration-count: infinite /*애니메이션 반복횟수 무한*/

✔ animation-direction : 애니메이션 진행 방향

animation-direction : alternate;

direction 속성값

• alternate : from → to → from
• normal : from → to, from → to
• reverse: to → from, to → from

✔ animation : 한꺼번에 사용

ex>

.example {
	animation: widthStretch 1s linear 2s infinite alternate;
}

@keyframes widthStretch {
	from {
    		width: 300px;
    	}
    	to {
    		width: 600px;
    	}
}

2. 미디어 쿼리

• PC뿐만 아니라 태블릿이나 모바일에도 대응하는 웹사이트(반응형/적응형)를 만들기 위해 사용

🥕 사용 방법
@media 속성 이용
html페이지에서 meta태그 작성

<!-- width는 화면 너비 설정, device-width는 디바이스별 화면너비 자동 설정 -->
<!-- intial-scale은 웹페이지 초기화면배율 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

🥕 예시

.example {
	width: 300px;
    	background-color: yellow;
        font-size: 10px;
}

/* 화면 너비가 320px - 800px 일때 적용 */
@media (min-width: 320px) and (max-width:800px){
	.example {
    		width: 100px;
            	font-size: 5px;
            	background-color: none;
    	}
}

🥕 고려사항

• 미디어 쿼리 정상적으로 출력되는지 확인하기 위해서는 크롬 개발자도구 혹은 Troy Labs(결과물이 서버에 등록되어있는 경우) 사용
• viewport 태그 꼭 사용
• 기본 css 속성을 상속받기 때문에 상속받지 않으려면 property: none; 입력

3. CSS 태그 참고

✅ css 학습 사이트 → https://w3schools.com/

✅ 참고 사이트
1. TCP School
http://www.tcpschool.com/css/css3_transform_animation
2. css 태그 확인 사이트
https://htmlcheatsheet.com/css/
3. 브라우저별 css 기능 지원 여부 확인
https://caniuse.com/

🚩 git

1. 특징

• 버전 관리(형상 관리)도구
• 분산 작업에 용이
• svn보다 속도 빠름
• 데이터 보장
• 오픈 소스
• staging area라는 특수 공간이 있음

2. 명령어

• git init : 현재 디렉토리에 .git이라는 파일 생성
• git status : staging area의 file 상태 확인
• git log : 커밋 내역 확인
  -- git log -p: 각 commit의 diff 결과 보여줌
  -- git log --n : 상위 n개의 commit만 보여줌
  -- git log --stat : 각 commit에서 수정된 파일의 통계 정보
  -- git log --pretty=oneline : 각 commit을 한 줄로 출력
  -- git log --graph : commit간 연결된 관계를 아스키 그래프로 출력
  -- git log --graph --all : 그림으로 볼 수 있음
  -- git log -S function_name : 코드에서 추가되거나 제거된 내용 중 특정 텍스트(ex>function_name)가 포함되어 있는지 검사
• git diff : commit 파일 중 변경된 사항 비교

🥕🥕

• git add . : staging area로 모두 추가 (.은 모든 파일, .대신 파일이름 입력 가능)
• git commit -m "message" *file* : commit 메시지와 함께 파일 커밋 (file은 생략 가능 파일별로 커밋 메시지를 다르게 할 경우에는 파일이름 작성)
• git reset HEAD *file* : git add 취소
• git branch : 브랜치 확인
• git branch *branch_name* : 이름이 branch_name인 브랜치 생성
• git checkout *branch_name* : 해당 브랜치로 이동
• git checkout *snapshot hash* : 해당 스냅샷으로 이동
• git merge *merged_branch* : 해당 브랜치로 병합
• git branch -d *branch_name* : merge된 브랜치 삭제

🥕🥕

• git clone *url* : 원격 git 저장소의 프로젝트 url을 clone(clone할 경우 'origin'이란 이름으로 저장소 생성)
• git remote : 현재 프로젝트에 저장된 원격 저장소 확인( -v를 붙이면 단축이름도 확인 가능)
• git remote add *nickname* *url* : 별칭(대부분 origin) 지정해서 원격저장소 추가
• git remote show *origin* : 원격 저장소 보기(위에 지정한 닉네임을 계속 사용)
• git remote rename *origin* *change* : 별칭 변경(origin → change)
• git remote rm *origin* : 해당 원격저장소 삭제
• git fetch *origin* *master* : 로컬에 없는 리모트 저장소 내용을 모두 가져옴
• git merge *origin*/*master* : 가져온 내용 병합
• git pull *origin* *master* : fetch + merge
• git push *origin* *master* : 커밋내용 원격 저장소에 반영 (브랜치이름(master) 앞에 '+'표시 붙이면 충돌 무시하고 강제 푸시)

🟠 '*' 기호는 변경될 수 있는 부분을 뜻하므로 작성시에는 제외!
🟠 github에 업로드하는 경우에는 일반적으로
add → status로 확인 → commit → push

여러 사람이 clone해서 변경 사항이 있는 경우
fetch + merge (pull) → add → ... → push

github에서 fork한 리포지토리 동기화
git remote -v → git remote add upstream <원본url> → fetch(upstream) → merge(upstream/master) → push(origin master)

3. 참고

✅ git 문서 https://git-scm.com/book/en/v2