eye moving 이미지 카드, 카드 속의 눈이 움직이는 애니메이션 HTML HTML를 이용하여 진행 ABCDE CSS CSS를 이용하여 진행, transform-style: preserve-3d; z축을 만들기 위해서 만들어줍니다. * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } .wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 369px; height: 547px; transform-style: preserve-3d; } .me { position: abs..
loading 작은 원 10개가 돌면서 loading 화면 처럼 보이는 애니메이션을 만들어봅시다. HTML 원을 여러개 만들어줍니다. CSS reverse : 애니메이션을 역방향으로 재생한다. 재생이 한 번 끝나면 마지막 프레임부터 다시 시작한다. ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝납니다. transform 속성을 이용해 요소에 이동 효과(X , Y축으로 각각 -50%씩)를 부여하면, 시각적으로 가운데에 위치 body{ background-color: rgb(105, 54, 199); } .loader { position: absolute; top: 50%; left:50%; transform:translate(-50%,-50%); width:100px; height:..
growing box 박스가 늘어나는 애니메이션 HTML HTML를 이용하여 진행 Untitled CSS CSS를 이용하여 진행, transform-style: preserve-3d; z축을 만들기 위해서 만들어줍니다. body { background-color: #888; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotatex(-20deg) rotatey(-140deg) translatez(0);..
Text Wave 글자가 웨이브 HTML HTML를 이용하여 진행 c o d e p e n CSS CSS를 이용하여 진행합니다. top을 20px를 주고, @keyframes으로 top을 -20px로 부여하여 움직임을 줍니다. nth-child로 각 글자마다 딜레이를 만들어줍니다. html,body { width: 100%; height: 100%; background: linear-gradient(140deg, skyblue 0%, plum 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 span { font-family: '궁서체'; font-size: 80px; color: #f..
Mouse Hover Effect 마우스를 올리고 내렸을때 움직임이 생기는 효과를 만들어봅시다. HTML hover__wrap 안에 hover__updown, hover__leftright등 구조를 만들어줍니다. Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 to Right Mouse Hover Effect 마우스 내리면 to Left CSS perspective = 원근감 수치를 작게 입력할 수록 가깝게 transform-style: preserve-3d; 입력하면 z축 부여가능 @font-face { font-family: 'LocusSangsang'; font-weight: normal;..
CSS - animation 캐릭터가 걷는 애니메이션을 만들어봅시다. HTML border-radius Start Stop CSS .step { height: 700px; background: #43ddf7; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(img/ani1.jpg); border-radius: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: ani 1s steps(24, start) infinite; } .step .stepbox.start { animation-play-stat..
animation animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션 끝..
SGV 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. 1. 인터넷 익스플로러9 버전 이상부터 지원됩니다. 2. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 3. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. 4. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. ※ 부트스트랩이란 부트스트랩..
SVG ANIMATION svg에 애니메이션을 적용해 봅시다. HTML CSS .ani1 { width: 100px; height: 100px; x: 30px; y: 30px; fill: none; stroke: #880E41; stroke-width: 2px; stroke-dasharray: 50; stroke-dashoffset: 50; animation: ani1 1s infinite linear alternate-reverse; } @keyframes ani1 { 0% { stroke-dashoffset: 50; } 100% { stroke-dashoffset: 0; } } .ani2 { width: 100px; height: 100px; x: 30px; y: 30px; fill: none; st..
잔상 공 잔상이 반복적으로 생기는, 움직이는 공 애니메이션을 만들어 봅시다. HTML 공을 5개 만들어 봅시다. CSS linear-gradient : 적용된 HTML 요소에 선형으로 그래디언트(gradient) 효과를 적용시켜 줍니다. ease-in-out 빠르게 시작하여 점점 천천히 동작합니다. alternate : 순방향으로 애니메이션을 시작해 역방향과 순방향으로 번갈아 애니메이션을 진행. keyframes을 만든 뒤, transform으로 움직임을 부여합니다. * { box-sizing: border-box; } body { background: linear-gradient(to top, #E38B29 0%, #FDEEDC 100%); width:100vw; height:100vh; display..
두개의 원이 돌고있는 애니메이션 2개의 원이 돌고있는 애니메이션을 만들었습니다. HTML 원을 두개 만듭니다. CSS keyframes을 만든 뒤, transform으로 움직임을 부여합니다. body { height: 100vh; background-image: linear-gradient(-60deg, #495C83 0%, #C8B6E2 100%); } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 1s ease 100; } .loading .circle1 { display: block; width: 20px; height: 20px; border-radius: 50%; b..
박스가 점핑하는 애니메이션 사각형이 움직이는 애니메이션입니다. html 박스를 만듭니다. css keyframes을 이용하여 transform을 부여합니다. body { height: 100vh; background-image: linear-gradient(to top, blue, red); } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .box::before { content: ''; width: 50px; height: 5px; background: #000; position: absolute; top: 58px; left: 0; border-radiu..
CSS 요소 숨기기 CSS를 통하여 요소를 숨길 수 있습니다. 다양한 숨기는 방법을 알아봅시다. display: none; (애니메이션X, 영역X) 영역을 차지하지 않고, 공간을 차지하지 않는다. 요소가 없던 것처럼 표시 display: none; opacity: 0; (애니메이션O, 영역O) opacity는 0~1 사이, 0% ~ 100% 사이로 표시 할 수 있습니다. opacity는 불투명도라는 뜻입니다. 숫자가 클수록 불투명하고, 숫자가 작을 수록 투명합니다. opacity: 0; visibility: hidden; (애니메이션X, 영역X) 레이아웃에 영향을 미치지 않고 요소를 감춥니다. 사라진 공간은 빈 공간으로 영역이 남게됩니다. visibility: hidden; width: 0; height..
CSS 색상 표현 CSS의 색상은 글자색(color) 뿐 아니라 배경색(background), 테두리(border)등 다양한 CSS속성들이 적용됩니다. 다양한 색상 표현을 알아봅시다. 색상 이름 색상 이름으로 표현이 가능합니다. .blue { color: blue; } .green { color: green; } .silver { color: silver; } HEX (16진수) RGB 색상값을 16진수로 변환한 것입니다. 기본색(red, freen, blue)을 각각 00부터 FF까지 범위로 표현합니다. .blue { color: #0000FF; } .green { color: #008000; } .silver { color: #C0C0C0; } RGB RGB 색상은 각각 red, green, blue..
CSS 단위 CSS에는 다양한 형태의 단위가 있으며, 필요에 맞게 사용합시다. 절대 단위 규격이 정해져 있으며, 각 단위들 끼리 값 변환이 가능합니다. 단위 의미 cm 센티미터 단위 mm 밀리미터 단위 in 인치(inch) 단위로, 2.54cm과 같음 px 픽셀(pixels) 단위로, 1/96inch와 같음 px 포인트(point) 단위로, 1/72inch와 같음 pc 피카(picas) 단위로, 12pt와 같음 상대 단위 다양한 플랫폼들에 유동적으로 적용할 수 있습니다. 단위 의미 em 폰트의 기본 크기 값에 비례한 단위 ex 폰트의 기본 X 높이에 비례한 단위 ch "0"의 기본 폭에 비례한 단위 rem 최상위 요소의 폰트 크기에 비례한 단위 vw 뷰포트 너비에 비례한 단위 vh 뷰포트 높이에 비례한 ..
이미지 스프라이트 / IR 효과 / 백그라운드 표현 이미지 스프라이트 / IR 효과 / 백그라운드 표현에 대해서 알아봅시다. 이미지 스프라이트 스프라이트(Sprite) : 컴퓨터 그래픽스에서 작은 2차원 비트맵이나 애니메이션을 합성하는 기술을 의미합니다. 웹에서 "여러 개의 이미지를 하나의 이미지로 만들어 놓는 것"을 의미합니다. 그에 대한 예시입니다. ♦︎ 장점 하나의 파일에 이미지들을 담아서 사용하기에 발생하는 장점 1. 이미지 로딩 속도 향상(최적화)됩니다. 2. HTML 마크업이 간결해지고 스크린 리더의 탐색 속도가 향상됩니다. 3. 하나의 파일만 관리하면 됩니다. ♦︎ 단점 1. 상황에 따라 유지보수가 어려울 수 있습니다. (이미지가 추가될 경우 스프라이트를 업데이트하고, 포지션 값의 수정이 필..
SCSS scss는 sass의 3버전에서 등장한 언어입니다. css와 비슷한 구문을 가지고 있으며, css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트입니다. sass기능을 지원하며, css와 거의 같은 문법으로 사용되는 장점을 가지고 있습니다. Sass(SCSS) Sass란 Syntactically Awesome Style Sheets의 약자. CSS pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주며 유지보수를 쉽게 해줍니다. CSS Preprocessor CSS가 동작하기 전에 사용하는 기능이며, 전처리기를 통해 쉽게 입력을 하고 CSS로 변환시키는 것입니다. CSS Preprocessor의 예로는 SCSS,Sass..
강아지 애니메이션 PUG와 SCSS를 이용해서 강아지 애니메이션을 만들었습니다. PUG pug를 이용해서 코드를 만듭니다. html보다 간결한 작성이 가능합니다. 들여쓰기로 영역을 구분하기에 닫는 태그를 적을 필요가 없습니다. .dog .dog-body .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-torso .dog-head .dog-ears .dog-ear .dog-ear .dog-eyes .dog-eye .dog-eye .dog-muzzle .dog-tongue HTML pug코드를 HTML코드로 컴파일한 코드. SCSS SCSS를 이용해서 코드를 만듭니다. css보다 간결한 작성이 가능합니다...
미디어쿼리 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 최소 가로폭이 1000px, 즉 1000px보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻입니다. 태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다. 또한 다음 트로이(http://troy.labs.daum.net/)에서는 기기별 해상도를 제공하고 실제 작동 화면을 확인할 수 있는 VIEW를 제공합니다. 모바일 기기 가로 세로 IPhone X 375 812 IPhone 6, 7, 8 375 667 IPhone 6, 7, 8 plus ..
CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트만으로 사용할 수도 있습니다. 또한 인라인 스타일시트는 대체로 거의 사용하지 않지만, 가장 우선 순위가 높아서 꼭 필요한 경우 편리하게 사용할 수 있습니다. 참고로, CSS에서의 주석은 /* */로 표현합니다. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 우리를 기쁘게 하는 것들. 결과 보기 우리를 기쁘게 하는 것들. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.c..
이미지 표현 방식 이미지 표현 방식인 벡터와 비트맵 방식을 알아봅시다. 벡터 이미지에 표현되는 점에 대한 정보를 저장하여 이미지를 표현합니다. 두 개의 점에 대한 정보를 갖고 있으면 선을 표현할 수 있고, 세 개 이상의 선에 대한 정보를 갖고 있으면 면을 형성할 수 있습니다. 벡터 그래픽은 기하학적 정보와 선의 두께, 색상, 곡률 등의 정보를 이용하여 이미지를 표현하는 방식이다. 벡터 방식의 종류 벡터 방식의 종류는 ai, eps, svg등이 대표적입니다. 비트맵 특정 색상 값을 갖는 점(픽셀)의 배열로 이미지를 표현하는 방식입니다. 대표적인 비트맵 그래픽인 jpg, gif, png 형식은 확대시에 이미지가 손상되는 현상이 발생합니다. 고정된 크기의 틀에 픽셀이라는 단위로 점을 찍어서 이미지를 표현하기 ..
레이아웃05 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다. 하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다. 구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다. * { margin: 0; padding: 0; } #wrap { width: 100%; } #header { width: 100%; height: 100px; background-color: #EEEBE9..
레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다. 하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다. 구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다. * { margin: 0; padding: 0; } #header{..
레이아웃03 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다. 하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다. 구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다. * { margin: 0; padding: 0; } body { background-color: #E1F5FE; } #wrap { width: 1200px; margin: 0 auto; } #header {..
레이아웃02 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다. 하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다. 구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다. * { margin: 0; padding: 0; } body { background-color: #E8F5E9; } #wrap { width: 1200px; margin: 0 auto; } #header {..
레이아웃01 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다. 하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다. 구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다. * { margin: 0; padding: 0; } body { background-color: #FFF3E0; } #wrap { width: 1200px; margin: 0 auto; } #header {..
Layout (레이아웃) CSS에서 요소들을 보기 쉽게, 배치하고 정렬하는 것. 레이아웃을 만드는 방법에는 float, flex, grid가 있다. Layout 종류 방법 1 : float div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다. 하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다. 구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다. /* clearfix */ .clearfix::before, .clearfix::after { content: ''; display: block; line-height: 0; } .clearfix:..
