노마드 코더 코코아톡 클론코딩 4일차

노마드 코더 코코아톡 클론코딩 4일차

정리

CSS

1. Pseudo Selector
a. 세부적으로 엘리먼트를 선택하게 해준다. ex) 처음과 끝에만, span 다음에만..
b. 태그:속성{} 처럼 작성한다. id나 클래스보다 더 좋은 방법. html 코드를 건들지 않고도 CSS 작업이 가능하다.

c. first-child, last-child로 첫 번째, 마지막 선택 가능. nth-child()에서 괄호에 odd,even,2n, 3n 등을 넣어서 원하는 엘리먼트만 선택할 수 있다.

d. Combinator
ㄱ. : 말고도 Combinator를 통해서 원하는 대상을 선택할 수 있다.
ㄴ. "부모태그" "자식태그"로 적으면 특정 부모 태그 안에 있는 자식 태그만 선택할 수 있다.
ㄷ. "부모태그" > "자식태그"로 적으면 바로 밑 자식만 선택할 수 있다.
ㄹ. "태그" + "태그"로 적으면 태그 다음으로 오는 태그(형제)를 선택할 수 있다.
ㅁ. "태그" ~ "태그"로 적으면 형제이지만 바로 뒤에 오지 않을 때도 선택할 수 있다.

e. Attribute selector
ㄱ. 속성을 통해 원하는 것을 선택할 수 있다.
ㄴ. 태그[속성=""] 의 방식으로 작성한다.
ㄷ. placeholder~="name" 처럼 작성하면 name이 들어간 모든 placeholder 속성을 가진 태그에 적용한다. ~ 뿐만 아니라 $(끝),*(포함) 등도 있다.


2. States
a. active: 클릭했을 때
b. hover: 마우스가 대상 위에 있을 때
c. focus: 키보드로 선택되었을 때
d. visited: 링크를 방문했을 때
e. focus-within: focused인 자식을 가진 부모 엘리먼트에 적용.
f. state와 다른 엘리먼트를 연계할 수도 있다. ex)form:hover input:focus

* ::placeholder: placeholder를 꾸며줌.
* ::selection: 선택했을 때(드래그) 변화
* ::first-letter: 첫 문자에 변화


3. Colors and Variables
a. color
ㄱ. 16진수 컬러 ex)color:#FCCE00;
ㄴ. :root{--main-color: #fcce00;} > 문서의 뿌리(시작점)에 main color를 저장함. 적용할때는 var(--main-color)로 함. 일일이 코드값을 입력할 필요가 사라짐. > 변수에 색 값을 저장한 것.
b. Variables(변수)
ㄱ. dash 2개 다음 변수 이름. 빈 공간을 변수로 채운다.

CSS 심화

1. Transition
a. 어떤 상태에서 다른 상태로의 변화를 애니메이션으로 만드는 방법. 서서히 부드럽게 변하는 게 애니메이션.
b. state가 없는 곳에서 사용해야 한다.
c. transtion: "변화시키고 싶은 것", "얼마 동안", "효과" 순으로 작성.
d. transition이 가능하려면 state에 미리 지정해놓아야 한다. 예를 들어, color에 마우스를 올렸을 때 색을 바꾸라고 state를 지정해놔야 그걸 어떤 식으로 변화시킬 것인지 transtion이 가능하다. 즉, transiton은 state에 따라 바뀌는 속성을 가지고 있으면 사용된다.
e. 효과(https://matthewlein.com/tools/ceaser 참조)
ㄱ. ease-in: 시작과 끝이 빠름
ㄴ. ease-out: 시작과 끝이 느림
ㄷ. ease-in-out: 시작이 빠르고 끝이 느림
ㄹ. cubic-bezier: 나만의 커브(가속,감속..)를 만들 수 있다.

f. transition과 transiton은 콤마로 구분.


2. Transformation(변형)
a. 한 요소를 말 그대로 변형시킴. 3D까지 가능.
b. ex) rotate, scale, translate
c. 다른 요소의 box element를 변형시키지 않고 원하는 요소를 이동시키기 위해 사용한다. box 차원에서 일어나지 않는다. 픽셀을 변형하는 것이다.
d. Transition과 조합할 수 있다. 훨씬 더 역동적으로 만든다.

내가 이해한 방식은 웹 페이지를 이루는 박스들의 틀은 그대로 두고 내가 변형시키고자 하는 요소만 픽셀 단위로 움직일 수 있다는 것이다.


3. Animation
a. 계속 재생되는 애니메이션을 얻는 법(transition 없이)
b. @keyframes 이름{from{} to {}} 으로 애니메이션을 만들고 animation: 이름 효과; 로 사용.
c. infinite로 무한 반복도 가능. 여러 transform 사용도 가능
d. from, to 대신 0%, 50%, 100% 를 사용해서 rotata 시키는 것도 가능하다. 원하는 만큼 스텝을 가질 수 있다.


4. 미디어 쿼리
a. CSS만을 이용해서 스크린의 사이즈를 알 수 있는 방법. ex) 가로화면, 세로화면, 아이폰 화면..
조건을 추가해 CSS를 실행할 수 있게 한다.
b. "만약 스크린 사이즈가 ~라면 이렇게 CSS를 보여줘"
c. ex) @media screen and (max-width: 400px): 만약 스크린이 400px보다 작으면
d. 가로화면일 경우 > orientation:landscape
e. 조건들 연결은 and로 한다.
f. screen 말고도 print 가 있다. 스크린을 프린트하고 싶을 때 사용(인쇄 미리보기).

Git and GitHub

1. What is Git and Github
a. git: 어떤 파일이든 변경된 내용을 확인 할 수 있게 해준다.
b. 파일을 계속 추적하면서 변경 내역을 관리한다.
c. github에는 변경 내역을 업로드 한다.
d. 커밋: 내가 저장하고 싶어하는 시점(지금 이 시점의 파일 버전), 각 시점에서 어떤 코드가 변화했는지 파악이 가능하다. 코드의 변화는 git이 탐지한다.


2. Github desktop: 초보자들이 github와 작업하기 위한 도구. repository를 컴퓨터로 가져올 수 있다.
3. 변경사항을 수정하면 git은 인식하지만 github는 모른다. github desktop 에서 push를 해줘야 github이 인식을 함.