Front-end Dev.
-
Select 태그 내 아이콘 선택이 안될 때Front-end Dev./HTML_CSS 2022. 4. 4. 22:09
👉 CSS 이벤트 제어 속성을 사용하자 pointer-events : none; ... .select-group { position: relative; } .select-group .ic-caret { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); ... } ic-caret(아이콘)는 position: absoulute를 줬지만 select 태그는 positon 속성을 주지 않아서 static 상태이다. ic-caret이 select 태그를 덮어버린 상황이여서 아이콘을 아무리 클릭해도 select를 인식하지 않았다. pointer-events : none; cursor 포인터의 pointer 누르는 것과 관계없는 아이콘에 적..
-
🔧해결 - git commit 취소하기Front-end Dev./문제 해결 2022. 2. 5. 02:45
commit 하면 안 되는 브랜치에서 실수로 잘못 commit을 했다. 바로 이전 커밋을 취소하는 방법을 아래 명령어로 해결했다. 앞으로 commit을 잘못 push 한 경우에 유용하게 사용할 수 있을 것 같다. 주의할 점은 되돌아간 commit 이후의 모든 commit 정보가 사라진다는 것이다! 협업 시에 이런 상황이 온다면 팀원과 상의 후에 진행하기! 가장 최근 커밋 되돌리기 git reset Head^ 커밋 n개 되돌리기 git reset "HEAD~n" 참고 사이트 [Git] 커밋 취소하기 : git reset HEAD Git add, commit, push 취소하기
-
코드팟 리액트 - 퀴즈 앱 만들기(1)Front-end Dev./React 2022. 2. 4. 14:32
코드팟 리액트 - 간단한 퀴즈 앱 만들기 1. 퀴즈 컴포넌트 만들기 App 컴포넌트 만들기 Class 추가 CSS 입히기 2. 버튼 컴포넌트 만들기 + 이벤트 다루는 법 이벤트 명에 캐멀케이스(camelCase)를 사용 함수 자체를 이벤트 핸들러에 전달해줘야 함 HTML에서 이벤트 처리 Hello World 리액트에서 이벤트 처리 Hello World 2-1. 퀴즈에 이벤트 연결하기 App 컴포넌트 내부에 handleClick 함수 만듦 handleClick 함수를 button에 연결 발생한 이벤트 값 가져오기 ( 정답 오답 기능 추가) value 값 추가 Hello World 이벤트 핸들링 함수에서 event 받기 : 리액트에서 이벤트 핸들러에 함수를 연결하면 함수의 첫 번째 인자로 event 객체를 ..
-
React - 이미지 태그 추가Front-end Dev./React 2022. 2. 4. 01:45
React에서 이미지 태그를 넣는 방법 React에서 이미지 태그를 추가할 경우, scr 속성에 HTML에서 사용하듯 파일 경로를 넣으면 작동하지 않는다. 그렇다면 리액트에서는 이미지를 어떻게 넣을 수 있을까? 어스 프로젝트를 리액트로 진행하면서 이에 관련해서 알게 된 부분, 고민을 해결한 부분을 정리해보려고 한다. 방법 1. 이미지를 import 한 후, 해당 변수를 img 태그 src에 넣어준다. 선언한 변수를 JSX에서 {}로 감싸서 사용한다. import cover from "이미지 경로/cover.jpg"; ... ; ... Navigation 컴포넌트 내에 아이콘 이미지를 import로 불러오면서 코드가 지저분해졌다. ( action 속성에 들어가는 아이콘 이미지도 있어서 더 길어짐) 이렇게 ..
-
🔧해결 - 깃허브 폴더 클릭 안되는 경우Front-end Dev./문제 해결 2022. 2. 3. 00:25
디렉토리를 추가한 후 깃허브를 확인해보니 접근이 불가한 상황.. ( 폴더 아이콘 안에 화살표가 생기고 클릭이 안된다. ) .git 폴더가 생겨서 발생하는 문제였다. 상위 폴더에 .git 파일이 이미 생성되었는데, 하위 폴더에도 .git 파일이 존재하기 때문에 이러한 오류가 발생했다. 해결 방법! 1. 폴더 내 .git 파일을 지운다. $ cd 폴더명 $ ls -al (.git 파일이 있는지 확인) $ rm -rf .git (.git 파일 제거) 2. 스테이지에 존재하는 파일 제거한다. : 이 명령어로 변경 사항을 정상적으로 뜨는 것 확인했다. $ git rm --cached . -rf 3. add, commit, push 한다. git add . git commit -m "remove .git files..
-
2일차 - 퍼블리싱 스터디 기록Front-end Dev./HTML_CSS 2022. 1. 2. 23:16
은정 멘토님이 진행하시는 퍼블리싱 스터디에 참여하게 되었다. 배우면서 헷갈리는 것과 피드백받은 내용 위주로 기록하려고 한다! 2일 차에는 네이버 홈페이지, 회원가입, 가입정보 입력 페이지 마크업 연습 코드 리뷰 위주로 스터디가 진행되었다. 배운 내용을 잘 정리해서 올리고 싶지만 우선 기록이라도 하는 것에 목표를 두고 있다! nav 태그 한 사이트에 편하게 이동할 수 있게 만들어줌 사이트 내 탐색하는 버튼으로 nav를 사용 외부 링크로 이동할 때 묶는 방법으로 사용 X ex) 쥬니어네이버, 해피빈은 같은 회사지만 다른 서비스, 외부 링크 main 태그 안에 nav 태그가 들어가지 않음 시각적으로만 바라봐선 안됨 label 태그 사용하지 않을 경우 접근성이 확 떨어짐 1) 시각적으로 텍스트 클릭이 안됨 2)..
-
TIL 06. 5주차 회고☺️Front-end Dev. 2021. 12. 4. 02:41
🦁 멋쟁이 사자처럼 프론트엔드 스쿨 1기 🦁 - 5주 차 회고 - :) 블로그에 너무 소홀했던 지난날을 반성하며 5주 차 회고를 해보려고 한다! 씻는 건 허락해주세요... ✨ 5주 차 회고 일기 4주 차에 HTML/CSS 수업 진도를 나간 후 SASS를 배웠고 5주 차 때 자바스크립트 수업을 시작했다. 수업이 나에겐 아직 너무 어렵지만 수업에서 놓친 부분을 반복적으로 알려주셔서 좋았다. 자바스크립트 뿌셔..! 앞으로 남은 2달동안 현실적으로 지킬 수 있는 계획을 세워서 꾸준히 개발 공부를 하는 것이 목표이다. 추가로 그날 배운 내용, 스터디 활동 내용을 블로그에 기록하는 것도 계획하고 있다. 📍액션플랜 1. 스터디에 집중하기 1) 게으른 스터디 (화, 목, 토) ☺️ - 시디즈 클론 코딩 : HTML /..
-
TIL 05. CSS 단위 (em, rem, px) 정리Front-end Dev./HTML_CSS 2021. 11. 15. 23:32
평소 헷갈리던 단위 개념인 rem, em, px 단위를 정리해보려 한다. CSS 공부를 하면서 어떤 상황이든 px을 사용하곤 했는데, 디자인 의도에 따라 단위의 사용 목적이 바뀐다는 것을 알게 되었다. 오늘은 상대적 단위인 rem, em에 대해서 더 알아보고자 한다. 1. rem (root em) : 루트 요소(html)의 폰트 크기를 기준으로 사용하는 단위. font-size를 조절하는데 유용하게 사용된다. 사용자가 브라우저 폰트 크기를 설정한 경우 rem도 영향을 받는다. 루트 요소의 폰트 크기를 62.5%로 지정한 후 rem을 사용하는 방법은 1 rem = 10px이 되어 계산하기 편하다. 계산을 편하게 하기 위해서 Html에서 font-size를 10px으로 설정한 후, 모든 요소에 1 rem =..