스페이스 루미

@font-face src에 여러개의 폰트포맷을 작성할 수 있다. 영문, 한글, 숫자 별로 폰트를 다르게 지정하고싶을때는 unicode-range를 추가해준다. 여러개를 추가할때는 , 로 추가한다. 폰트포맷은 웹 최적화 경량폰트인 woff2 or woff 를 사용한다. @font-face { font-family: "Apple SD Gothic Neo"; src: url("../fonts/AppleSDGothicNeoR.woff2") format("woff2"), url("../fonts/AppleSDGothicNeoR.woff") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: "Apple SD Gothi..

인라인 클래스로 많이 사용하는 기본적인 클래스들을 정의해두자 나머지는 자주쓰는 클래스들은 mixin에서 생성해준다. .w-100 { width: 100%; } .w-fit { width: fit-content; } /* display 속성과 flex */ .d-none { display: none; } .d-block { display: block; } .d-flex { display: flex; } .flex-row { display: flex; flex-direction: row; } .flex-start { display: flex; align-items: flex-start; } .flex-center { display: flex; align-items: center; } .flex-end { d..

css를 초기화 해주자. 초기화 코드는 정답이 없고, 가장 많이쓰고 유명한 에릭마이어의 reset code를 사용해도 된다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerwe..

프로젝트를 시작하기전에 세팅해두면 좋은 스타일 관련 요소들 아카이빙 * React + SCSS 사용환경이며 변동시 꾸준히 추가 업데이트하기 * 폴더구조 Base [CSS] reset css / CSS 초기화하기 css를 초기화 해주자. 초기화 코드는 정답이 없고, 가장 많이쓰고 유명한 에릭마이어의 reset code를 사용해도 된다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The.. space-rumi.tistory.com 자주 사용하는 인라인 클래스, base class 만들기 인라인 클래스로 많이 사용하는 기본적인 클래스들을 정의해두자 나머지는 자주쓰는 클래스들은 mixin에서 생성해준다...

문제 height: 100vh 사용시 모바일 IOS에서 (+인앱브라우저) 스크롤이 생기는 문제 원인 100vh에 하단 바의 높이까지 포함시켜서 더 크게 인식함 사용이유 body에 100% 를 상속받아 내려오는 케이스를 제외하고, 컨텐츠 영역에서 불가피하게 최상단 레이아웃에 flexbox를 사용해야할 때가 있다. 또는.. 별도의 각종 레이아웃 컴포넌트(헤더,푸터)를 제외한 영역을 100%로 잡아야 할 때 페이지별로 vh 속성을 쓰는게 깔끔할 때. 등등 많은 케이스에서 vh가 요구된다. CSS height: 100vh;// css property 지원 안하는 브라우저 대비용 height: calc(var(--vh, 1vh) * 100); JS useEffect(() => { // css property 사용..

문제 카카오 인앱브라우저 IOS환경에서 스타일 안먹는 문제가 발생했다. 버튼이 아예 노출되지 않는 현상, a태그가 파란색으로 보이는 현상 등 특이사항 보이지는 않으나 클릭시 정상작동 함 (스타일 문제로 추정) PC웹에서는 모든 브라우저에서 정상작동 IOS, 안드로이드 웹에서는 정상작동 인앱브라우저 > IOS에서만 정상출력되지않음 해결방법 Xcode 시뮬레이터 IOS 특정 단말을 띄워서 사파리 개발자도구로 원인분석 사파리 환경설정 > 고급 > 메뉴에 개발자모드 노출후 시뮬레이터와 연동 원인은 스타일을 직접 명시하지않으면 초기값을 상속받지 못함. (스타일 누락) 스타일을 빠트리지않고 직접 명시해준다 (color 기본값을 가져오지 못한 케이스) 잘해결되었다.

마크업 1 2 3 4 5 6 7 8 9 10 스타일 (SCSS) section { padding-bottom: 30px; background-color:#fafafa; } .dashboard-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, 200px); /* 200px짜리 영역을 갯수만큼 만듬 */ grid-auto-rows: 200px; /* 줄바꿈 될때마다 자동으로 200px 로우 생성 */ &__card { /* 카드의 크기는 각 grid 영역으로 잡음 */ width: 100%; height: 100%; background-color: #fff; box-shadow: 0px 2px 4px rgba(0, 0, 0, ..