CSS/Font (5) 썸네일형 리스트형 그밖에 유용한 Font 속성들 text-align 좌우 정렬 text-align: left; text-align: center; text-align: justify; /* 글자 간격을 벌려서 좌우 끝을 맞춘다. */ text-indent 들여 쓰기 text-indent: 1rem; text-decoration text-decoration: underline; /* 밑줄 */ text-decoration: line-through; /* 가운데 줄 */ text-transform 대소문자 변환 text-decoration: uppercase; /* 대문자 변환 */ text-decoration: lowercase; /* 소문자 변환 */ text-decoration: capitalize; /* 단어 첫 글자만 대문자 */ 한 줄로 표시되.. Font Size에 관한 모든 것 font-size의 단위로 px을 쓰지 말아야 한다. 장치의 픽셀 환경에 따라 다른 크기로 표시될 수 있기 때문이다. 대신 rem을 쓴다. rem은 상대적인 값이다. root인 html에서 font-size로 설정한 px 값의 배수를 표현한 값이다. 예를 들어 아래와 같이 설정했다면 html { font-size: 16px; } 1rem은 16px이고 2rem은 두 배인 32px이 된다. 크롬에서 기본 font-size는 16px이고 크롬 환경 설정에서 기본 글자 크기를 변경할 수도 있으니 위처럼 html에 font-size를 직접 명시하지는 않는다. 이해를 위해 코드를 첨부했을 뿐이다. 대신 아래처럼 rem의 계산을 편하게 하기 위해 62.5%로 설정하기도 한다. html { font-size: 62... 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.. 이전 1 다음
