전체 글127 CSS 반응형 단위 웹 접근성이 좋은 사이트는 고정 단위 px대신 반응형 단위 em, rem, vw, vh 등을 사용한다. px을 사용하게 되면 고정값으로 값이 할당 되기때문에 사이즈를 변경해도 반응일 없다. em 폰트 사이즈에 현제 지정된 포인트 사이즈를 나타낸다. 브라우저는 기본적으로 html 폰트 사이즈 16px를 지정한다. 따라서 html의 폰트 사이즈를 설정하지 않았다면 16px == 1em이다. 이처럼 em은 상대적이다. 부모 요소의 사이즈에 따라 변경되어야 할 때 사용한다. rem rem은 부모의 사이즈에 따라 사이즈가 계산되는 것이 아니라 루트에 지정된 폰트 사이즈에 따라서 크기가 결정된다. 주로 폰트 사이즈를 지정할때 em보다는 rem을 사용한다. vw,vh 뷰포트 너비값과 높이값은 넓이, 높이의 100분의.. 2023. 2. 13. 웹 표준 (Web Standards)과 시멘틱 태그 (Semantic Tags) 🌐 웹 표준 웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다. 웹 표준의 장점 수정 및 운영관리 용이 접근성 향상 File Size축소, 서버 저장 공간 절약 효율적인 마크업 호환성 가능 ✅ 웹 접근성 정보 통신 접근성(Web 접근성)은 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항이다. 🧱 시맨틱 웹이란? '의미론적인, 의미의'란 뜻을 가지고있다. 즉, 의미 있는 웹이라고 설명할 .. 2023. 2. 6. TS 쓰는 이유?? TS란? 타입스크립트란 자바스크립트에 타입을 부여한 언어이다. 자바스크립트와는 달리 브라우저 실행을 위해서는 파일을 한번 변환해 주어야 하는데 이런 변환 과정을 컴파일(Compile)이라고 부른다. TS 특징 - 정적타입 언어 C#과 Java와 같은 체계적이고 정제된 언어들에서 사용하는 강한 타입 시스템은 높은 가독성과 모드 품질 등을 제공할 수 있고 런타임이 아닌 컴파일 환경에서 에러가 발생해 치명적인 오류를 쉽게 잡아낼 수 있다. 반면 자바스크립트느 동적 언어로, 자바스크립트 변수는 문자열, 숫자, 불린 등 여러 타입의 값을 가질 수 있다. 이러한 동적 언어는 비교적 유연하게 개발할 수 있는 환경을 제공하는 한편 런타임 환경에서 쉽게 에러기 발생하기 때문에 규모가 큰 프로젝트에서 에러를 찾기 어렵고 .. 2022. 7. 25. useRef 함수 컴포넌트에서 useRef는 ref오브젝트를 반환한다. { current: value } 인자로 넣어준 초기값이 ref안에 있는 current에 저장된다. 컴포는트가 unmount되기전까지는 그 값을 유지한다. useRef의 활용 1. state와 비슷하게 값을 저장하는 저장공간의 역할 useState는 state의 값이 변화하면 다시 렌더링이 되어 컴포넌트의 내부 변수들을 초기화한다. 이때 원치않는 렌더링때문에 어려움을 겪을때가 있다. 이럴때 useRef를 사용하면 변수는 값이 바뀐다고 해서 컴포넌트가 다시 렌더링되지 않는다. 2. DOM요소에 접근 컴포넌트 특정 DOM을 선택해야 할 때, ref를 사용한다. 함수 커포넌트에서 이를 설정 할 때 useRef를 사용하여 DOM요소에 접근한다. 2022. 7. 15. ES5와 ES6의 차이 ES란? ECMAScript를 줄여서 부르는 말로 기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈인 크로스 브라우징 이슈를 해결하기 위해 Javascript를 표준화한 것이다. ES5와 ES6의 차이 1. 변수 ES5에는 변수선언을 var 밖에 존재하지 않았다. var는 재선언과 재할당이 자유롭다. ES6부터 let, const가 추가 되었다. let은 재선언은 불가하지만 재 할당은 가능하다. const는 재선언도 불가하고 재할당도 불가하다. 2. 화살표 함수 ES6부터 새롭게 등장한 화상표 함수로 함수 표현이 좀 더 간단해졌다. 함수선언식 화살표 함수 화살표함수의 파라미터가 1개일때 소괄호를 생략할 수 있으며 중괄호와 리턴을 생략 가능하다. 3. 템플릿 리터럴 ES6부터 새롭게 등장한 템플릿 리터.. 2022. 7. 12. useEffect 1. Side Effect 부작용, 부수 효과라는 뜻으로 어떠한 동작을 할때 input-output 이외의 다른 값을 조작한다면, 이 함수는 Side Effect(부수효과)가 있다고 표현한다. Side Effect는 React의 함수 컴포넌트에서도 일어날 수 있다. Input이 state, props이고, output이 UI라면, 함수 컴포넌트의 Side Effect는 state와 props를 받아서 UI를 그려내는 것 이외의 행위라고 할 수 있다. (ex. Data Fetching) 2.useEffect useEffect는 리액트 컴포넌트가 랜더링될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. 컴포넌트가 Mount(화면에 첫 렌더링), Update(다시 렌더링), Unmount(화면에서 사.. 2022. 7. 11. 이전 1 ··· 15 16 17 18 19 20 21 22 다음
