본문 바로가기

CSS

 (47)
System Font 설정 방법 글꼴에 특별히 연연할 필요가 없는 경우라면 system font를 쓰는 게 좋은 방법이다. 각 OS 마다 기본으로 설정된 font를 씀으로써 font를 다운 받지 않아 성능 개선에 도움이 되고 사용자에게 친숙하며 새로 나온 OS일수록 모던한 font를 기본으로 사용할 수 있게 된다. 적용하려면 VSCode에서 font-family에 -를 입력하고 나타나는 드롭 다운 메뉴 중 apple system을 고른다. 결과 값은 아래와 같다. body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } apple s..
Font를 다운 받기 전 글자를 나타내는 방식 설정법 - font-display 브라우저가 글자를 그리려면 CSS에서 설정한 font를 다운받아야 한다. 그러나 브라우저는 font를 다운 받기 이전에 DOM과 CSSOM을 이용해서 페이지를 그리기 시작하고 font를 다운 받지 못한 짧은 시간 동안 기본으로 설정한 시스템 폰트가 적용된다. 그리고서 font 다운이 완료되면 스타일이 적용된 font를 다시 그리게 된다. 이는 경우에 따라서 사용자에게 불편함을 줄 수 있다. 잠시 동안 달라진 font로 하여금 읽던 글자의 위치가 달라지는 등의 변화가 발생할 수 있기 때문이다. 영어권에서는 이러한 현상을 Flash of Unstyled Text라 하는가 보다. 이를 방지하기 위해서 CSS의 font-display 설정을 바꿀 수 있다. @font-face { font-family: "ope..
웹 페이지를 위해 압축된 폰트, WOFF 적용 방법 WOFF는 압축된 폰트로 용량이 작아야 하는 웹에 적합한 폰트다. WOFF를 쓰려면 먼저 일반 폰트에서 WOFF 폰트로 변환해야 한다. 1. WOFF로 바꾸기 다음 사이트에서 폰트를 WOFF와 WOFF2로 바꿀 수 있다. transfonter.org 2. WOFF와 WOFF2 파일 이동 다운 받은 파일의 압축을 풀고 .woff와 .woff2 파일을 프로젝트의 fonts 폴더로 옮긴다. 3. font-face 설정 CSS의 제일 앞쪽에 아래의 코드를 입력해서 폰트를 불러오고 어떻게 참조할 것인지 설정한다. @font-face { font-family: "opensans"; src: url("fonts/opensans-regular-webfont.woff2") format("woff2"), url("font..
모든 브라우저에 공통적으로 적용되는 CSS 초기 설정법 크롬에서 p 엘리먼트의 전역 설정을 보면 margin-top과 margin-bottom의 값이 10px로 돼 있다. 그밖에 다른 엘리먼트에도 기본값이 적용돼 있고 이는 브라우저마다 조금씩 다르다. 때문에 의도치 않게 타 브라우저에서 특정 엘리먼트가 다른 모양으로 나타날 수 있고 이를 방지하기 위해서는 가변적인 엘리먼트에 임의로 전역 설정을 해야 한다. 다음 사이트에서 이를 위한 css 파일을 제공해준다. necolas.github.io/normalize.css/ 다운받아 html 파일에 추가해서 사용한다.
BEM에 대해서 BEM이란 CSS의 이름을 짓는 방법론이다. Block, Element, Modifier의 줄임말로 각각을 __나 --로 구분해서 표현한다. 1. Block Block은 다른 것에 영향을 받지 않는 독립적인 컴포넌트다. 예를 들어 일반적인 header와 footer는 완전히 나눠져 있고 서로 영향을 받지 않도록 구성할 수 있어 Block이다. BEM은 Block을 기준으로 CSS의 이름을 짓기 때문에 재사용이 용이하고 class 속성만 보더라도 어떤 것인지 쉽게 파악할 수 있게 해준다. 물론 Block 안에 독립적인 Block이 올 수도 있다. 그리하여 class 이름의 제일 앞에 Block 이름을 넣고 다음에 올 Element와 구분하기 위해 언더바 두 개를 넣어준다. 띄어 쓰기는 -로 표현한다. bl..
반응형 웹 참고 자료 https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=ko
쓸만한 SASS 기본 기능들 1. 주석 css에서는 // 이 주석을 사용할 수 없지만 sass에서는 가능하다. 2. Nesting 아래처럼 중첩해서 사용할 수 있어 보기도 좋고 코드량도 줄어든다. div { font-size: 20px; div { font-size: 10px; } } 3. 변수 손쉽게 변수를 사용할 수 있다. $login-color: rgb(215, 215, 215); div { background-color: $login-color; } 4. 상위 선택자 .block { &__element { } } 위와 아래는 동일하다. .block { } .block__element { } 5. Import 다른 scss 파일을 가져온다. @import "variables"; // variables.scss 파일의 내용을 가..
리액트에서 SASS 쓰는 방법 1. 다음을 입력해서 리액트 프로젝트를 만든다. npx create-react-app 폴더이름 2. sass를 설치해야 한다. npm install node-sass 3. 이제 다음과 같은 방법으로 scss 파일을 불러올 수 있다. import './App.scss';

티스토리툴바