SW

서론 이번 글에서는 HTML을 통해 생성된 요소 앞뒤에 새로운 요소를 추가하는 기능을 제공하는 가상 요소 :after, :before에 사용하는 방법을 간단하게 알아보고자 한다. 가상 요소는 컨텐츠의 앞뒤에 기호, 도형, 수식어 등을 사용하여 컨텐츠를 장식할 필요가 있을 때 많이 사용되고 있다. 가상 요소 :before :after 특징 두 개의 가상 요소가 가지고 있는 특징은 다음과 같다. inline 요소 이므로 너비(width), 높이(height) 값을 가질 수 없다. 크기 값을 바꾸려면 inline-block 옵션을 주어야 한다. content: '들어갈 컨텐츠 내용'; 형식으로 시작한다. margin 값의 left, right는 가질 수 있으나 top, bottom은 가질 수 없다. paddi..

서론 여러 웹페이지를 보면 우측 하단에 맨 위로가기 버튼이 표시되어 있는 페이지들이 많이 존재한다. 이번 글에서는 자바스크립트를 통해 맨 위로가기 기능을 구현하는 방법을 간단하게 알아보고자 한다. 구현 방법 먼저 HTML 코드는 다음과 같은 예시로 구성했다. 위로 다음으로 CSS는 다음과 같이 구성했다. HTML, CSS 코드는 단지 예제를 보여주기 위해 임의로 만든 레이이아웃이며 최상단으로 이동하는 기능만을 원하는 분들은 위에 코드를 참고할 필요 없이 아래의 자바스크립트 코드부터 사용하면 된다. 자바스크립트를 통해서 구현하는 방법은 다음과 같다. let rollUpBtn = document.querySelector('#rollUp'); const scroll = () => { if (window.scr..

서론 이번 글에서는 CSS 스타일 속성 중 하나인 box-sizing 속성의 개념과 사용 방법에 대해서 간단하게 살펴볼 예정이다. box-sizing 이란? box-sizing은 박스의 크기를 표현하는 방식을 변경할 수 있는 속성으로, 박스 레이아웃 설계 시 많이 사용되고 있다. 특히, 초기에 정해둔 너비(width)와 높이(height) 값을 넘어가지 않게 해주는 명령어인 box-sizing: border-box; 는 레이아웃을 구성할 때 굉장히 많이 쓰이고 있으므로 해당 명령어를 중심으로 예제를 살펴보고자 한다. .box { width: 400px; height: 600px; margin: 10px; padding: 20px; border: 10px solid red; } 위와 같은 스타일 속성을 가..

What is Drop-down? 버튼을 클릭이나 터치 등의 상호작용을 통해 활성화했을 때, 보통 그 버튼의 아래로 하위 메뉴들이 펼쳐지는 요소를 말한다. 풀다운 메뉴(pulldown menu)라고도 부른다. 드롭다운의 의미를 자세하게 알고자 예시를 하나 가져왔다. 해당 사이트는 알고리즘 문제 풀이를 하는 백준 이라는 사이트이다. 백준 사이트 상단의 문제 탭에 마우스를 갖다 대면 이와 같이 아래로 메뉴들이 나온다. 드롭다운은 이처럼 특정 탭에 대한 하위 요소로 들어가고 싶을 때 사용되는 애니메이션 종류이다. How to make a Drop-down? 먼저 HTML 코드를 살펴보면 영화 장르 SF 액션/스릴러 공포/호러 코미디 로맨스 애니메이션 드라마 이와 같이 간단하게 구성할 수 있다. 그리고 CSS ..

서론 웹페이지를 구성할 때 마우스가 올려져 있지 않은 요소들은 투명도를 연하게 주는 효과를 구현하는 예제를 살펴보고자 한다. 예를 들어 위와 같이 5개의 메뉴로 이루어진 홈페이지가 있다고 가정해보자. 우리는 New Arrivals라는 탭에 마우스를 올렸을 때 나머지 4개 메뉴에 대해서는 블러(Blur) 효과를 주어 사용자가 선택한 메뉴를 돋보이게 하고 싶은 경우가 있다. 이번 포스팅 글에서는 CSS의 옵션인 opacity를 이용해서 블러 애니메이션 효과를 구현해보고 추가적으로 마우스를 옮겼을 때 탭이 자연스럽게 이동하기 위한 transition 옵션을 살펴보고자 한다. HTML 코드 구성하기 New Arrivals Summer Collection Winter Collection Special Offers..

들어가기 해당 포스팅 글에서는 텍스트에 마우스를 호버링 했을 때 밑줄이 나타나는 애니메이션을 구현하고자 한다. 또한 호버(hover) 효과를 적용할 때 밑줄이 나타나는 모습은 다양하게 존재한다. 이번 글에서는 왼쪽에서 오른쪽, 오른쪽에서 왼쪽, 중앙에서 퍼져나가기 3가지 예제를 살펴볼 것이다. 이와 같은 텍스트가 존재할 때 HTML 코드는 다음과 같이 간단하게 구현할 수 있다. Navigation Hover Effect 필자는 나타나는 밑줄을 가상 요소 선택자를 이용해서 구현했다. 마우스가 호버링 되지 않았을 때에는 가상 요소 선택자를 보이지 않게 하고, 호버링 시 특정 시간동안 가상 요소 선택자가 서서히 나타나게끔 구현하는 것이 핵심이다. 이제 마우스 호버링 시 나타나는 이펙트를 구현해보자. 1. 중앙..