html/css
Virtual DOM
Virtual DOM탄생 배경Real DOM (DOM)Virtual DOM의 기본 개념Virtual DOM이 Real DOM보다 빠른 이유Virtual DOM의 형태React Diffing AlgorithmReact가 DOM 트리를 탐색하는 방법다른 타입의 DOM 엘리먼트인 경우같은 타입의 DOM 엘리먼트인 경우자식 엘리먼트의 재귀적 처리키(key)Virtual DOMReact에는 Virtual DOM이라는 가상의 DOM 객체가 있다. 이는 실제 DOM의 사본 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근해 변화 전과 변화 후를 비교하고 바뀐 부분을 적용한다.탄생 배경Real DOM (DOM)Real DOM은 우리가 알고 있는 DOM과 같은 것으로, Vi..
SASS 톺아보기
CSS 전처리기?다른 웹 퍼블리셔의 포트폴리오를 찾아 보다 보면 능력(어빌리티) 항목에 HTML, CSS, JS, jQuery와 함께 쓰여있는 Sass, Less, Stylus를 보신 적이 있나요? 우리는 잘 알지 못했지만, 실제로 실무에서도 많이 사용하고 있는 CSS 전처리기(Pre-Processor) 입니다. 그렇다면 전처리기는 무엇이고, 왜 사람들이 많이 사용할까요?CSS는 쉽다. 하지만...우리가 익혀 왔듯 CSS는 웹 언어 중에서 쉽고 간결한 편에 속합니다. 하지만 우리가 프로젝트(대표적으로 각자가 만들고 있는 개인 포트폴리오가 있겠죠)를 진행하면 할 수록, 작업량이 많아지면 많아질 수록, 그리고 작업이 고도화 될 수록 불편함 역시 같이 커지게 됩니다. 페이지의 컨텐츠와 요소의 양에 따라 선택자..
CSS Animation (@keyframe, canvas)
@keyframesanimation필수 옵션추가 옵션예제를 통해 사용법 알아보기캔버스로 사각형 그리기캔버스로 클릭이벤트 만들기@keyframesCSS 애니메이션은 기본적으로 transition 속성을 이용해 간단히 구현할 수도 있지만, @keyframe을 이용해 시간 순서대로 정밀하게 짜여진 애니메이션도 구현할 수 있다. 키프레임 활용을 하기 위해선 우선 @keyframe 블록을 이용해 시간에 따른 CSS 속성을 작성해주어야 한다./* '%' 단위로 시간 진행에 따른 상태를 작성 */ @keyframes 애니메이션이름 { /* from 으로 작성도 가능*/ 0% { CSS속성 : 속성값; } /* 애니메이션 진행도에 따른 스타일 설정 */ /* 필요하다면 1부터 99, 소수점까지도 모두 작성 가능 */ ..
반응형 웹
반응형 웹탄생 배경모바일 퍼스트(mobile first)반응형 웹의 장단점장점단점미디어 쿼리미디어 쿼리 적용법태그 속성을 이용한 적용법CSS 파일 또는 태그에서 직접 작성미디어 쿼리 구문복잡한 미디어 쿼리논리곱(and) 미디어 쿼리논리합(or) 미디어 쿼리부정(not) 미디어 쿼리반응형 웹반응형 웹이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트를 의미한다. 즉, 브라우저(스크린)의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미하며, 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론이기도 하다.반응형 웹은 위의 예시처럼 하나의 URL을 기반으로 화면이 바뀐다. 만약 특정 장치에 최적화된 페이지로 연결되는 별도의 URL이 있다면 ..
브라우저
🌐브라우저웹(Web)브라우저의 특징과 웹의 동작 원리브라우저의 구조사용자 인터페이스(User Interface)브라우저 엔진(Browser Engine)렌더링 엔진(Rendering Engine)통신(Networking)자바스크립트 해석기(JavaScript Interpreter)자바스크립트 엔진 구조 (V8 엔진을 토대로)UI 백엔드자료 저장소웹 스토리지(Web Storage) 특징브라우저웹 브라우저, 웹 탐색기로도 불리는 브라우저는 웹 서버에서 양방향으로 통신을 하며 HTMl 문서 및 그림, 멀티미디어 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반 소프트웨어 프로그램이다. 브라우저는 페이지를 다운로드 하기 휘해 응용 계층의 대표적 프로토콜인 HTTP를 통해 송수신한다.웹(Web)브라우저 상에서 제..