HTML & CSS
1.웹 표준 : 시맨틱 HTML, 크로스 브라우징, SEO
W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’운영체제나 브라우저에 상관없이 어떤 환경에서도 이용할 수 있는 웹 페이지를 만들기 위한 제작기법웹 개발에 사용되는 언어인 HTML(구조), CSS(표현), J
2.오픈 그래프 : 공유를 위한 <meta> 요소
title보다 meta 요소가 우선description 없이 title만 나옴 body의 img 요소보다 meta 요소가 우선
3.브라우저
내가 친 코드는 브라우저라는 소프트웨어 프로그램 상에서 수행된다. 브라우저가 어떻게 동작하는지, 어떨게 렌더링을 수행하는지 아는 것은 중요하다!브라우저 = 웹 브라우저 = 웹 탐색기웹 서버에서 양방향으로 통신을 하며 HTML 문서 및 그림, 멀티미디어 등의 컨텐츠를 열
4.브라우저 렌더링
HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정.현존하는 브라우저는 기본적으로 렌더링을 수행하는 렌더링 엔진을 가지고 있다. (각자 전용 렌더링 엔진을 가지고 있다)1) 사용자가 브라우저를 통해 웹 사이트에 접속한다.2)
5.리플로우(Reflow)와 리페인트(Repaint)
만약 사용자가 브라우저 화면을 늘리거나 줄이는 등 크기를 조절하거나, 다른 사이트로 이동을 하는 등 화면에 요소가 추가 되거나 삭제, 혹은 아예 다른 요소들을 불러와야 하는 상황이라면..👉🏽 화면에 나타나는 모습을 바꾸기 위해서는 모든 요소의 위치와 크기를 다시 계
6.반응형 웹
여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미하나의 소스 코드로 모든 스크린에 최적화되어 구축된 웹 사이트.최초의 반응형 웹 : 20
7.미디어 쿼리
HTML 파일의 <head> 태그 안에 <link> 태그를 위치시켜 CSS 파일을 불러오기 media 속성을 사용해 조건을 지정👉🏽 해당 조건을 만족할 경우에만 해당 CSS 파일을 불러온다HTML 파일 내 <head>태그 안에서 <style>
8.CSS 애니메이션 (feat. @keyframes)
여러 개의 CSS 스타일을 부드럽게 전환시켜준다.keyframes 키워드를 활용하면 시간 순으로 정밀하게 짜여진 애니메이션을 만들 수 있다. CSS로 키프레임 블록을 만든다.% 단위로 시간 진행 상태를 표시한다. (소수점 단위 %도 가능 / 0%는 from, 100%는
9.Canvas 캔버스
HTML의 <canvas> 태그와 Javascript 사용다양한 그래픽 요소를 만들 수 있다. (단순한 도형부터 데이터 시각화, 애니메이션, 웹 게임 등)캔버스는 요소를 DOM으로 조작하는 방식으로 작동된다. 따라서 요소를 선택할 때 사용할 id를 작성해주는 것이
10.리액트에서 Chart.js 사용하기
리액트에서 Chart.js를 사용하려면 chart.js 뿐만 아니라 리액트에서 Chart.js를 렌더링하기 위해 필요한 react-chartjs-2도 설치를 해야 한다.React에서 Chart.js 사용하기 (with TypeScript)