본문 바로가기

분류 전체보기148

[CSS] font-display 이란? font-display 속성이란? 웹 폰트를 로드 할 때 사용 하는 CSS 속성이다. 사이트를 들어 갈 때, 웹 폰트 렌더링 속도가 느려 글자가 안보였다 나타나거나, 기본 폰트에서 바뀌는 경우를 본 적 있을 것이다. 그러한 경우에 웹 폰트의 로딩 동작을 제어하여 사용자 경험을 개선 할 수 있게 해준다. 폰트 로딩 동안 빈 텍스트나 다른 대체 폰트로 표기 할 수 있기 때문이다. 주로 사용 되는 경우 1. 로딩 지연을 최소화 할 때 웹 폰트 중 일부는 다운로드 시간이 많이 걸려 느리게 출력 되는 문제 2. FOIT (Flash of Invisible Text) 를 해결 해야 할 때 FOIT는 브라우저에서 웹 폰트가 다운로드 되지 않아 텍스트가 안 보이는 문제 FOUT (Flash of Unstyled Tex.. 2023. 7. 6.
React useState Hook의 반환 값이 객체가 아닌 배열인 이유 1. 구문 간결성 객체를 사용하는 경우 객체의 속성을 개별적으로 추출 해야한다. 배열을 사용하는 경우에는 구조 분해 할당을 통해 간단하게 요소에 접근 할 수 있어 코드가 간결하고 가독성 있게 만들어준다. const user = { name: 'John', age: 30, city: 'New York' }; // 객체 속성 구조 분해 할당 const { name, age, city } = user; console.log(name); // 'John' console.log(age); // 30 console.log(city); // 'New York' const numbers = [1, 2, 3, 4, 5]; // 배열 요소 구조 분해 할당 const [first, second, third] = number.. 2023. 7. 4.
일급객체(First Class Object) , 일급함수(First Class Function) 란? 일급 객체 (일급 함수) 란? 프로그래밍 언어에서 함수를 값으로 다룰 수 있는 특성을 가진 함수를 말한다. 이는 함수를 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 반환 값으로 사용 할 수 있는것을 의미한다. 일급함수를 가진 언어에서는 함수가 일반적인 데이터 타입처럼 취급 된다. 이는 함수를 생성하고 조작하고 전달하는 데, 좀 더 자유롭고 유연한 프로그래밍 스타일을 가능하게 한다. 1. 변수에 함수 할당 함수를 값으로 취급하여 변수에 할당 할 수 있다. const add = function (a, b) { return a + b; }; 2. 함수를 인자로 전달 함수를 다른 함수의 인자로 전달할 수 있다. function calculate(operation, a, b) { return ope.. 2023. 7. 4.
[HTML5 웹 프로그래밍] HTML5 API 웹 스토리지 클라이언트에 데이터를 저장하기 위한 영역 쿠키 웹 스토리지 저장 용량 4KB 도메인당 5MB (사실상 용량의 제한이 없음) 네트워크 전송 부하 및 보안 웹 서버에 요청을 보낼 때마다 HTTP 헤더에 담아서 전송 → 많은 트래픽의 발생 및 보안의 취약성 존재 웹 서버로 요청을 하더라도 HTTP 메시지에는 포함되지 않음 → 네트워크 부하 감소 유효 기간 유효 기간이 존재 → 기간 만료 시 자동 삭제 로컬 스토리지는 유효 기간이 없음→ 사용자에 의한 명시적인 삭제에 의해서만 삭제 가능 세션 문제 브라우저의 모든 윈도우가 고유하며, 독립적인 데이터의 저장 X 각 윈도우마다 독립적으로 데이터 저장 O 저장되는 데이터의 구성 (key , value) 키를 통해서만 원하는 데이터의 값에 대한 접근이 가능.. 2023. 6. 13.
[HTML5 웹 프로그래밍] 캔버스(canvas) 캔버스란? 자바스크립트 코드를 이용해서 웹브라우저에 그림을 그리는 기능 별도 프로그램 설치 없이 사용 그림을 그리고 합성 , 변환 애니메이션 같은 효과 표현 가능 캔버스 영역 지정 캔버스 영역 웹 페이지 에서 그림이 그려지는 투명한 사각형 영역 캔버스 객체와 캔버스 컨텍스트 객체 생성 캔버스 생성 → 캔버스 객체 생성 → 캔버스 컨텍스트 객체 생성 → 실제 그림을 그림 캔버스 객체 생성 let 변수명 = document.getElementById("canvcas_id_속성값"); let canvas = document.getElementById('maCanvas') 캔버스 컨텍스트 객체 생성 let 변수명 = canvas변수.getContext('2d'); let ctx = canvas.getContex.. 2023. 6. 13.
[HTML5 웹 프로그래밍] 문서 & 브라우저 객체 모델 문서 객체 모델 ( DOM, document object model ) 문서 객체 HTML 문서의 각 요소를 자바스크립트에서 사용할 수 있도록 객체로 만든 것 DOM 브라우저가 HTML 문서에 접근 할 수 있도록 정의해 놓은 표준 모델 HTML 문서를 분석하고 표시하는 방식 문서가 적재되면 브라우저는 정적으로 DOM 생성 계층적인 구조를 갖는 트리로 표현 → DOM 트리 자바스크립트를 이용하면 프로그램 실행 중에 웹 문서의 내용, 구조 및 스타일에 대한 작업 가능 → 결과가 즉각 화면에 반영 브라우저 객체 모델(BOM , browser object model) 브라우저를 객체로 표현 window ┌ document : html 문서를 표현 (최상위) ├ history : 사용자가 방문한 URL을 저장 관.. 2023. 6. 13.
[HTML5 웹프로그래밍] HTML5 웹 요소 텍스트 표현 요소 요소 의미 요소 의미 ~ h6 제목 태그 문단을 나누는 단락을 생성 줄바꿈 태그 수평선을 그려줌 , 콘텐츠 구분의 용도 편집기의 문자를 그대로 출력 인용문 생성 및 들여쓰기 공백 및 특수문자 &엔티티코드; &#10진수; &#x16진수; 특수이름 문자 엔티티코드 10진수 16진수 공백 nbsp 32 20 더하기 + plus 43 2B 빼기 - minus 45 2D 곱하기 * times 42 2A 나누기 / divide 47 2F 등호 = equals 61 3D 물리적 스타일 관련 요소 단순히 웹 브라우저에 표시되는 출력 모양만을 지정하는 요소 요소 의미 글씨체 굵게 bold 처리 글씨 이탤릭체 글씨 가운데 취소 선 글씨 언더라인 글씨 위로 정렬 아래로 정렬 글씨 작게 표시 논리적 스타일 .. 2023. 6. 13.
[데이터 정보처리 입문] 한글, 엑셀, R 한글 한자입력 : [F9] 복사나 이동을 위한 블록 설정 : 줄 [F3] , 열 [F4] 문자입력(특수문자) : [Ctrl + F10] 다단편집 가능 엑셀 히스토그램 : 데이터 - 분석 - 데이터분석 - 히스토그램 기술통계법 : 데이터 - 분석 - 데이터분석 - 기술통계법 함수 연산자 의미 종류 산술연산자 +, - , * , / , ^ 비교연산자 = , > , < , ≥ , ≤ , 문자연산자 & 참조연산자 범위 (A1:A10) , 합집합(A1:A10, B1:B10) , 교집합(A1:A10 A5:A10) 함수의 사용 등호(=) 로 시작하고 함수 이름으로 구성 참조 표 의미 사용법 상대참조 A1 절대참조 $A$1 혼합참조 $A1 함수종류 함수 사용법 설명 SUM =SUM(범위) 합계 COUNT =COUNT(.. 2023. 6. 1.
[데이터 정보처리 입문] 통계 정보의 검색 및 활용 중심 위치 측도 데이터 집합의 중심 경향을 나타내는 통계적 측정 값 평균(mean) 모든 자료 값의 합계를 자료개수로 나눈다. 특이 값의 영향을 많이 받는다 절사평균(trimmed mean) 10% 절사평균은 표본에서 가장 작은 값 10%와 가장 큰 값 10% 를 빼고 계산된 평균을 말함. 중앙 값(median, 중위수) 자료 값을 크기 순으로 배열한 후 중앙에 위치하는 값 자료의 수가 n 이면 n+1 분의 2 번째 값 예시) 1,2,3,4,5,6,7,8,9 → median : 5 최빈값(mode) 자료중 가장 빈도가 많은 값 예시 ) 유니폼의 표준 치수 이산형 자료일 경우 도수분포표만 봐도 알 수 있다. 연속형 자료일 경우 자료를 몇개의 계급 구간으로 나누어 가장 도수가 높은 계급의 중간값을 최빈값으로.. 2023. 6. 1.
728x90

티스토리툴바