w3.css 기본값 W3.CSS 페이지는 약간의 읽기 장애가 있는 사람이라도 쉽게 읽을 수 있다. 기본 글꼴 크기는 15px다. 기본 글꼴은 문자 간격이 좋은 Verdana다. 기본 줄 간격(1.5)도 매우 좋다. HTML 제목 <h1> – <h6> 기본적으로 W3.CSS는 HTML 제목의 스타일을 다음과 같이 지정한다. 예제 <h1>Heading 1 (36px)</h1> <h2>Heading 2 (30px)</h2> <h3>Heading 3 (24px)</h3> <h4>Heading 4 (20px)</h4> <h5>Heading 5 (18px)</h5> <h6>Heading 6 (16px)</h6> 글꼴 크기 클래스 제목은 다음과 같은 목적으로 사용해야 한다. W3.CSS를 사용하면 다음 w3-size 클래스로 글꼴 크기를 설정할 수 있다. 예제…

w3.css 카드 남자 건축가 및 엔지니어 머리글 일부 텍스트.. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. 바닥글 카드 클래스 W3.CSS는 종이 같은 카드를 표시하기 위해 다음 클래스를 제공한다. 수업 정의하다 w3 카드 w3-card-2와 동일 w3-카드-2 모든 HTML 콘텐츠를 위한 컨테이너(2px 테두리가 있는 그림자) w3-카드-4 모든 HTML 콘텐츠를 위한 컨테이너(4px 테두리가 있는…

w3.css 테두리 I have borders. I have only a left border. I have a green top and bottom border. I have blue borders. I have a thick left border. I have a thick blue top and bottom border. Red border that turns green on hover. W3.CSS 테두리 클래스 W3.CSS는 다음과 같은 테두리 클래스를 제공한다. 클래스 정의 w3-경계 요소에 테두리(상단, 오른쪽, 하단, 왼쪽)를 추가한다. w3-경계-상단 요소에 위쪽 테두리를 추가한다. w3-경계-오른쪽 요소에 오른쪽 테두리를 추가한다. w3-경계-하단 요소에 아래쪽 테두리를 추가한다. w3-경계-왼쪽 요소에…

w3.css 패널 I am a panel. I am a panel. I am a container. I am a container. 패널 클래스 w3-panel 클래스는 HTML 요소에 16px 위쪽 및 아래쪽 여백과 16px 왼쪽 및 오른쪽 패딩을 추가한다. 예제 <div class=”w3-panel w3-red”> <p>I am a panel.</p> </div> 메모 패널 w3-panel 클래스는 메모를 표시하는 데 적합하다. 메모는 종종 옅은 색상으로 표시된다. 런던은 영국에서 가장 인구가 많은 도시로, 대도시 지역에는 900만 명이 넘는 주민이 살고 있다. 예제 <div class=”w3-panel w3-pale-green”> <p>London is the most populous…

w3.css 컨테이너 이것은 내 헤더입니다 이것은 내 기사입니다 이 글은 밝은 회색이고 글자는 갈색입니다. 이 글은 밝은 회색이고 글자는 갈색입니다. 이 글은 밝은 회색이고 글자는 갈색입니다. 이 글은 밝은 회색이고 글자는 갈색입니다. 이 글은 밝은 회색이고 글자는 갈색입니다. 내 바닥글입니다. 컨테이너 클래스 w3 -container 클래스는 HTML 요소에 16px 왼쪽 및 오른쪽 패딩을 추가한다. w3 -container 클래스는 다음과 같은 모든 HTML 컨테이너 요소에 사용하기에 완벽한 클래스다. <div>, <article>, <section>, <header>, <footer>, <form> 등. 컨테이너 동일성 w3-container는 모든 HTML 컨테이너 요소에 대한…

w3.css 색상 Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Aqua Teal Green Light Green Lime Sand Khaki Yellow Amber Orange Deep Orange Blue Gray Brown Light Gray Gray Dark Gray Pale Red Pale Yellow Pale Green Pale-Blue   W3.CSS에 사용되는 기본 색 구성표는 머티리얼 디자인 색상(마케팅, 도로 표지판 및 스티커 메모에 사용되는 색상)에서 영감을 받았다. HTML 요소 색칠하기 w3-color 및 w3-text-color 클래스는 모든 HTML 요소에 색상을 지정하는 데 사용할 수 있다. 컨테이너 런던은 영국에서 가장 인구가 많은…

w3.css 소개 W3.CSS는 더 작고, 더 빠르고, 사용하기 쉽다. W3.CSS는 현대적이고 반응성이 뛰어난 모바일 우선 CSS 프레임워크다. W3.CSS는 모든 브라우저에 동등성을 제공한다: Chrome. Firefox. Edge. IE. Safari. Opera. W3.CSS는 모든 장치에 동등성을 제공한다: Desktop. Laptop. Tablet. Mobile. W3.CSS는 표준 CSS 전용이다(jQuery 또는 JavaScript 라이브러리 없음). 예제 <div class=”w3-container w3-teal”> <h1>My Header</h1> </div> <img src=”img_car.jpg” alt=”Car”> <div class=”w3-container”> <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p> </div> <div class=”w3-container w3-teal”> <p>My Footer</p> </div> W3.CSS는 무료다. W3.CSS는 무료로 사용할…

React Custom hooks 훅은 재사용 가능한 기능이다. 여러 구성 요소에서 사용해야 하는 구성 요소 로직이 있으면 해당 로직을 사용자 정의 훅으로 추출할 수 있다. 사용자 지정 훅은 “use”로 시작한다. 예: useFetch. 훅 구축 다음 코드에서는 홈 구성 요소에서 데이터를 가져와 표시한다. JSON Placeholder 서비스를 이용하여 가짜 데이터를 가져올 것이다. 이 서비스는 기존 데이터가 없을 때 애플리케이션을 테스트하기에 좋다. JSON 자리 표시자 서비스를 사용하여 가짜 “할 일” 항목을 가져오고 페이지에 제목을 표시한다. 예제 – index.js import { useState, useEffect } from…

React useMemo React ‘useMemo’ 훅은 메모된 값을 반환한다. ⭐ 메모를 다시 계산할 필요가 없도록 값을 캐싱하는 것으로 생각한다. ‘useMemo’ 훅은 종속성 중 하나가 업데이트될 때만 실행된다. 성능을 향상시킬 수 있다. ⭐ useMemo와 useCallback 훅은 유사하다. 주요 차이점은 useMemo는 메모된 값을 반환하고 useCallback은 메모된 기능을 반환한다는 것이다. 성능 ‘useMemo’ 후크를 사용하면 값비싼 리소스 집약적인 기능이 불필요하게 실행되지 않도록 할 수 있다. 이 예에서는 모든 렌더에서 실행되는 값비싼 함수가 있다. 카운트를 변경하거나 작업관리를 추가하면 실행이 지연된다. 예제 성능이 좋지 않은 기능이다. 이…

React useCallback React ‘Use Callback’ 훅은 메모된 콜백 기능을 반환한다. ⭐ 메모를 다시 계산할 필요가 없도록 값을 캐싱하는 것으로 생각한다. 이를 통해 리소스 집약적인 기능을 분리하여 모든 렌더에서 자동으로 실행되지 않도록 할 수 있다. useCallback 훅은 종속성 중 하나가 업데이트될 때만 실행된다. 성능을 향상시킬 수 있다. ⭐ useCallback과 useMemo 훅은 유사하다. 주요 차이점은 useMemo는 메모된 값을 반환하고 useCallback은 메모된 기능을 반환한다는 것이다. 문제 useCallback을 사용하는 한 가지 이유는 구성 요소가 변경되지 않는 한 구성 요소가 다시 렌더링되는 것을 방지하기 위함이다….