오열매의 코딩 공간

요소들을 움직이고 변형시키고 애니메이션을 만드는 방법에 대해 정리한다. Transition과 Transformation은 State 와 엮어서, 특정 상태에서만 나타나게 하는 방식으로 쓰인다. 예를 들면, 마우스를 올려 놨을 때 한 바퀴 돌아간다든지 등이 있다. Animaition은 State와 관계 없이 지정한 시간 또는 계속해서 Transition과 Transformation을 적용시키는 방식이다. 1) Transition /* transition: */ transition: margin-left 4s ease-in-out 1s; property name에는 background-color, margin, border 등의 다양한 특성들이 들어갈 수 있다. 변화시키고 싶은 모든 대상들을 넣으면 된다. ..

방대한 양의 코드를 사용하다보면, 반복되는 코드들이 있다. 예를 들면, 위 예시처럼 background-color 라는 property에서 wheat, tomato 등으로 이름이 정해진 경우에는 상관 없지만, rgb(252, 201, 65) 처럼 다른 표현을 이용하여 색을 나타낸다면? 코드도 지저분해지고 귀찮아진다. 이럴 때 var()를 활용한다. :root{ } 에 사용할 변수를 정의하고(변수명 앞에 -- 를 붙여야 한다.), 이 변수명을 var( ) 안에 넣어 활용하면 된다. 참고) https://developer.mozilla.org/ko/docs/Web/CSS/var https://nomadcoders.co/kokoa-clone/lectures/1741

Selector(선택자)란, 말 그대로 선택을 해주는 요소를 뜻한다. 특정 요소들을 선택하여 스타일을 적용할 수 있다. Selector 종류에 대해 간단하게 정리한다. 들어가기 전에, CSS 문장을 선언하는 규칙인 Rule Set을 살펴보고 들어간다. 1) Basic selectors - Universal selector >>> 사용법: * { } / 대상: 모든 태그 * { border: 1px solid black; } - Type selector >>> 사용법: 태그명 { } / 대상: 지정한 태그명에 해당하는 모든 태그 div { width: 100px; height: 100px; background-color: wheat; } - Class selector >>> 사용법: .클래스명 { } / ..

태그들 중에는 input, a, img 태그 등과 같이 태그 자체에 기능이 있는 경우도 있지만, 기능은 딱히 없지만 이름으로 내용을 구분하기에 용이하게 해주는 태그들이 있다. 이를 Semantic(의미의, 의미론적인) Tag라고 한다. 기능은 div 태그와 동일하다. div는 단순 block element에 불과하다. 박스라고 보면 된다. 원래는 이러한 박스에 모든 내용들을 넣었었다. 하지만 웹사이트의 규모가 커지면서, 그 내용물을 구분하기가 힘들어졌다. 이 부근엔 어떤 내용이 있는지 짐작해야만 했다. Semantic Tag를 이용하면, 이 태그 안에는 어떠한 내용들이 있겠구나 하는 것을 유추할 수 있다. 또한, 검색엔진 최적화와 웹 접근성 등에도 유리하다. 주요 Semantic Tag 종류) 1. : ..

태그의 종류는 매우 많다. 모두 외우는 것이 아닌, 어떻게 사용하는지만 알면 된다. 위 사진은 Advanced Web Ranking 이라는 사이트에서 통계낸 '사이트에서 가장 많이 사용하는 html 태그 순위' 이다. 일단 분류를 하자면, html, head, body, title, meta, div, a, script, link, img, span, p, li, ul, style, br, h2, input, h1, form, h3, nav, footer, header, iframe, button, strong, i 등이 있다. 재분류를 하기에 앞서, 가장 많이 사용하는 html 태그는 사용률 100% 인 것으로 봐도 알 수 있듯이 웹 사이트를 만드는 데 필수적이다. 사이트를 구성한느 필수 태그라고 보면..

