가능세계

이번 포스팅에서는 텍스트가 부드럽게 순차적으로 등장하는 웨이브 애니메이션을 만들 것입니다. 시작해볼까요? HTML은 간단하게 Reveal Animation CSS 스타일링을 작성해요 우선 wave 요소에 overflow를 hidden으로 주어서 넘치는 부분이 잘리도록 만듭니다. .wave { word-spacing: 2px; overflow: hidden; } @keyframes 키워드를 사용해 reveal 애니메이션을 정의합니다. 텍스트가 아래에서 위로 시작되도록 0% 단계에서 translateY를 100%로 지정합니다. 그리고 100% 단계에서 값을 0으로 변경하여 원래 위치로 돌려놓습니다. @keyframes reveal { 0% { transform: translateY(100%); } 100% ..

이번 포스팅에서는 아래에서 위로 등장하는 텍스트 애니메이션을 구현해봅시다. 처음에는 HTML과 CSS만으로 애니메이션을 만들고, 이후에 자바스크립트를 사용해서 스크롤에 반응하도록 만들어볼 것입니다. 예제를 살펴볼까요? HTML은 간단합니다 Reveal Animation CSS 스타일링을 해봅시다 우선 content 요소에 overflow를 hidden으로 주어서 넘치는 부분이 잘리도록 만듭니다. .content { word-spacing: 2px; overflow: hidden; } @keyframes 키워드를 사용해 reveal 애니메이션을 정의합니다. 처음에는 translateY를 100%로 주어 letter 요소가 아래에서 시작되도록 만들 것입니다. 그리고 100%가 됐을 때 0으로 변경하여 원래 ..

이번 포스팅에서는 지정된 숫자까지 숫자가 증가하는 애니메이션을 구현해봅시다. 간단한 JavaScript로 만들 수 있습니다. 뒤에서는 스크롤에 따라 카운트 업 애니메이션이 재생되는 응용도 해볼 것입니다. HTML부터 시작해봅시다 사용자 정의 data-* 속성을 사용해 HTML 요소에 데이터를 저장해둡니다. 이렇게 하면 자바스크립트에서 해당 데이터에 접근할 수 있습니다. 자바스크립트를 추가해볼까요 먼저 counter의 값을 0으로 초기화합니다. targetNum 변수는 목표 숫자입니다. getAttribute() 메서드를 사용해 해당 요소에 저장된 data-target 속성의 값을 가져옵니다. 이때 +를 달아주어 정수로 파싱합니다. const counters = document.querySelectorAl..

Promise, async/await, axios란 무엇인가요? Promise는 자바스크립트에서 비동기 작업을 처리하는 객체입니다. 작업이 완료되었을 때 성공/실패와 같은 결과를 반환하여, 해당 결과에 따른 후속 작업을 쉽게 처리할 수 있습니다. async/await는 Promise를 보다 쉽게 처리하는 방법입니다. 비동기 코드를 동기적인 방식으로 작성할 수 있습니다. axios는 HTTP 요청을 만드는 데 사용되는 Promise 기반 라이브러리입니다. JSON 데이터를 변환하고, 오류 처리 코드를 단순하게 작성할 수 있습니다. 이번 포스팅에서는 Promise, async/await, axios를 사용한 간단한 예제를 살펴보겠습니다. 1. Fetch API와 함께 Promise 사용하기 function ..

스크롤에 따라 요소가 부드럽게 등장하는 애니메이션을 본적이 있으신가요? 이번 포스팅에서 자바스크립트로 스크롤 애니메이션을 구현해봅시다. 우선 HTML 마크업을 작성합시다 Hello, There! Aspernatur, blanditiis consequatur! Accusamus nulla omnis maxime ea praesentium, magni, vel, molestias ducimus quibusdam voluptatibus qui corporis debitis repudiandae rerum voluptatum quod. Odit illum asperiores consequuntur iusto consectetur, cum voluptas! Quas asperiores, atque pariatur..

1. 아코디언 메뉴란 무엇인가요? 아코디언 메뉴는 여러 항목 중 하나의 항목이 확장되어 내용이 표시되고, 다른 항목들은 축소되어 내용이 감추어지는 기능입니다. 아코디언 메뉴를 활용하면 다음과 유사하게 FAQ를 만들 수 있습니다. 지금부터 간단한 아코디언 메뉴를 만드는 방법을 알아봅시다. 2. 아코디언용 HTML 마크업 구조는 간단합니다. li 요소 내부에는 두 개의 div가 있고, 각각 질문과 답변을 나타냅니다. 그리고 button이 있어서 각 항목을 여닫을 수 있습니다. What is HTML? HTML is the standard markup language for creating Web pages. + - 3. 아코디언용 CSS 스타일링 답변이 처음에는 보이지 않다가, faq가 active 되면 보..

반응형 웹 사이트를 만드는 데 있어 CSS 단위는 중요한 요소입니다. CSS 단위는 여러 가지가 있지만, 자주 사용되는 절대적인 값인 "px"과 상대적인 값인 "em, rem, %, vh, vw"로 분류할 수 있습니다. 절대적인 단위를 사용하면 어떤 디스플레이 화면을 사용하느냐에 상관없이 고정된 값으로 표시됩니다. 반면 상대적인 단위를 미디어 쿼리와 함께 사용하면 반응형 레이아웃을 만들 수 있습니다. 여러 가지 단위를 함께 살펴봅시다. 1. px px은 모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위를 말합니다. px을 적용하면 화면 크기 또는 부모 요소가 변경되어도 콘텐츠는 고정된 값으로 유지됩니다. px 단위는 미세하게 조절 가능하고, 고정된다는 특정 때문에 주로 border 값에 사용되곤 합니..

HTML 페이지를 구성하는 HTML 요소는 태그(tag)로 이루어집니다. 또는 태그처럼 의미가 없는 태그가 있는 반면, 시맨틱 태그처럼 콘텐츠의 역할을 명확하게 나타내는 "의미 있는 태그"도 있습니다. 시맨틱 태그란 무엇이며 왜 사용하는지 알아봅시다. 1. 시맨틱 태그란? 시맨틱 태그란, 콘텐츠의 의미를 설명하는 태그라고 할 수 있습니다. 시맨틱 태그는 , , , , 처럼 해당 요소의 의미를 명시함으로써, 콘텐츠를 논리적으로 그룹화하고, 각 부분에 어떤 유형의 정보가 포함될 것인지 쉽게 파악할 수 있도록 도와줍니다. 2. 시맨틱 태그를 사용하는 이유는? 시맨틱 태그를 활용하면 코드를 읽기 쉽게 만들 뿐만 아니라, SEO에 유리하며 웹 접근성에도 이점을 가집니다. 2-1. 웹 접근성 시맨틱 태그를 사용하면..

웹의 창시자 팀 버너스 리(Tim Berners-Lee)는 다음과 같이 말했습니다. "웹의 힘은 그 보편성에 있다. 장애에 구애 없이 모든 사람이 접근할 수 있는 것은 중요한 측면이다." 이번 포스팅에서는 웹의 보편성을 지키기 위한 핵심 개념인 웹 표준, 웹 접근성, 웹 호환성에 대해 알아봅시다. 1. 웹 표준(Web Standards) 1-1. 웹 표준이란? 웹 표준이란 간단히 말해 "웹에서 표준적으로 사용되는 기술이나 규칙"을 말합니다. 국제 표준화 기구인 W3C(World Wide Consortium)가 권고한 표준안에 따라 HTML, CSS, JavaScript 등에 대한 규정을 담고 있습니다. 1-2. 웹 표준을 준수하는 이유 웹 표준의 궁극적인 목적은 어떠한 운영체제나 브라우저를 사용하더라도 ..

브라우저의 주요 기능은 웹 페이지의 콘텐츠를 표시하는 것입니다. 이 작업은 브라우저의 렌더링 엔진을 통해 이루어집니다. 렌더링 엔진은 HTML, CSS, JavaScript, 이미지 등 웹 페이지에 포함된 모든 요소를 화면에 보여주는 역할을 합니다. 렌더링 과정을 자세히 살펴봅시다. 1. 렌더링 과정 설명 렌더링 과정은 Parsing -> Style -> Layout -> Paint -> Composite 순서로 진행됩니다. 1-1. Parsing 렌더링 엔진은 HTML 문서와 CSS 파일을 파싱하여 브라우저가 이해할 수 있는 계층적 구조인 DOM 트리와 CSSOM 트리를 생성합니다. 1-2. Style 렌더링 엔진은 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 만듭니다. 렌더 트리는 화면에 표..