반응형 Programming/HTML5_CSS39 더 나은 사용자 경험을 위한 Web Font 로딩 최적화 소개 웹사이트에서 사용자 정의 웹 글꼴을 사용할 때 글꼴 로드 중에 깜박이거나 스타일이 지정되지 않은 텍스트가 깜박이는(FOUT) 등의 문제가 발생할 수 있습니다. 이러한 문제는 사용자 경험에 부정적인 영향을 미쳐 불만을 초래하고 외관이 세련되지 않게 보일 수 있습니다. 다행히도 웹 글꼴 로딩을 최적화하고 웹사이트 방문자에게 보다 원활한 경험을 제공하는 효과적인 방법이 있습니다. 방법 1: 태그를 사용하여 글꼴 미리 로드하기 웹 글꼴 로딩을 최적화하는 깔끔하고 간단한 방법 중 하나는 태그에 미리 로드 속성을 사용하는 것입니다. 이 기술을 사용하면 페이지 로딩 프로세스 초기에 글꼴 파일을 가져와 캐시하여 글꼴 로딩 지연을 줄일 수 있습니다. 방법 2: font-display(글꼴 표시 속성) 사용자 지정하.. 2023. 7. 21. [CSS] Tailwind CSS 장단점과 사용법 Tailwind CSS란? Tailwind CSS는 응답성이 뛰어나고 사용자 지정 가능한 사용자 인터페이스를 빠르게 구축할 수 있는 유틸리티 우선 CSS 프레임워크입니다. 사용자 정의 CSS 코드를 작성하지 않고도 HTML 요소의 스타일을 지정하는 데 사용할 수 있는 사전 정의된 유틸리티 클래스 세트를 제공합니다. Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com Tailwind CSS의 장점 웹 개발 프로젝트에 Tailwind CSS를 사용하면 몇 가지 이점이 있습니다. 신속한 개발 Tailwind CSS를.. 2023. 4. 7. [CSS] 가상 선택자 정리 및 비교 nth-child, nth-of-type CSS에서 n번째 자식 선택기는 부모 요소 내 위치를 기준으로 요소를 선택하는 데 사용됩니다. CSS에는 여러 가지 유형의 n번째 선택기를 사용할 수 있으며, 각 선택기에는 고유한 사용 사례가 있습니다. 다음은 nth-selector를 사용한 간단한 예제 코드입니다. HTML 첫 번째 자식 요소 두 번째 자식 요소 세 번째 자식 요소 네 번째 자식 요소 다섯 번째 자식 요소 여섯 번째 자식 요소 css /* 첫 번째 자식 요소 스타일 변경 */ .parent:nth-child(1) { background-color: #f5f5f5; } /* 홀수번째 자식 요소 스타일 변경 */ .parent:nth-child(odd) { font-weight: bold; } /* 짝수번째 자식 요소 스타일 변경 */ ... 2023. 3. 16. [HTML] 웹표준 table 구조 웹표준을 지키는 테이블 구조는 다음과 같이 작성할 수 있습니다. 테이블 캡션 컬럼 1 컬럼 2 컬럼 3 행 1, 열 1 행 1, 열 2 행 1, 열 3 행 2, 열 1 행 2, 열 2 행 2, 열 3 테이블 요약 정보 위 코드에서는 table 요소를 사용하여 테이블을 생성하고, caption 요소를 사용하여 테이블에 캡션을 추가합니다. thead 요소와 tbody 요소, 그리고 tfoot 요소를 사용하여 각각의 영역을 지정합니다. th 요소를 사용하여 각 컬럼의 제목을 추가하고, td 요소를 사용하여 각 셀의 내용을 추가합니다. headers 속성을 사용하여 해당 셀이 어떤 제목 셀에 속하는지를 지정합니다. colspan 속성을 사용하여 여러 셀을 병합할 수 있습니다. table 태그를 사용하지 않고 테.. 2023. 3. 2. [SASS] SASS 컴파일하는 방법 Sass는 CSS 전처리기로, Sass로 작성된 코드를 브라우저에서 바로 사용할 수 없습니다. 따라서 Sass 코드를 CSS로 컴파일하여 사용해야 합니다. 아래는 Sass 컴파일 방법에 대한 내용입니다. Sass 컴파일 방법 1. Sass 설치하기 Sass를 사용하기 위해서는 먼저 Sass를 설치해야 합니다. Sass를 설치하는 방법은 여러 가지가 있지만, npm을 이용한 방법을 설명하겠습니다. npm install -g sass 위 명령어를 실행하면 Sass가 전역으로 설치됩니다. 2. Sass 파일 작성하기 Sass 파일은 확장자가 .sass 또는 .scss로 끝나는 파일입니다. Sass 파일을 작성할 때는 CSS와 비슷하지만, 변수, 함수, mixin 등의 기능을 활용할 수 있습니다. 아래는 간단.. 2023. 2. 28. [SASS] SASS를 쓰는 이유 Sass는 CSS를 간편하게 작성하고 관리하기 위한 CSS 전처리기입니다. 다음은 Sass를 사용하는 이유에 대한 몇 가지 이유입니다. 변수 사용 Sass는 변수를 사용할 수 있습니다. 이것은 CSS 코드에서 동일한 값이 여러 번 반복되는 경우 유용합니다. Sass 변수를 사용하면 이러한 값을 한 곳에서 정의하고 변경할 수 있습니다. 예시: $primary-color: #007bff; .btn-primary { background-color: $primary-color; } 중첩 구조 Sass는 중첩 구조를 지원합니다. 이것은 HTML과 비슷한 구조로 CSS를 작성할 수 있다는 것을 의미합니다. 이것은 가독성을 높이고, 유지 보수를 쉽게 만듭니다. 예시: nav { ul { margin: 0; paddi.. 2023. 2. 23. 이전 1 2 다음 728x90 반응형
