요모조모

문제 상황: npm run dev를 사용해 index.html을 열었을 때 동일 폴더의 다른 폴더 속의 파일들은 실행이 안 되는 일 발생.개발자 도구를 열어 보니 폴더 앞뒤에 자동으로 /를 붙이는 것 때문이었음.그리고 아래쪽의 Go Live 버튼을 눌러서 실행시켰다.따라서 원래 사용하던 확장자 Live Server를 삭제하고 Live Server(five server)를 설치해주었다.그랬더니 해결되었다.

🍰 CSS 진도, 과제 리뷰.🍴 텍스트 및 글꼴단위 : 절대 단위 px(픽셀)지정 안했을 때 기본 글자 크기 - 16px글자 크기가 항상 지정된 픽셀로 고정됨: 상대 단위 em, rem, vw, %em - 부모로부터 상속. ex) 2em은 부모 요소 폰트 크기의 두 배rem - html 요소(루트) 기준으로 계산. vw(Viewport Width), vh(Viewport Height) - viewport 기준으로 계산. ex) 50vw는 화면의 절반 차지. 화면을 줄이면 같이 줄어듦.% - 부모 요소에 대한 상대적 크기. font-size, padding, margin에 따라 계산 방법 달라짐.: 넘버(number) 단위숫자만을 값으로 가지는 상대적인 단위.line-height에서 주로 사용 - 줄의..

선생님 branch에서 수업 코드를 보기 위해 git pull을 하던 중 충돌이 발생했다. student 브랜치에서 만들어야 할 파일을 ssam 브랜치에서 잘못 만든 것 같다. 당황해서 제대로 보지도 않고 어떤 코드를 선택할 지 누르라는 버튼을 current랑 incoming이랑 대충 눌렀다... 그랬더니 내가 작성한 코드가 선택되었다. 난 선생님 코드를 보려고 했던 거여서 뒤늦게 검색을 했으나 이미 병합됐고... 병합 이전으로 돌아가고자 선생님의 도움을 받았다. 일단 merge에서 빠져나오자 -> git merge --abort  우선 어느 시점으로 돌아갈 지 보기 위해 git log --oneline을 통해 commit 기록을 봤다git reset --hard : 그 시점 커밋으로 복원되며 이후에 ..

🍰 Fast-forward merge: 병합할 브랜치가 기준 브랜치의 모든 commit을 이미 포함하고 있는 경우 발생기준 브랜치에 신규 commit 없을 때기준 브랜치의 HEAD를 현재 브랜치의 HEAD로 이동시킴으로써 병합 완료 가능새로운 병합 커밋 생성 Xmerge 완료한 브랜치는 삭제해도 됨 git branch -d 🍰 3 - way merge: 브랜치 간 병합 할 때 사용되는 일반적인 방법기본적으로 git은 세 개의 브랜치 사용(main, 현재 작업 중인 브랜치, 병합할 대상 브랜치)각 브랜치에 신규 commit 있을 때Git은 이 세 개의 브랜치를 비교하며 변경 사항을 찾음이 때 공통 조상(ancestor) commit 기반으로 변경 사항 결정변경 사항이 충돌하지 않을 경우 git은 자동으..

🍰 주 축 기준 배치 방법 지정justify-contentflex-start : 주축의 시작점 기준 배치flex-end : 주축의 끝점 기준 배치center : 주축의 중앙 기준 배치space-between : 첫 항목은 시작점, 끝 항목은 끝점, 중앙 항목은 같은 간격으로 배치space-evenly : 모든 항목을 같은 간격으로 배치space-around : 각 항목은 양쪽 여백의 절반만큼 나누어 가짐See the Pen space around by 구르미 (@xicpablj-the-sasster) on CodePen.🍰 교차 축 기준 배치 방법 지정align-itemsstretch : flex item을 확장해 교차축을 꽉 채움. 기본값flex-start: 교차축의 시작점 기준 배치flex-en..