1) 새롭게 프로젝트 폴더와 Github 저장소를 생성했을 때 빨간색 박스 안의 코드들을 실행해주면 된다. echo "# " >> README.md git init git add README.md git commit -m "" git branch -M main git remote add origin https://github.com//.git git push -u origin main 2) 이미 작업 중인 폴더가 있을 때 주황색 박스 안의 코드들을 실행해주면 된다. 코드의 내용을 보아하니 원격 저장소에 연결하고 main branch 생성만 push 하는 것으로 보인다. 다른 코드들까지 push 하려면 git add - git commit - git push 의 과정을 거쳐야 한다.

Commit 수정은 가장 최신의 Commit만 가능하다. Amending Commits) 실습을 통해 살펴본다. 파일의 내용을 수정하여 push했다. 그런데 파일명을 main story.txt에서 amend.txt로 바꾸려 했는데, 깜빡했다. 새로 파일명을 바꿔서 올릴 수도 있겠지만 비효율적이다. 이를 수정해보자. 일단 바꾸고자 하는 내용을 수정하고 git add . 를 한 뒤, git commit --amend --no-edit commit 메세지는 수정하지 않는다. 수정하고 싶으면 --no-edit 대신 -m "메세지" 를 입력하면 된다. 수정하고 push를 하면, 수정한 내역이 기존의 최신 commit 에 반영되었다 Git Status) git status >>> 현재 작업 중인 파일의 상태를 알 ..

이전에 배운 Checkout을 활용한다. 특정 지점에서의 branch 생성을 원하는 경우, 해당 Commit을 checkout 을 통해 돌아간 뒤에 아래 명령어를 입력한다. 현재 지점에서의 생성을 원한다면 바로 입력한다. git checkout -b ( -b 옵션을 넣으면 Branch 생성과 전환을 한번에 실행할 수 있다.) 특정 지점에서의 branch 생성을 원하는 경우의 과정은, 아래 코드로 한 번에 실행할 수도 있다. git checkout -b 새로 생성한 branch를 github에 올리려면, git push origin 위 코드를 입력하면 된다. 참고로 branch를 전환하려면, git checkout -b 에서 -b 옵션만 빼면 된다. ex) git checkout main + Merge 취..

시작하기 전 주의사항: Git CLI로 작업할 때에는, 항상 작업 디렉터리에 있어야 한다. 다른 곳에서 git 명령어를 사용하면 골치 아픈 일이 벌어질 것이다. 하지만 이미 골치 아픈 일이 벌어졌거나, 이전의 시점으로 프로젝트를 되돌리고 싶다면 Reset이 필요하다. 1) Checkout 실습으로 진행해본다. 한 줄씩 라인을 작성하고 있는데, 두 번째 라인을 완성시킨 시점에서 첫 번째 라인만 작성했던 commit으로 되돌아 가고 싶다. git log에서의 HEAD는 모든 Commit이 합쳐진 파일의 현재 위치이다. HEAD의 위치를 다른 commit으로 바꾼다면, 그 위치가 현재 파일의 위치가 되는 원리이다. checkout은 HEAD의 위치를 다른 commit으로 바꾸는 작업이다. git checkou..

Git을 Github Desktop이 아닌, Terminal에서 다루는 방법 1) CLI log, commit, push 들어가기 전에, VSC에서 보여주는 기능에 대해 살펴보자. EXPLORER에서 보이는 M이나 파일 행 옆의 파란색 표시는 Modified의 표시로, Git에 올린 파일을 기준으로 내용이 변경되었음을 표현한다. U나 초록색 표시는 Untracked의 표시로, Git에서 아직 해당 파일을 감지, 반영하지 않았음을 의미한다.(미등록) git log를 입력하면 위와 같이 나오는데, History를 터미널에서 본다고 생각하면 된다. 이전에 commit 한 내역들을 한 번에 볼 수 있다. (나오는 방법: q 입력) * 변경된 파일을 push하는 방법(순서) 1) git add (파일명 또는 .)..