CSS 2

버튼 아이콘 클릭 가능 영역 넓히기 | 리액트 React, 스타일 컴포넌트 Styled Component, CSS

사용 기술 및 라이브러리 리액트 React 스타일드 컴포넌트 Styled Component 버튼 컴포넌트를 모두 모아두는 buttons.js 파일 현재 상황 각 버튼마다 미리 buttons.js 에서 사이즈를 정의한다. background 설정에서 center/contain 으로 썼고, 아이콘의 너비와 높이를 이미 정한 상태이다. 아래는 buttons.js 파일의 코드 중 일부이다. const shareKakaoButton = css` background: url("${shareKakaoImage}") no-repeat center/contain; width: 34px; height: 34px; ` const shareCopyUrlButton= css` background: url("${shareCopy..

개발 | 코딩 2021.02.09

모바일 반응형 HTML CSS 웹 브라우저 테스트, 개발자 도구, 단축키

1. 크롬, 사파리 개발자 툴 사용하기 크롬 개발자 툴 창 여는 단축키 맥: ⌘ + ⌥ + J , 커맨드 + 옵션 + J 키를 누른다. 윈도우: Ctrl + Shift + J , 컨트롤 + 쉬프트 + J 키를 누른다. 혹은 브라우저에서 마우스 오른쪽 클릭: 검사 요소 혹은 inspect 메뉴를 클릭한다. 단축키를 누르면 오른쪽에 사진과 같은 창이 뜹니다. 각 탭을 선택해서 원하는 정보를 찾으면 됩니다. 크롬의 다양한 단축키는 이 링크에서 확인할 수 있습니다. 사파리 브라우저 개발자 툴 창 여는 단축키 1. 맥: ⌘ + ⌥ + I , 커맨드 + 옵션 + I 키를 누른다. (사파리는 애플 환경에서만 설치되는 브라우저이므로 윈도우 단축키는 없다.) 2. 상단 메뉴 중에 Develop / 개발 버튼을 클릭해서 ..

개발 | 코딩 2021.01.23