🍰 Flexbox란?1차원 콘텐츠용으로 설계된 레이아웃 모델아이템 간 공간 배분, 강력한 정렬 기능 제공하기 위해 설계됨왜 1차원이라고 하는가? -> 한 번에 하나의 차원(행 or 열)만 다룸. Grid Layoutflex container로 flex item들을 묶어야 함  🍰 flex 방향 지정하는 flex-direction 속성flex-direction 속성으로 설정한 축 = 주 축(main axis)주 축에 수직인 축 = 교차 축(cross axis)row => 주 축은 행(가로), 교차 축은 열(세로) - 기본값row-reverse => flex-item은 주축 끝점에서 시작점으로(오른쪽 -> 왼쪽) 배치column => 주 축은 열(세로), 교차 축은 행(가로)column-reverse..

🍰 선생님 폴더에서 특정 이미지 폴더를 다운 받는 작업을 했는데 위 에러 메시지가 출력됐다. 이상하게 그 폴더 자체는 만들어졌는데, 파일은 하나도 다운 받지 못했다. 선생님의 도움을 받아 화면 공유를 통해 해결했다!알고 보니 캐시 문제라고 한다.npm cache clean --force // NPM의 캐시 강제로 지우는 명령어cd ~/.degitcd github/ls -a // ssam 폴더 있는 지 확인rm -rf ssam폴더/ // 폴더 삭제cd // 루트로 이동ls // 중복될 폴더 없는 지 확인degit ssam폴더/assets/images images // images 폴더 다운캐시를 삭제해준 후 다시 시도했더니 잘 받아졌다! 어찌나 식은 땀 나던지...불금이었는데도 불구하고 밤에 오류를 해결..

🍰 CSS 진도를 나갔고 첫 과제를 했다. 총 11시간 정도 걸린 것 같다... 내 이해력 어떡하니... 과제하면서 울고 싶었다. 앞으로 나올 숙제 중 가장 쉬운 걸 텐데.뭘 어째 연습해야지 🍴가상 요소(Pseudo-elements)선택자에 추가하는 키워드선택한 요소의 일부분에만 스타일 입히기 가능::before선택한 요소의 첫 번째 자식 요소로 삽입됨선택한 요소의 시작 부분에 콘텐츠 추가::after선택한 요소의 마지막 자식 요소로 삽입선택한 요소의 끝부분에 콘텐츠 추가 🍴 box-sizing박스 모델에서 요소의 크기 계산 방법 결정하는 속성기본 - content + padding + border + marginbox-sizing 속성에 따라 어떤 부분 포함하는 지 결정 box-sizing: co..

🍰 CSS 진도를 나갔다. 🍴 Web Fonts(웹 폰트)웹 페이지에서 사용되는 폰트컴퓨터에 미리 설치된 기본 폰트 이외의 글꼴 사용 시 웹 서버에서 로드하여 사용해야 함🍴 font-familyHTML에 적용되는 폰트 제어웹 브라우저 표시 시 브라우저는 실행 중인 시스템에서 사용 가능한 폰트 찾을 때까지 font-family 값 목록을 살펴봄body{ font-family: "Noto Sans KR", sans-serif; }🍴 SOP(Same Origin Policy)다른 출처의 리소스 사용을 제한하는 보안 방식🍴  CORS(Cross Origin Resource Sharing)애플리케이션 통합을 위한 메커니즘한 도메인에서 로드 되어 다른 도메인에 있는 리소스와 상호 작용하는 클라이언트 웹 애..

🍰 Figma 특강을 들었다.🍴 디자인에서 중요한 것형태 조합색상 조합 - 60 30 10 RULE(primary, secondary, accent)이 두 가지의 배경 - 강조/비강조 🍴 Figma를 알아야 하는 이유현업에서 링크만 주는 경우 있음디자이너의 의도 파악에 유리 🍴 UI 설계비즈니스 별 서비스 품질일관된 서비스 브랜딩(ex. 이건 누가 봐도 카카오 제품임을 알 수 있게) 🍴 프론트 엔드 개발자는?복잡성 낮추기테스트 코드 구현코드 문서화 작업일관된 UX/UI 구현 🍴 WorkFlow기획자 -> 디자이너 -> 프론트 엔드 개발자 -> 고객개발자가 고객과 가장 가까운 위치 🍴 Figma?2016 ~ 코로나로 급부상강력한 UI 드로잉자바스크립트 기반의 툴웹에 자동저장, 시스템 충돌 ↓ ..