CSS3 [CSS] 레이아웃 구현에 영향을 미치는 여백 상쇄 오늘 '기초부터 완성까지, 프런트엔드' 책을 읽다가 내가 모르던 CSS 개념을 발견했다! 그것은 바로 '여백 상쇄'다. 때때로 레이아웃이 내가 생각한대로 구현이 안되는 경우가 있다. 그럴 땐 여백 상쇄 때문은 아닌지 고려해봐야겠다. 여백 상쇄란? 인접한 같은 레벨의 블록 요소에 상하 여백이 겹치면 여백이 하나로 합쳐지는 현상이다. 같은 레벨이라는 것은 두 요소가 형제 관계에 있다는 것을 의미한다. 예시로 이해를 해보자. 위아래 margin을 30px을 준 p 태그가 있다. 이 태그 두 개를 위 아래로 붙이면 p 태그와 p 태그 사이에 60px의 여백이 생길 것 같지만 그렇지 않다. 신기하게도 여백은 60px이 아닌 30px이다. 하나의 여백이 훨씬 더 크다면? 그렇다면 한 태그의 margin은 50px이.. 2023. 4. 19. [React] Font 파일 적용하기 프로젝트를 할 때 구글 포트와 같은 웹 폰트는 적용해본 적은 있지만, 직접 폰트 파일을 사용해본 적은 없다. 구글 폰트는 종류가 제한적인 반면 폰트를 직접 다운 받으면 더 예쁜 폰트를 많이 사용할 수 있어서 이번에는 폰트 파일로 폰트를 설정해보았다. 폰트 다운 사이트 추천 무료폰트(목록) | 공유 마당 gongu.copyright.or.kr 여기에서 다양한 정부 기관의 무료 폰트를 다운 받을 수 있다! 상업적 이용만 아니면 사용이 자유롭다. 예쁘고 가독성 좋은 폰트가 많아서 강추한다. 나는 광양시 서체가 마음에 들어서 광양시 서체를 다운 받았다. 폰트 파일 변환하기 폰트를 다운 받았으면 제일 먼저 할 일은 파일을 변환하는 것이다. .otf 파일로 다운을 받았는데, react에 적용하기 위해서는 .woff.. 2023. 4. 8. [React] 회원가입창 Grid 맛보기 2023년 1월 4일 작성 통으로 만들었던 회원가입 화면을 컴포넌트 분리로 다시 만들고 있다. 작업하는 김에 회원가입 창을 이전과 다른 방식으로 만들어보기로 했다. 마켓컬리 사이트에 가보면 회원가입 창에서 아이디, 비밀번호, 비밀번호 확인 등은 span 태그 안에 label 태그로 구성되어 있고, input 창은 div 속에 있고, 버튼 창, 혹은 버튼이 없는 공간에도 div가 만들어져있다. 그래서 나도 마켓컬리의 방식대로 처음엔 구조를 짰었다. [SignUp.js] 이메일* {emailError} 중복확인 버튼이 아닌 곳은 그러다 보니 쓸데없이 버튼이 없는 곳에도 'none' 클래스네임을 가진 div를 줘야했다. div 세 가지를 만들어놓으니 CSS로 레이아웃을 잡는 것은 편했지만 CSS도 120줄 정.. 2023. 3. 1. 이전 1 다음
