branch는 원본(main)에 다른 가지를 쳐서 다른 코드를 만드는 것에서 그 이름이 유래됩니다. -branch는 코드들의 평행세계 라고 생각하는 것이 편합니다. 위의 사진 속 master를 main이라고 생각한다면 main의 작업에서 곁가지를 쳐서 각자의 작업을하고 나중에 merge를 통해 main에 합칠 수 있습니다. branch를 사용하면 버전관리에 용이합니다. 새로운 기능을 만들어서 테스트할 수도 있습니다. 먼저, github desktop을 통해서 새로운 branch를 생성해줍니다. "experiment"라는 새로운 branch를 생성했습니다. 현재 branch의 위치가 experiment로 돼있고 내가 사용하고 있던 VSCode(소스코드편집기)에서 코드를 변경하면 experoment 쪽으로 ..
will-change(불안정한 animation*사용 시 같이 사용): 기본적으로 브라우저에게 뭔가가 바뀔 것이라고 말해주는 것 (브라우저에게 렌더링 힌트를 주고 element에 실행되길 기대하는 변화를 명시함 +부가설명: will-change는 그래픽카드를 이용해서 애니메이션을 가속화한다.) 이 속성을 쓰면 브라우저가 애니메이션을 더 괜찮게 만들어준다. 왜냐면 이게 바뀔 거라는 것을 알고 있기 때문이다. *불안정한 animation이란? 어떤 요소에 keyframe을 걸어서 애니메이션 효과를 추가했는데 그 모습이 흔들린다거나 불안정적인 형상을 띄는 animation효과를 지칭합니다. e.g.) 기존의 animation "heartBeat"는 will-change속성이 없을 시, scale값에 따라 1...
▶animation-delay 이 속성은 말 그대로 지정된 animation의 시작을 연착시키는 속성입니다. 사용예시: animation-delay: 2s; //참고로 이 곳에 animation: 애니메이션이름 모션스타일 지속 시간; 이 작성돼있어야 겠죠? 따로 animation과 animaiton-delay를 적어줘도 되고 animation 하나에 delay를 포함해도 됩니다. ▶animation animation CSS 속성은 다수의 스타일을 전환하는 애니메이션을 적용한다. 초기값 (ref: MDN) as each of the properties of the shorthand: animation-name (en-US): none animation-duration: 0s animation-timing-..
▶vw, vh, %(percent) 구분 100vh = The screen's height = view height 100vw = The screen's width = view width 100% = 100% of the PARENT ▶animation: forwards CSS animation(@keyframe)을 활용해서 어떤 화면을 띄웠다가 없애고 싶을 때 forwards라는 속성값을 쓰면 된다. 우리가 이전에 사용했던 animation 속성값으로는 infinite 가 있었는데 해당 animation을 끊임없이 연속재생하기 위해서 사용했었다. forwards 개념: The final propery value(as defined in the last @keyframes at-rule) is maint..
▶border-radius세분화 border-radius는 4개의 CSS 속성의 단축 속성입니다. border-bottom-left-radius border-bottom-right-radius border-top-left-radius border-top-right-radius 즉, 반대로 각각의 값을 따로 지정할 수도 있다는 뜻입니다. e.g.) border-radius전체에 15px 값을 주고 그 다음에 border-top-left-radius의 값을 0으로 줌으로써 말풍선 같은 모양을 만들어냈습니다. ▶flex children 기능: order order 라는 속성은 오직 flex children한테만 적용가능하다. (전제조건 - display:flex; ) 방법1) 순서를 바꾸길 원하는 자식요소에 ..
▶box-sizing:border-box 사용예제 alt-screen-header의 포지션을 고정하려고 position:fixed; 이후, width:100% 를 줬을 때 이처럼 오른쪽이 잘리는 경우가 있다. 이때 사용하는 속성과 속성값이 box-sizing: border-box; 이다. 속성값을 border-box로 하고나면 맨위 상단의 screen-header처럼 완전히 화면안에 요소들이 들어오게 된다. ▶text-align 사용예제 습관적으로 내부 요소를 중앙정렬하려면 flex를 사용해서 내부에 있는 텍스트를 justify-content:center를 사용하여 중앙에 정렬하려고 했는데 그렇게하면 코드가 2줄로 길어지게 된다. 또한, 내부의 요소가 여러개가 아니라 "text" 하나라는 점을 고려하면 ..
▶아이콘 링크 만들기 html 코드에서 내가 아이콘을 눌렀을 때 다른 스크린으로 전환(해당 링크로 이동)을 원한다면, 이런식으로 a태그 안에 i태그(아이콘)을 넣어줘야 합니다. span 태그 안에 따로 따로 닫아주면 아이콘을 눌러도 해당 링크로 전환되지 않습니다. //틀린 예제 ▶font-awesome에서 작은 화살표는 angle(앵글)이라고 부릅니다. 검색 시, angle 이라고 검색해주면 됩니다. ▶3요소를 각각 같은 비율로 분배하여 가로 정렬하기 (아래의 예제에서는 3요소가 "3개의 컬럼"이라고 생각하면 됩니다.) CSS코드의 첫번째 컬럼에 margin-right: auto; 마지막 컬럼에 margin-left: auto; 위의 코드를 적용한 ↓결과물↓
정리를 시작하기 전에 가장 잘 사용되면서 잘 까먹는 것 복습하고 들어갑시다. ▶absolute child 는 항상 relative father가 필요합니다. -> 바로 위에 건너뛰고 상위에 있는 건 적용이 안됨 position: relative; 로 돼있는 부모가 없으면 position: absolute를 했을 때, 변경하는 top/left/right/bottom의 위치 기준점이 제대로 먹히지 않습니다. absolute child always need a relative father ▶text-align 과 align-items 의 차이점 text-align은 텍스트 국한 align-items는 전제조건: display:felx; 교차축을 기준으로 정렬한다. ▶box-sizing: border-box; ..
- Total
- Today
- Yesterday
- 타입스크립트 장점
- float 레이아웃
- 부트캠프항해
- && 셸 명령어
- 타입스크립트 DT
- ~ ^
- 원티드 프리온보딩 FE 챌린지
- tilde caret
- fs모듈 넥스트
- D 플래그
- Prittier
- grid flex
- 항해99추천비추천
- 프리온보딩 프론트엔드 챌린지 3월
- 형제 요소 선택자
- 항해99프론트
- reactAPI
- 틸드와 캐럿
- 항해99프론트후기
- 원티드 FE 프리온보딩 챌린지
- 프리렌더링확인법
- getServerSideProps
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- aspect-ratio
- is()
- 원티드 3월 프론트엔드 챌린지
- getStaticPaths
- text input pattern
- nvm경로 오류
- nvm 설치순서
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |