로고 글자에 비유되는 인라인 요소는 글자가 앉아있는 선(baseline)을 기준으로 배치된다. img 역시 인라인 요소이기 때문에 이처럼 불편..한 상황이 생길 수 있다. 블록 요소로 바꾸어 공백을 없애자! img { display: block; } 요소 정렬 .blue { background-color: aqua; width: 400px; height: 300px; position: relative; } .orange { background-color: orange; width: 100px; height: 100px; position: absolute; top: 0; bottom: 0; margin: auto 0; } .blue { background-color: aqua; width: 400px; h..

Assets https://github.com/ParkYoungWoong/starbucks-vanilla-app GitHub - ParkYoungWoong/starbucks-vanilla-app: 스타벅스 랜딩 페이지(+로그인) 예제 for FastCampus 스타벅스 랜딩 페이지(+로그인) 예제 for FastCampus. Contribute to ParkYoungWoong/starbucks-vanilla-app development by creating an account on GitHub. github.com 📁 images, 📄 favicon.ico, 📄 favicon.png 다운로드 What is Favicon? favicon(favorites + icon)은 웹 브라우저의 주소창에 표시되는 아..

⏳ 2023. 5. 1. 19:00 - 21:00 git으로 협업하기 organization에 속한 구성원들은 어떻게 협업할까? 팀장 팀장은 Issues와 Projects를 관리한다. Issues Milestones : 프로젝트의 이정표와 같은 역할, 큼직큼직하게 목표를 작성하자. Labels : 이슈에서 이름표와 같은 역할, 강의에서 추천한 라벨 관련 블로그 Issue Templates : 이슈 작성 가이드라인 Projects : Scrum Board 형태로 이슈를 관리한다. New : 모든 이슈 Backlog : 이번 스프린트 단위에 해결할 이슈 Ready In Progess In Review Done 팀원 이슈 템플릿에 맞춰 목표 이슈를 작성한다.(이슈가 어떤 milestone에 해당하는지 정하기)..

⏳ 2023. 4. 24. 19:00 - 22:00 git이란? 대부분의 기업에서 선택한 VCS(Version Control System)로 파일의 변화를 추적하고 관리하는 시스템이다. 유지보수성에 큰 도움을 주기 때문에 개발자라면 git을 반드시 활용하자! github란? git을 사용하는 프로젝트를 지원하는 웹호스팅 서비스다. git이랑 github를 헷갈려 말하면 개초보로 보인다고 한다.. 조심~! git의 특징 단순한 구조, 빠른 속도 분산형 저장소 지원 비선형적(브랜치) 개발 가능 git의 구조 Blob : 파일 하나의 내용에 대한 정보 Tree : Blob이나 subtree의 메타데이터(디렉토리 위치, 속성, 이름 등) Commit : 커밋 순간의 스냅샷 사진으로 비유하면, Blob(사진 찍히..

⏳ 2023. 5. 1. - 2023. 5. 7. 배운 것을 써먹자. html, css는 물론, git과 마크다운 문법에 익숙해지자! https://github.com/iam454/overwatch-hero-selector-vanilla GitHub - iam454/overwatch-hero-selector-vanilla Contribute to iam454/overwatch-hero-selector-vanilla development by creating an account on GitHub. github.com 마크다운 문법.. 잘 몰라서 몇 번이나 업데이트했다.. 껄껄

⏳ 2023. 5. 1. - 2023. 5. 7. 전환 transition transition: transition-property transition-duration transition-timing-function transition-delay; transition-timing-function 전환 효과의 타이밍(Easing) 함수를 지정 transition-timing-function: ease; -> 느리게-빠르게-느리게 타이밍 함수에 대해 더 자세히 알아보려면? https://easings.net/ Easing Functions Cheat Sheet Easing functions specify the speed of animation to make the movement more natural. ..

⏳ 2023. 5. 1. - 2023. 5. 7. flex flex는 주 축(main-axis)과 교차 축(cross-axis) 중 주 축을 기준으로 요소들을 정렬하기 위한 방법이다. 보통 수평으로 정렬하기 위해 사용된다. flex-direction flex-direction: row; -> 행(좌 => 우) row-reverse : 행(우 => 좌) column : 열(위 => 아래) column-reverse : 열(아래 => 위) flex-wrap flex-wrap: nowrap; -> 줄바꿈 없음 wrap : 여러 줄로 묶음 justify-content 주 축의 정렬 방법 jusify-content: flex-start; align-content 교차 축의 여러 줄 정렬 방법 align-conte..

⏳ 2023. 5. 1. - 2023. 5. 7. 글꼴과 문자 line-height 한 줄의 높이. 행간과 유사하다. line-height: normal; -> 브라우저의 기본값 사용 1.4 : 글꼴 크기의 1.4배 text-indent 문자 첫 줄의 들여쓰기. 음수를 사용한다면 내어쓰기가 된다. 배경 background-image div { width: 300px; height: 300px; background-color: orange; background-image: url("https://heropy.blog/css/images/logo.png"); } background-size div { width: 300px; height: 300px; background-color: orange; backg..