반응형 CSS27 MoveEyes 애니메이션 MoveEyes 애니메이션 Code pen을 사용하여 마우스 커서를 따라 움직이는 눈동자를 만들어 봤습니다. See the Pen move eyes by sukjun2 (@sukjun2) on CodePen. HTML 별거 없죠? Hi~ CSS * { 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.. 2022. 9. 27. LoadingScreen 애니메이션 loading_screen 애니메이션 Code pen을 사용하여 loading_screen 애니메이션을 만들어보았습니다. See the Pen loading_screen by sukjun2 (@sukjun2) on CodePen. HTML loader 클래스 div 태그 하위에 10개의 자식 ball 클래스인 div 태그를 만들어줍니다. CSS 배경색을 설정하고, loader 클래스의 위치와 애니메이션을 설정합니다. 하위 ball 클래스의 크기와 위치, 배경색을 지정하고 각 nth-child에 애니메이션 지연시간을 설정합니다. @keyframes으로 0%, 100%구간을 설정해주면 끝입니다..! body { background-color: rgb(58, 124, 97); } .loader { positi.. 2022. 9. 25. BoxStretch 애니메이션 BoxStretch 애니메이션 Code pen을 사용하여 BoxStretch(늘어나는 박스) 애니메이션을 만들어보았습니다. See the Pen Box_stretch by sukjun2 (@sukjun2) on CodePen. HTML 상자를 의미하는 cube 클래스 내부에 각 면이 될 6개의 div태그를 만들어줍니다. 코터틀 CSS 배경색을 설정하고, 부모인 cube 클래스에 애니메이션 회전 효과와 원근감이 표현되도록 preserve-3d 효과를 줍니다. 내부 div태그의 중앙정렬과 위치를 설정하고 nth-child를 통하여 각 면의 색과 회전 각도, 방향, 회전 중심, 애니메이션을 설정해주면 끝입니다...? body { background-color: black; height: 100vh; persp.. 2022. 9. 25. TextBounce 애니메이션 TextBounce 애니메이션 Codepen을 사용하여 텍스트가 통통튀는 애니메이션을 만들었습니다. 디테일하게 그림자도 만들었으니 잘 보세요! See the Pen animation???? by sukjun2 (@sukjun2) on CodePen. HTML 별거없죠? 코 터 틀 CSS -webkit-font-smoothing 이 속성을 적용하면 브라우저에 표현되는 텍스트가 렌더링될 때 부드럽게 표현되는 장점이 있습니다. 텍스트의 스타일을 설정하고, 그림자를 만들어줍니다. 그리고 바운스 애니메이션을 설정해주면 끝납니다. 참 쉽죠? @import url('https://webfontworld.github.io/utoNewyorkers/UtoNewYorKers.css'); html, body { width:.. 2022. 9. 22. MouseHover 애니메이션 마우스 오버 애니메이션 Code pen을 사용하여 마우스 오버시 x/y축으로 회전하여 다른 이미지를 보여주는 애니메이션을 만들었습니다. 재방문하신 선생님도 고생하셨습니다. See the Pen MouseHoverEffect by sukjun2 (@sukjun2) on CodePen. HTML 전체를 감싸는 hover__wrap내부에 x축을 기준으로 회전할 hover__updown 영역의 전, 후와 y축을 기준으로 회전할 hover__leftright 영역의 전, 후로 총 4개의 이미지가 들어가도록 영역을 설정합니다. Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 to Right Mouse Ho.. 2022. 9. 20. Wave 애니메이션 웨이브 애니메이션 Code pen을 사용하여 꿀렁이는 웨이브 애니메이션을 만들어봤습니다. See the Pen Wave Animation by sukjun2 (@sukjun2) on CodePen. HTML html을 조금 더 세련되게 쓸 수 있는 템플릿 언어 pug를 사용하였습니다. div.circle-wrap - for (var x =1; x 2022. 9. 19. Walking 애니메이션 Walking 애니메이션 Code pen을 사용하여 커피잔이 걸어가는 애니메이션을 만들었습니다. See the Pen Untitled by sukjun2 (@sukjun2) on CodePen. HTML HTML 영역입니다. 애니메이션 백그라운드 영역을 설정하고 내부에 이미지와 시작/정지 영역을 설정합니다. Start Stop CSS 이미지는 bg url을 사용하였습니다. 포토샵을 통하여 800px * 600px 크기의 32개 이미지를 일렬로 설정하고 jpg로 저장합니다. 이미지의 위치는 position과 transform으로 잡아주었고, 1초 단위로 1개씩 이미지가 무한정 지나가도록 애니메이션 설정을 해줍니다. 배경이미지가 움직이지 않도록 background-position으로 고정하여줍니다. .ste.. 2022. 9. 7. Text 애니메이션 Text 애니메이션 Code pen을 사용하여 텍스트 애니메이션을 만들었습니다. See the Pen Text Animation by sukjun2 (@sukjun2) on CodePen. HTML viewBox는 svg 요소가 그려지는 영역에서, svg 요소의 크기를 확대 또는 축소 그리고 위치를 조정할 수 있는 속성입니다. viewBox 속성의 값은 다음과 같습니다.(viewBox=" ") text-anchor는 가운데 정렬 속성 값입니다. coturtle CSS stroke-dashoffset 그림이 어떤 지점에서부터 시작할지 정해주는 속성입니다. stroke-dasharray는 선을 dashed 형태로 만들어 주는 속성입니다. 애니메이션 효과를 1번 반복하고 텍스트의 외곽선이 5초동안만 나타나도록.. 2022. 9. 7. SVG Animation 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 애니메이션 끝.. 2022. 9. 7. SVG Intro SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. 1. 인터넷 익스플로러9 버전 이상부터 지원됩니다. 2. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 3. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. 4. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형(rect) svg 원형(.. 2022. 9. 7. Bounce 애니메이션 Bounce 애니메이션 Code pen을 사용하여 통통 튀는 원형 애니메이션을 만들었습니다. 늘 사용하던 애니메이션 CSS코드를 사용하였으니, 함께 만들어보세요! 오늘의 선생님 고생하셨슴다.. See the Pen Untitled by sukjun2 (@sukjun2) on CodePen. HTML 1개의 공, 4개의 잔상 표현을 위해 총 5개의 wrapper클래스 영역을 생성합니다. CSS 전체 영역을 box-sizing으로 설정해주고, 그라데이션 배경을 설정합니다. 시작 위치를 position으로 설정하여줍니다. 설정한 위치에 도형을 생성하여주고, transform / translate를 사용하여 움직임을 설정합니다. animation-delay, opacity를 사용하여 마치 공의 잔상이 남은 것 .. 2022. 9. 2. circle 애니메이션 circle 애니메이션 Code pen을 사용하여 2개의 circle로 loading 애니메이션을 만들어보았습니다. 간단한 코드로 따라 만들어보세요! See the Pen Untitled by sukjun2 (@sukjun2) on CodePen. HTML HTML은 정말 간단합니다. 일직선상의 2개의 원형을 만들기 위한 태그만 작성하여줍니다. CSS 먼저 body태그의 높이값을 전체로 잡아주고, 그라데이션 배경색을 입혀줍니다. 다음 직사각형을 만들어 화면의 중앙으로 위치를 잡아주고 양 끝 내부에 2개의 원형을 생성 후 직사각형을 숨겨줍니다. @keyframes와 사용할 이름을 함께 생성하여 시작부터 종료까지의 요소의 위치와 회전값을 설정하여줍니다. 마지막으로 .loading css로 돌아가 애니메이션 .. 2022. 8. 29. Box 애니메이션 Box 애니메이션 Code pen을 사용하여 데굴데굴 굴러가는 박스를 만들어보았습니다. 그림자까지 만드는 디테일도 따라해보세요! See the Pen Untitled by sukjun2 (@sukjun2) on CodePen. HTML 설명이 필요없습니다. 하나 만들어주세요. CSS body의 높이값을 전체로 설정하여주고 그라데이션 배경색을 입혀줍니다 먼저 전체 영역과 박스 그림자의 크기, 위치를 설정하고 그림자(before)의 애니메이션 패턴을 설정하여줍니다. 다음으로 박스(after) 가상 요소를 통해 색상과 회전하는 박스의 위치, 크기를 설정하고 애니메이션 패턴을 설정합니다. @keyframes를 통하여 shadow, load 각각 이름의 애니메이션을 설정해주면 끝입니다. body { height:.. 2022. 8. 29. CSS 요소 숨기기 CSS 요소 숨기기 CSS에서 요소를 숨기는 5가지 방법에 대해 알아보겠습니다. 1. display : none;(애니메이션X, 영억X) 가장 많이 사용되는 요소 숨김 방법입니다. 화면 상 어떤 영역을 차지하지 않고 완전히 삭제된 것처럼 보이게 합니다. /* 완전히 삭제 완전히 삭제 */ div { display: none; } 2. opacity: 0; (애니메이션O, 영역O) 요소의 불투명도를 설정합니다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대입니다. /* 완전히 삭제 완전히 삭제 */ div { opacity: 0; } 3. visibility: hidden; (애니메이션X, 영억X) 해당 요소가 보이지 않을 뿐 요소가 존재하는 영역은 확실히 보이게 됩니다. /* 완전히 삭제.. 2022. 8. 25. CSS 색상 표현 방법 CSS 색상 표현 방법 CSS에서 색을 표현하는 방법에는 다음과 같이 세 가지 방법이 있습니다. 1. 색상 이름으로 표현 2. RGB 색상값으로 표현 3. 16진수 색상값으로 표현 색상 이름으로 표현 색상 이름으로 표현이 가능합니다. W3C에서 정의한 16개의 HTML4 표준 색상 이름은 다음과 같습니다. aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow HTML에서 색상 이름은 대소문자를 구분하지 않습니다. .blue { color: blue; } .green { color: green; } .silver { color: silver; } 결과 확인하기 blue green silver .. 2022. 8. 23. CSS 단위 CSS 단위 font-size, 단위의 고찰 문자의 글자 크기를 지정하는 속성으로 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. 1. px 해상도에 따라 상대적으로 달라지는 기본 단위입니다. body { text-align: center; } div { font-size: 14px; } 결과 확인하기 Font size : 14px 2. % 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위입니다. body { font-size: 14px; } div { font-size: 120%; /* 14px * 1.2 = 16.8px */ } 결과 확인하기 Font size: 14px * 120% → 16.8px 3. em 부모 요소의 글자 크기를 100% 기준으로 계산한 1/100 단위입니다. .. 2022. 8. 23. 이미지 스프라이트 / IR 효과 / 백그라운드 표현 이미지 스프라이트 / IR 효과 / 백그라운드 표현 이미지 스프라이트 이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 이미지 스프라이트(image sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다. 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다. 또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편합니다. 예제 다음 예제는 하나의 이미지를 가지고 다섯 개의 아이콘을 만드는 예제입니다. 다섯 개의 아이콘을 만들기 위해 다섯 개의 이미지를 사용하.. 2022. 8. 20. SCSS/SASS 정리 SCSS(SASS) CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등 디자인 요소를 추가할 때 사용하는 전처리 과정입니다. 프로젝트 규모가 커지면 CSS는 불가피하게 가독성이 떨어지는 등 유지보수의 어려움을 주는 요소가 됩니다. 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념이 SASS/SCSS라고 합니다. SCSS는 중첩, 변수 선언, 연산자 등 많은 장점을 가지고 있습니다. 대표적인 장점이라고 볼 수 있는 셀렉터 중첩기능에 대해서 알아보겠습니다. // 일반적인 CSS 코드입니다 nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block.. 2022. 8. 18. 강아지 애니메이션 강아지 애니메이션 Code pen을 사용하여 html(pug)와 css(SCSS)를 사용하여 강아지 애니메이션을 코딩해보았습니다. SCSS의 대한 자세한 설명은 SCSS 게시글을 확인하여주세요! See the Pen CSS Dog by sukjun2 (@sukjun2) on CodePen. HTML Pug로 작성 후 변환 된 HTML태그 입니다. CSS SCSS로 작성 후 변환 된 CSS 입니다. SCSS버전 CSS는 code pen을 확인하여주세요. body { display: flex; flex-direction: column; justify-content: center; align-items: center; } html, body { background: linear-gradient(to right.. 2022. 8. 18. 미디어쿼리 미디어쿼리(media query) 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 01. 최소 가로폭이 1000px, 즉 1000px 보다 넓은 해상도 일 때에 style_pc.css를 연결한다는 뜻입니다. 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도를 확인할 수 있고 기기 모델도 추가할 수 있습니다. 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6,7,8 375 667 iPhone 6,7,8 plus 414 736 iPhone 5 320 568 Galaxy S5, S8 360 640 Galaxy Note 8 360 640 iPad Pro 1024 1366 ⋮ ⋮ ⋮ 02.. 2022. 8. 15. 기본 문법 CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트 만으로 사용할 수도 있습니다. 또한 인라인 스타일시트는 대체로 거의 사용하지 않지만, 가장 우선순위가 높아서 꼭 필요한경우 편리하게 사용할 수 있습니다. CSS에서 주석은 /* */로 표현합니다. 01. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 예제 우리를 기쁘게 하는 것들. 결과 확인하기 우리를 기쁘게 하는 것들. 02. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타.. 2022. 8. 15. 벡터와 비트맵 벡터와 비트맵 벡터 벡터 방식은 점과 점을 연결해만든 곡선으로 이미지를 구성하는 방식으로, 수학적으로 계산된 함수 관계로 이미지를 표현하여 선과 면을 만들어냅니다. 벡터는 기본적인 점의 위치 정보 정도만 기억하면 되기 때문에 파일의 크기가 작고, 이미지를 축소하거나 확대해도 이미지에 손상을 주지 않는 것이 큰 장점입니다. 하지만 컬러의 자연스러운 변화나 세밀한 그림을 표현하기 어렵고, 이미지를 구성하는 객체가 다양하고 많아질 수록 그래픽 처리 시간도 많이 소요된다는 단점이 있습니다. 때문에 주로 단순한 아이콘이나 캐릭터등의 일러스트 이미지, 로고 디자인 등에 많이 사용됩니다. 비트맵 비트맵 이미지는 이미지 정보를 가진 정사각형 모양의 픽셀 수백개가 모여 전체 이미지를 구성하는 방식입니다. 비트맵은 비트b.. 2022. 8. 9. Layout5 레이아웃05 이번 레이아웃은 반응형 적용을 위해 메인-좌,우 영역이 나누어진 레이아웃입니다. float : clearfix를 이용한 레이아웃 부모 요소가 다시 자식 요소를 감쌀 수 있게 float을 초기화(clear)하여 버그를 고쳐주는(fix) 코드입니다. * { margin: 0; } #wrap {} #header { height: 100px; background-color: #EEEBE9; } #nav { height: 100px; background-color: #B9AAA5; } #main { height: 780px; background-color: #886F65; } #footer { height: 100px; background-color: #4E342E; } .container { wid.. 2022. 8. 4. Layout4 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. container를 이용한 레이아웃 * { margin: 0; padding: 0; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; background-color: #80CBC4; } #section { height: 580px; background-color: #26A69A; } #footer { height: 100px; background-color: #00897B; } /* id | class 차이점 # | . 한번 | 두개이상 전체적인 틀, 스크립트 -->.. 2022. 7. 29. Layout3 레이아웃03 이번 레이아웃은 사이드 1영역과 그 옆으로 3개의 영역이 나누어진 레이아웃입니다. float : clearfix를 이용한 레이아웃 부모 요소가 다시 자식 요소를 감쌀 수 있게 float을 초기화(clear)하여 버그를 고쳐주는(fix) 코드입니다. * { margin: 0; } body { background-color: #E1F5FE; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 1200px; height: 100px; background-color: #B3E5FC; } #nav { width: 1200px; height: 100px; background-color: #81D4FA; } #main { width: 1200px; .. 2022. 7. 29. Layout2 레이아웃02 이번 레이아웃은 메인태그가 3영역으로 분할되어있습니다. float : overflow를 이용한 레이아웃 overflow 속성은 요소의 박스에 내용이 더 길 때 어떻게 보일지 선택하는 속성입니다. * { margin: 0; } body { background-color: #E8F5E9; } #wrap { width: 1200px; height: 100px; margin: 0 auto; } #header { width: 1200px; height: 100px; background-color: #C8E6C9; } #nav { width: 1200px; height: 100px; background-color: #A5D6A7; } #main { width: 1200px; overflow: hidde.. 2022. 7. 29. Layout1 레이아웃01 이번 레이아웃은 기초적인 구조로, 총 5영역으로 나누어집니다. float을 이용한 레이아웃 float은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. * { margin: 0; } body { background-color: #FFF3E0; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 1200px; height: 100px; background-color: #FFE0B2; } #nav { width: 1200px; height: 100px; background-color: #FFCC80; .. 2022. 7. 29. 이전 1 다음 반응형
