본문 바로가기

부트캠프38

[TIL] 유데미X사람인 취업 부트캠프 7일차 / css변수 및 전환, html 양식 요소 [1. 오늘 배운 것] 1. CSS변수, CSS사용자 정의 속성 - 다른 속성의 값을 미리 정의하고 프로젝트에서 정의한 값을 사용하는 것을 도움 - html선택자에서 변수 정의 - var(변수명)으로 사용 html { --color-grey-100: rgb(236, 236, 236); /*변수 설정*/ /*숫자가 낮을수록 밝은색*/ background-color: var(--color-grey-100); } 2. 실행 중인 CSS변수 - 미리 정의된 값을 사용하면 값이 통일된 요소 하나하나의 값을 바꾸지 않아도 된다 - 즉 편리함 html{ --color-grey-100: rgb(236, 236, 236); --color-grey-400: rgb(134, 134, 134); --color-grey-600.. 2023. 12. 21.
[TIL] 유데미X사람인 취업 부트캠프 6일차 / 반응형 웹 제작, 유닛과 미디어 쿼리 [1. 오늘 배운 것] 1. 반응형 웹 기반 준비 -html 더보기 WebFood Browse Meals Browse Meals Browse Our Delicious Meals Risotto with Tiger Prawns Add to cart Cheese burgers Add to cart - css 더보기 body { font-family: "Open Sans", sans-serif; margin: 0; background-color: rgb(44, 41, 38); } a { text-decoration: none; } #main-header { height: 80px; display: flex; justify-content: space-between; align-items: center; backg.. 2023. 12. 20.
[TIL] 유데미X사람인 취업 부트캠프 5일차 / css grid, UTF-8 유니코드 [1. 오늘 배운 것] 1. %단위 작업 - width: n%; => 부모 너비의 n%를 사용 (반응형) - height: n%; => 부모 높이의 n%를 사용 (반응형) 2. 상단 탐색 모음 완료하기 - css header a{ color:rgb(255, 251,0); text-decoration: none; font-size: 20px; padding: 12px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-sizing:border-box; } header a:hover{ color:rgb(77, 77, 77); background-color: rgb(255, 251, 0); } - 결과 3. highlight섹션 만들기 - html에서 strong으로 두꺼운 글.. 2023. 12. 19.
[TIL] 유데미X사람인 부트캠프 4일차 / 깃 브랜치, css flexbox [1. 오늘 배운 것] 1. 브랜치 병합, 병합 충돌 수정 이해하기 - git branch : 브랜치 목록을 보여주는 명령어 - git branch -m 수정할_브랜치의_수정된_브랜치명 : 브랜치명을 수정 - git checkout 이동할_브랜치명 : 다른 브랜치로 바꾸기 - git checkout -b 생성할_브랜치명 : 브랜치를 생성하고, 그 브랜치로 위치를 바꾸는 명령어 - git merge 브랜치명 : 현재의 브랜치에 다른 브랜치를 합치는 명령어 - git log : 깃 로그 확인 - git add : 깃 커밋 전 커밋할 부분에 추가 - git commit -m : 깃 커밋과 커밋메세지 2. 브랜치&커밋 삭제, 단계적 &비단계적 되돌리기 - git branch -d 삭제할_브랜치명 : 브랜치 삭제.. 2023. 12. 18.
[TIL] 유데미x사람인 취업 부트캠프 3일차 / 웹 제작과 호스팅, 깃 명령어 [1. 오늘 배운 것] 1. 실습으로 웹페이지를 하나 만들었다 2. 새로운 html 요소 - : 글자를 더 두껍게 하고 소리 톤을 바꾸어 전달 (강조) - : 소리 톤을 바꾸어 전달 (강조) - : 으로 부분을 나눠 편하게 코드를 볼 수 있다 3. 호스팅과 배포 - 호스팅 : 원격 컴퓨터라는 서버에서 해당 웹사이트의 코드를 저장하고 방문객에세 제공 - 배포: 웹사이트를 취급하는 것, 서버, 방문자에게 코드 제공 4. 웹 사이트 호스팅하기 (Netlify) - Netlify Drop으로 들어가서 파일을 업로드한다 - 그럼 끝이다 (...) - 가입하면 도메인을 구매할 수 있는데, 업데이트가 가능해진다 5. 상대경로&절대경로 - 경로를 설정할 때 상대경로로 지정하는 것보다 절대경로를 사용하는 것이 나을 수 .. 2023. 12. 15.
[TIL] 유데미x사람인 취업 부트캠프 2일차 / 웹 이미지 삽입과 css 활용, live server의 사용법 [1. 오늘 배운 것] 1. 아이디 선택자로 단일 요소 선택 - 태그 안에 id를 붙여준다 - Ex) - css에 #todays-challenge{} 형식으로 꾸며준다 2. css로 글씨 형식 바꾸기 - font-weight : 글씨 굵기 - font-size : px라는 절대단위를 사용해서 바꿀 수 있다 3. 구글의 다른 글꼴 사용하기 - Browse Fonts - Google Fonts 에서 원하는 글꼴을 찾는다 - select this style을 눌러 제공되는 코드를 복사해 html의 head에 추가한다 - html - css h1 { font-family: 'Oswald'; text-align: center; color: red; } p{ text-align: center; } #todays-c.. 2023. 12. 14.