jineecode

1. 사건의 발단 전엔 못 본 거 같은데 다크모드 버튼을 토글할 때, 폰트가 깜빡이는 현상을 목격. 가장 먼저 든 생각은 이게 말로만 듣던 FOUC ('style이 적용되지 않은 내용'이 '깜빡'이는 현상) 인가? 라는 생각에 도달함 그러나 엄밀히 말해, 폰트만 이런 모습을 보이고 있는 것 같아서 FOUT(텍스트가 깜빡여보이는 현상. 즉, 브라우저가 웹 글꼴을 다운로드하기 전에 텍스트가 대체 글꼴로 렌더링되는 현상)으로 추측했음 말로만 듣던 FOUT를 목격하는 건 처음이라 당황스러우면서도 신나게 버그를 해결하기로 결심 2. 그럼 해결 방법을 찾아보자! https://web.dev/avoid-invisible-text/ 글꼴 로드 중 보이지 않는 텍스트 방지 글꼴은 로드하는 데 시간이 걸리는 대용량 파일인..

react-native 기준입니다. 기본적인 extends 잘 만들어진 styled-component를 괄호를 사용하여 extends 해준다. // The Button from the last section without the interpolations const Button = styled.button` color: palevioletred; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `; // A new component based on Button, but with some override styles const TomatoButton = styled(But..

SASS(Syntactically Awesome Style Sheets)는 CSS pre-processor (전처리기) 로서, CSS를 프로그래밍 언어스럽게 작성할 수 있다. SASS는 변수, 함수, 반복문, 연산자 등을 사용할 수 있으며 SASS 문법으로 복잡한 작업을 쉽게 할 수 있게 해주고 코드의 재활용성을 높여줄 뿐만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해준다. Sass 에서는 두가지의 확장자 (.scss/.sass) 를 지원하며 보통 scss 문법이 더 많이 사용된다. 인스톨 방법 npm install node-sass 문법 1. 변수 사용 scss파일에선 변수를 사용할 수 있다. $main : #ff0000; .red { color : $main; } css에서 비슷한 기능인 :..

footer를 항상 바닥에 놓는 법을 몇 달 전 포스팅 한 적이 있는데 react로 들어가니 또 말썽이 생겨서 (#root, .App .wrap 까지 점점 깊게 들어가니까 계속 height를 적용해줘야 하는 경우 발생하고 컴포넌트가 많으면 스타일을 다루기 힘들어진다.) 다른 방법을 강구해보았다. jineecode.tistory.com/103?category=818703 footer 을 항상 바닥에 놓기 content의 높이가 작으면 footer 가 아래에 있지 않고 애매하게 중간에 있는 경우가 있다. 관리자도구를 확인해보면 html 자체의 높이가 작아서 나타나는 문제이다. 컨텐츠만큼 html의 height가 auto로 늘 jineecode.tistory.com 이전 글 index.html .wrap은 개..

display_box display_box display_box display_box visibility_box visibility_box visibility_box visibility_box .display_box { width: 100px; height: 100px; background: tomato; border: 1px solid black; } .visibility_box { width: 100px; height: 100px; background: skyblue; border: 1px solid black; } .display_box.none { display: none; } .visibility_box.hidden { visibility: hidden; } display를 사용하는 경우, di..

순조롭게 font-face로 편하게 폰트 작업을 하던 와중 내 눈에 밟히는 이상한 현상이 발견되었으니... 뭐지 이 따로 노는 폰트의 콜라보는...? 급히 렌더링 된 폰트를 확인해보았다. input 태그: 맑은 고딕 textarea 태그: gulimche button 태그: 맑은 고딕 WHAT....? 멘붕이 온 나머지 구글에 검색을 해보았더니 다음 요소는 body에 걸린 font-family에 상속받지 않는다고 한다. stackoverflow.com/questions/2874813/why-textarea-and-textfield-not-taking-font-family-and-font-size-from-body

nav 로직 menu를 클릭했을 때 클릭 이벤트가 발생하여 해당 nav에 show 클래스가 들어가게 되고, show 클래스에 미리 따로 스타일을 주어 nav를 화면에 비추어준다. 이번에 적용한 nav는 위에서 아래로 내려오는 구조이다. header__nav를 평소에는 top: -150%를 주었다가 show가 들어가면 top: 0%를 주는 스타일. position은 fixed로 주었는데 이때 창의 높이가 낮아졌을 때 nav가 화면에 먹히게 되는 문제가 생겼다. 내비게이션이 잘림 HTML 오픈콘서트 공연목록 공지사항 Q&A 굿즈스토어 /* NAV */ .header__nav { width: 100%; height: 100%; position: fixed; top: -150%; left: 0; backgrou..

나는 보통 css로 폰트 스타일을 줄 때 @import url ( ~ ) 을 하여 body {font-family: ~ 를 적용하지만 한글과 영어에 다른 폰트를 적용하고 싶을 때 몹시 일이 번거로워진다. 퍼블리싱을 하면서 해당 컨텐츠가 영어인지 한글인지 확인하기도 귀찮고 계속 font-family: ~~ 를 적는 것도 귀찮고 심지어 font-family는 자동완성을 안 해준다. 근본적인 해결은 안 되는 기분에 더 쉽게 해결할 수 있는 방법을 찾아보았다. @font-face 지시어를 사용하면 된다. font-face에 대한 깊은 이해와 설명은 설명이 아주 잘 되어있는 블로그로 대체한다. webclub.tistory.com/261 Web Font - @font-face 적용 방법 Font(서체)의 사용 좀 ..