분류 전체보기
SASS 톺아보기
CSS 전처리기?다른 웹 퍼블리셔의 포트폴리오를 찾아 보다 보면 능력(어빌리티) 항목에 HTML, CSS, JS, jQuery와 함께 쓰여있는 Sass, Less, Stylus를 보신 적이 있나요? 우리는 잘 알지 못했지만, 실제로 실무에서도 많이 사용하고 있는 CSS 전처리기(Pre-Processor) 입니다. 그렇다면 전처리기는 무엇이고, 왜 사람들이 많이 사용할까요?CSS는 쉽다. 하지만...우리가 익혀 왔듯 CSS는 웹 언어 중에서 쉽고 간결한 편에 속합니다. 하지만 우리가 프로젝트(대표적으로 각자가 만들고 있는 개인 포트폴리오가 있겠죠)를 진행하면 할 수록, 작업량이 많아지면 많아질 수록, 그리고 작업이 고도화 될 수록 불편함 역시 같이 커지게 됩니다. 페이지의 컨텐츠와 요소의 양에 따라 선택자..
브라우저 렌더링(리플로우, 리페인트)
🌐브라우저 렌더링브라우저 렌더링 과정파싱(Parsing)DOM TreeCSSOM Tree렌더 트리(Render Tree)레이아웃페인트리플로우(Reflow) / 리페인트(Repaint)리플로우와 리페인트의 최적화불필요한 레이아웃 줄이기CSS에서 레이아웃, 페인트를 발생시키는 속성들영향을 주는 노드 줄이기브라우저 렌더링브라우저 렌더링(rendering)이란 HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 의미한다. 브라우저는 기본적으로 렌더링을 수행하는 렌더링 엔진을 가지고 있다.브라우저 렌더링 과정사용자가 브라우저를 통해 웹 사이트에 접속한다.브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 필요한 리소스를 다운받는다.렌더링 엔진은 전달받은 ..
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)브라우저 상에서 제..