사용 프로그램: GitHub Desktop github에서 가져온 폴더(repo)를 vscode에 드래그해서 열어줍니다. 당연히 폴더는 빈 상태일텐데 이 공간에 README파일을 만들어줍니다. 이 파일의 확장자는 markdown으로 해줘야 합니다. *markdown - 서식이 있는 문서를 작성하는 것 README 파일은 모든 git repository가 가지고 있어야 하는 파일입니다. title(타이틀)에는 내가 뭘 했는지에 대해서 써놓는 것이다. Description은 굳이 안써도 된다. main에 Commit 한다고해서 github 사이트에 변경이 올라간 것은 아니다. 마지막 step으로 publish branch를 해줘야 한다 with "github desktop" 맨 처음publish 이후는 pu..
레포지토리(저장소)를 만드는 방법은 여러가지인데 1. 컴퓨터에 폴더를 만들어서 그 폴더를 github에 올리는 방식 2. github에 먼저 repository를 만들어주는 방법 (이 방법이 더 좋다고 함) ※주의: repository명은 공백없이 소문자로 작성 e.g. )onecong-clone-2021 github에 repository를 설치했다면 바로 그 폴더가 내 컴퓨터에 있는게 아니다. 이 부분을 위해서 사용할 프로그램이 github desktop이다. (github desktop은 github과 작업하기 위한 초보자를 위한 도구라고 생각하면 됩니다.) github desktop을 통해서 github에서 생성한 새로운 repo를 내 컴퓨터로 가져옵니다 가져올 폴더의 경로는 수정이 가능하고 가능하..
보호되어 있는 글입니다.
Media query 는 오직 CSS만을 이용해서 스크린의 사이즈를 알 수 있는 방법이다. (나의 웹사이트를 보고있는 사용자의 스크린 사이즈) 미디어쿼리는 우리가 조건을 추가할 수 있는 방법이다. 코드의 조건을 적는 것이지요 만일 이 조건이 true(참)이라면 {} 중괄호 안의 CSS를 실행하라는 조건을 말해주는 것입니다. 미디어 쿼리도 중괄호로 여닫지만 그 안에 element에 CSS를 적용시켜야 합니다. (중괄호 안에 중괄호) 미디어 쿼리는 " and "를 써서 연결됩니다. ※참고: (min-device-width) 와 (max-device-width)는 오직 핸드폰에만 적용된다. 데스크톱은 이해할 수 없겠죠? 그래서 아래의 코드는 (max-width: 600px)이런식으로 준 것입니다. *tip: ..
Q.마우스를 위에 올리거나(:hover), trasition없이 애니메이션을 어떻게 만들까? 애니메이션을 사용하면 우리가 원하는 만큼 만들고 재생시킬 수 있다. 애니메이션 작성법(기본): @keyframes + 애니메이션명 e.g.) @keyframes superHotCoinFlip animation을 작성하는 방법에는 2가지 방법이 있다. ▶1번째 방법- @keyframes 애니메이션명 { from { transform: 속성값 } to { transform: 속성값 } } 효과를 줄 selector { animation: 애니메이션명 + 지속시간 + 효과 +( infinite ) } *infinite: 이 속성값이 없으면 애니메이션 효과가 지정된 지속시간을 한번만 수행하고 다시 되지 않음 계속 실행되..
transformation을 들어가기 전에 , img 태그에 CSS 효과 중 border값을 주고 border-radius: 50%; 을 하면 직사각형이던 border가 동그라미가 됩니다! 알아두면 좋은 팁이니 기억해둡시다 참고로 img 태그는 self-closing tag 입니다~ (맞음 까먹었음ㅋ) Transform 은 무언가를 "변형"시키는 것 transform: rotateX(90deg) / rotateY() / rotateZ() (X,Y,Z축으로 회전 시키는 속성) ▶rotateX(90deg) = 회전시킬거다X축방향으로(90도로) 라는 뜻이며 괄호 안의 값에는 단위를 나타내는 deg를 기입해줘야 합니다. 이 속성을 통해서 이미지를 3D처럼 사용할 수 있는 것이죠 참고로 Z축은 회전하는 느낌이네요..
앞으로 배울 것들 Animation, Transformation, Transition Transition- 어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 방법 when sthing is changing its state during that period called Transition so we are going to put some effet on the trasition. Q.언제 Transition이 필요할까? A. 기본적으로 우리가 css로 상태가 변경됐을 때 다른 효과를 주는 방법을 알고 있다. 그 예시로 a:hover 를 쓰면 a태그에 마우스를 올렸을 때 다른 효과를 주는 것이 있습니다. 하지만 변경되는 과정이 없고 바로 마우스만 올리면 모습이 변하기 때문에 그 중간에 애니메이션..
CSS에서 알아야할 컬러 시스템은 3가지 정도 1. hexadecimal color (16진수 컬러) 2. rgb(red, green, blue) 3. rgba( rea, green, blue , alpha*투명도) 참고: alpha*투명도 의 표기법은( 0.0 ~ 1 )으로 0.5는 50%의 투명도를 말하는 것이고 0을 하면 제로니까 아예 안보이는 것 1은 100%니까 원색이 보입니다. *chrome확장 프로그램 중에 [color picker] 라는 프로그램을 설치하면 화면상의 색을 추출할 수 있습니다. :root 라 불리는 엘리먼트에 변수를 추가해보자 :root는 기본적으로 모든 document의 뿌리가 될 것이다. like starting point 변수명: --main-color로 잡고 docum..
- Total
- Today
- Yesterday
- 항해99프론트후기
- 원티드 FE 프리온보딩 챌린지
- is()
- 프리렌더링확인법
- 항해99추천비추천
- 항해99프론트
- getStaticPaths
- D 플래그
- tilde caret
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- 원티드 프리온보딩 FE 챌린지
- 원티드 3월 프론트엔드 챌린지
- 타입스크립트 장점
- reactAPI
- getServerSideProps
- nvm경로 오류
- nvm 설치순서
- aspect-ratio
- 부트캠프항해
- 형제 요소 선택자
- 틸드와 캐럿
- float 레이아웃
- ~ ^
- fs모듈 넥스트
- 프리온보딩 프론트엔드 챌린지 3월
- Prittier
- grid flex
- && 셸 명령어
- text input pattern
- 타입스크립트 DT
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |