목차 1. Parallax Scrolling 2. 사용방법 1. Parallax Scrolling 패럴랙스 스크롤링은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법이다. 아래의 gif 파일 같이 배경은 고정된채로 텍스트 부분이 올라가는 입체적인 웹페이지의 디자인을 의미한다. 간단한 css 효과로 입체적인 효과를 주어 강한 인상을 주고 싶은 컨텐츠에 사용할 수 있다. 2. 사용방법 사용방법은 의외로 간단하다. 위와 같이 이미지와 컨텐츠 부분을 번갈아가면서 배치해주면 쉽게 스크롤을 구현할 수 있다. 준비물은 화면을 구성할 이미지들이면 된다. 컨텐츠 컨텐츠 컨텐츠 * { mar..

# transform transform은 엘리먼트의 모양을 마음대로 변형할 수 있다. transform으로 가능한 변형은 다음과 같다. 위치를 옮긴다. 회전을 시킨다. 크기를 조절한다. 박스를 비튼다. transform은 이전의 transition과 animation이랑은 다르게 속성값으로 효과를 준다. 만약 두 가지 이상의 효과를 함께 주고 싶다면 한줄에 적도록 해야한다. transition과 animation과 함께 사용하면 굉장히 많은 애니메이션 효과를 줄 수 있다. # transform 정의(Define) 어떤 모양을 가진 엘리먼트에 변형을 줄 수 있다. transform으로 줄 수 있는 속성은 크게 3가지(translate, scale, rotate)로 나눌 수 있다. translate는 해당 ..

# transition # transition-duration 정의(Define) transition이 지속되는 시간을 지정한다. 문법(Syntax) transition-duration: [number] [단위]; 예시(Sample) See the Pen CSS transition-duration by Char1ey (@char1ey95) on CodePen. # transition-delay 정의(Define) transition이 시작되는 시간을 연기해준다. 문법(Syntax) transition-duration: [number] [단위]; 예시(Sample) See the Pen CSS transition-delay by Char1ey (@char1ey95) on CodePen. # transiti..

# animation CSS에서는 animation을 이용해 역동적인 화면을 그릴 수 있다. animation 자체로 쓰기보다는 animation의 속성과 함께 써야 효과가 있다. 가장 많이 사용되는 animation 속성 위주로 알아보자. # animation-name 정의(Define) animation의 이름을 임의로 지정한다. 문법(Syntax) animation-name: [임의의 이름]; @keyframes [임의의 이름] { from{ [적용할 CSS] } to{ [적용할 CSS] } } 예시(Sample) See the Pen CSS animation-name by Char1ey (@char1ey95) on CodePen. animation-name만 줘서는 별다른 효과가 나타나지 않고, ..

목차 1. 로그인 Form(layer pop_up) 1.1. 기본 HTMl 구성 및 CSS 적용 1.1.1. HTML 구성 1.1.2. CSS 적용 1.2. box-shadow 속성 1.3. 로그인 폼 기능 구현하기 1.3.1. 과 , 의 속성 및 상호관계 1.4. 로그인 폼 마무리 2. 메뉴폼 2.1. HTML 구성 2.2. CSS 적용 2.2.1. after와 before 3. media query 문법 (반응형 웹) 1. 로그인 Form (layer pop_up) 1.1 기본 HTML 구성 및 CSS 적용 1.1.1 HTML 구성 기본 뼈대를 구성해주자 주로 꾸며줄 부분은 위의 login 부분이다. 로그인 logo menu1 menu2 menu3 menu4 1.1.2 CSS 적용 #layer { p..

목차 1. 탭메뉴 1.1. 탭메뉴 구현을 위한 태그와 선택자 1.2. 탭메뉴 구현 1.2.1. 탭메뉴 HTML 구성 1.2.2. 탭메뉴CSS 적용 2. flex박스 2.1 display:flex 2.1.1. flex-direction 2.1.2. justify-content 2.1.3. align-items 2.1.4. flex-wrap 3. 게시판 3.1. 사용방법 3.2 게시판 HTML 구성 3.3 게시판 CSS 적용 1. 탭메뉴 버튼을 누를때마다 화면이 바뀌는 웹페이지를 많이 봤을 것이다. 이러한 메뉴 구성을 탭메뉴라 하는데 간단한 원리로 구현이 가능하다. 메뉴 모양 만들기와 마찬가지로 과 을 이용하여 각각의 메뉴 버튼이 각기 다른 페이지를 나타내도록 해보자. 1.1 탭메뉴 구현을 위한 태그와 선택..