Daily Coding Daily Coding

💡 position Elements are then positioned using the top, bottom, left, and right properties. position 속성 static relative fixed absolute sticky static - default값 - 요소를 기본 문서 흐름에 유지시켜서 상하좌우(top, bottom, left, and right)로 위치 이동 불가 relative - 요소를 문서 흐름의 일부로 두어서 다른 요소에 의해 위치가 바뀌지 않은 것처럼 보이게 하지만 요소 위치 이동 가능 absolute - 인라인 요소처럼 보임 - 문서 흐름을 벗어나 다른 요소가 이 요소를 무시함 - 부모 요소에 relative 속성을 추가하면 부모 요소에 상대적이 된다(첫 ..

CSS Flexbox Layout Module flexbox 속성은 float나 position 속성 없이 반응형 레이아웃을 만들 때 유용한 구조이다. 예제를 통해 알아보자! Travel Goals Destinations About 부모(container) 안에 자식 박스 2개가 있고, 그 중 하나의 자식 박스 안에 또 2개의 박스가 있는 상태이다. 부모(container)에 display: flex; 속성을 추가해서 flexbox를 만들 수 있다. flexbox의 다양한 속성들 flex-direction column(수직 스택), column-reverse, row, row-reverse flex-wrap 웹사이트가 줄어들 때 박스들을 밑으로 밀려나게 할 것인지, 고정할 것인지 결정하는 속성 wrap..

[Git] github에 업로드 하기 1. github에 레파지토리 생성 후 복사하기 2. 터미널에서 명령어 입력 후 붙여넣기 git remote add origin URL - git remote 내 컴퓨터에서 외부 저장소에 관한 작업을 할 때 사용하는 명령어 - add origin URL.. zooozoo.tistory.com git과 github 연동 💡git remote add origin 링크 origin은 url 바로가기 origin은 원격 저장소를 가리킨다 -> 항상 전체 url을 기억하지 않아도 됨 💡git push -u origin main 깃허브 개인 인증 토큰 삭제 1. git credential-osxkeychain erase 2. host=github.com 3. protocol=h..

💡 Branch [Git] 브랜치(Branch)생성 및 업로드 브랜치란? 특정 커밋을 가리키는 포인터이다 [브랜치 생성] git branch 브랜치이름 예시) git branch develop 입력 후 git log 를 통해 확인해보면 HEAD가 가리키던 master 브랜치에 develop 브랜치도 같이 가리 zooozoo.tistory.com 브랜치 이름 변경: git branch -m 변경할 이름 * git init을 하면 자동으로 master 브랜치가 만들어지는데 요즘은 master 대신 main으로 이름을 변경해서 쓰는 추세라고 한다 브랜치 생성 및 이동 : git checkout -b feature 새로운 브랜치를 생성하고 status를 확인해보면 아직 git이 추적과 스테이지를 하고 있지 않..

💡Git [기초 지식] git에 대한 이해 & 버전 관리 방법 Git이란? Git: 프로젝트의 버전 관리를 하기 위해 사용하는 프로그램 Github: Git 기반의 저장소 서비스 git으로 개발 중인 프로젝트의 버전을 관리할 수 있고, 다른 개발자와 함께 관리하면서 협업하 zooozoo.tistory.com Git에 대한 내용은 다른 강의에서 들어서 정리해둔 것이 있기 때문에 복습 차원에서 들었다. 💡리포지토리 초기화: git init yeonsu@MacBook-Pro gitBasics % git add test.txt yeonsu@MacBook-Pro gitBasics % git status On branch master No commits yet Changes to be committed: (use ..

💡이번 강의 핵심 내용 - git & github - Human Computer Interaction - Mac Terminal Git & Github - 효과적인 컨트롤과 코드 변화 추적이 가능하다 git github local git repositories (클라우드 호스팅 제공자) 깃으로 관리한 프로젝트를 클라우드로 보내는 역할 코드 버전 제어 협업 & 공유에 유리 리포지토리로 구성됨(혼자 작업 시 좋음) 가장 큰 클라우드 호스팅 플랫폼 Human Computer Interaction 🙋‍♂️: "폴더 열어줘" 🖥: ? 🙋‍♂️: 파인더 - 폴더 - 더블클릭 🖥: 폴더 열기 이처럼 적절한 액션을 취하거나, 명령어를 입력함으로써 컴퓨터와 상호작용 할 수 있다. GUI(Graphical User Int..

💡이번 강의 핵심 내용 - 호스팅 - 배포 - 파비콘 - 절대 경로 웹사이트 배포(Deploying a Website) Moving the website code onto a remote machine ("server") that serves the site to visitors 호스팅(Hosting) The remote machine ("server") hosts(stores) the website code and serves it to visitors => If a website should be visible to other people, it needs to be hosted / deployed Netlify를 이용한 웹 배포 Netlify App app.netlify.com 간단하게 드래그&드롭..

Html, CSS 실습 만들어야 하는 페이지 실제 구현한 페이지 💡 구현 실패한 부분 강조 텍스트 앞에 있는 마커(bar) p{ color: white; padding-left: 10px; } .subTitle{ color: rgb(246, 255, 151); border-left: 5px solid rgb(227, 197, 0); } padding-left 속성을 이용해서 본문 텍스트를 오른쪽으로 이동 시키고, 마커를 만들고자하는 텍스트에 border-left 속성을 이용해서 만들 수 있다 소스코드 HTML & CSS Basics Summary HTML Summary HTML (HyperText Markup Language) is the heart of every webpage. It defines t..