본문 바로가기

전체보기

 (286)
그밖에 유용한 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..
React의 Virtual DOM이란? Virtual DOM은 DOM의 라이트 버전이라고 할 수 있다. 처음 렌더링이 될 때에 DOM과 VDOM이 생성된다. 이후 업데이트가 될 때마다 VDOM을 다시 생성하고 이전의 VDOM과 비교하여 어떤 객체가 달라졌는지 파악한다. VDOM은 가볍기 때문에 업데이트를 할 때마다 다시 생성한다고 해도 부담스럽지 않다. VDOM의 차이를 통해 알아낸, 변경이 필요한 객체를 실제 DOM에서 업데이트 한다. 이점 1. 다루기 무거운 DOM을 이용해서 달라진 점을 파악하지 않고 가벼운 VDOM을 비교하므로 어디를 업데이트 해야하는지 파악하는 데에 필요한 리소스를 줄일 수 있다. 2. 부분 변경시 전체를 업데이트 했던 이전 프레임워크를 극복하고 변경된 부분만 업데이트한다. 참고 : www.codecademy.com/..
브라우저의 렌더링 순서와 속도 개선 방법 렌더링 순서 브라우저는 제일 먼저 HTML 문서를 다운 받는다. 다운 받은 문서의 text를 바탕으로 DOM을 생성한다. 의 를 만나면 CSSOM도 같이 생성한다. DOM과 CSSOM에는 문서의 요소가 되는 객체들이 트리 형태로 묶인다. DOM과 CSSOM을 조합하여 화면에 렌더링 하기 위한 정보를 담은 렌더링 트리를 만든다. 화면에 표시하기 위해 위치 등의 정확한 px을 계산하는 레이아웃 또는 리플로우 과정이 이어진다. 이어지는 페인트 과정에서 화면에 색을 입히게 된다. removeChild 등으로 페이지가 수정되면 DOM 생성 단계부터 이어진다. 기본적으로 CSS를 불러오기 전까지 렌더링이 차단 되기 때문에 지금 막 필요하지 않은 반응형에만 필요한 CSS 파일은 렌더링 이후에 다운 받도록 하면 속도 ..
모든 브라우저에 공통적으로 적용되는 CSS 초기 설정법 크롬에서 p 엘리먼트의 전역 설정을 보면 margin-top과 margin-bottom의 값이 10px로 돼 있다. 그밖에 다른 엘리먼트에도 기본값이 적용돼 있고 이는 브라우저마다 조금씩 다르다. 때문에 의도치 않게 타 브라우저에서 특정 엘리먼트가 다른 모양으로 나타날 수 있고 이를 방지하기 위해서는 가변적인 엘리먼트에 임의로 전역 설정을 해야 한다. 다음 사이트에서 이를 위한 css 파일을 제공해준다. necolas.github.io/normalize.css/ 다운받아 html 파일에 추가해서 사용한다.

티스토리툴바