본문 바로가기

CSS21

[CSS] 애니메이션09 : 커서따라 움직이는 EYES~~👀 CSS : 애니메니션 만들기 : 움직이는 눈 👀 이번 시간에는 CSS 실습으로 상자가 돌아가다가 마우스 커서 방향대로 눈이 움직이는 애니메이션을 만들어보겠습니다~~! #1. HTML 다음은 html 코드 입니다. tometo #2. CSS 다음은 CSS 코드 입니다! 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-st.. 2022. 9. 29.

[CSS] 애니메이션08 : 빙글~빙글~ 돌아가는 로딩~ CSS : 애니메니션 만들기 : 빙글빙글 로딩 애니메이션 이번 시간에는 CSS 실습으로 상자가 돌아가다가 빙글빙글 돌아가는 로딩 애니메이션을 만들어보겠습니다~~! #1. HTML 원의 갯수 만큼 div를 넣어주시면 됩니다. #2. CSS 다음은 CSS 코드 입니다! body { background: DarkSeaGreen; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; animation: spin .6s linear infinite reverse; } .ball { position: absolute; top: 50%; left: 50%; tran.. 2022. 9. 29.

[CSS] 애니메이션07 : 쭈우우우욱 늘어나는 박스 CSS : 애니메니션 만들기 : 쭈우우우욱 늘어나는 상자 애니메이션 이번 시간에는 CSS 실습으로 상자가 돌아가다가 쭈우우욱 늘어나는 애니메이션을 만들어보겠습니다~~! #1. HTML 상자의 면 갯수만큼 div를 만들어 주시면 됩니다. 토매토 #2. CSS 다음은 CSS 코드 입니다! body { background-color: CadetBlue; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotat.. 2022. 9. 29.

[CSS] 애니메이션06 : 통!통!통! 텍스트 CSS : 애니메니션 만들기 : 통통 텍스트 애니메이션 이번 시간에는 CSS 실습으로 텍스트가 통통 튀는 애니메이션을 만들어보겠습니다~~! #1. HTML 각각의 span 태그에 텍스트를 하나씩 입력해주시면 됩니다! t o m e t o l v e #2. CSS 다음은 CSS 코드 입니다! html, body { width: 100%; height: 100%; background: linear-gradient(140deg, beige 0%, salmon 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 span { font-family: '궁서체'; font-size: 80px; col.. 2022. 9. 29.

[CSS] 애니메이션05 : 깐즤나는 입체 효과 CSS : 애니메니션 만들기 : 🕶 입체적인 애니메이션 작업~ 😎 + 마우스 오버 효과 🖱 이번 시간에는 CSS 실습으로 입체적인 애니메이션을 만들어보겠습니다~~! 오늘의 포인트 속성은 바로~~ transform-style: preserve-3d;입니다! #1. HTML 구조를 앞과 뒤가 따로 있다 생각하여 마크업을 해주시면 됩니다. Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 to Right Mouse Hover Effect 마우스 내리면 to Left #2. CSS 다음은 CSS 코드 입니다! 오늘의 포인트는 transform-style: preserve-3d;와 perspective로 .. 2022. 9. 21.

[CSS] 애니메이션04 : 웨이브~~웨이브~~ CSS : 애니메니션 만들기 : 물결 웨~이부~~~ 🌊 🌊 이번 시간에는 CSS 실습으로 원들이 훌랄라 하는 듯한 애니메이션을 만들어보겠습니다. 😄 오늘 실습의 포인트는 퍼그와 SCSS 그리고 반복문입니다~! #1. PUG 다음은 PUG 코드와 컴파일한 HTML 코드 입니다! 🐶 PUG div.circle-wrap - for (var x =1; x 2022. 9. 19.

[CSS] 애니메이션 실습 : 걷기 애니메이션 (from.토매토) CSS : 애니메니션 만들기 : 걸어가는 토매토 이번 시간에는 CSS실습으로 귀여운 걷기 애니메이션을 만들어보겠습니다. 😄 border-radius Start Stop #1. HTML 다음은 HTML 코드 입니다! Start Stop #2. CSS 다음은 CSS 코드 입니다! .step { height: 700px; background: #fde7ef; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(https://user-images.githubusercontent.com/106949433/188998629-e1cb8ac8-0263-4b69-935d-eacd186c2535.jpg); border-rad.. 2022. 9. 8.

[CSS] CSS 애니메이션에 대해 알아보자! CSS : 애니메이션(animation) 이번 시간에는 CSS로 표현할 수 있는 애니메이션 속성들에 대해 알아보겠습니다! 😄 #1. animation 속성의 기본 표현 animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 애니메이션: 이름 | 지속시간 | 타이밍 기능 | 지연시간 | 방향 | 채우기 모드 | 재생 상태 #2. animation의 종류 다음은 animation의 종류입니다~! 표를 보며 함께 알아봅시다! 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. .. 2022. 9. 8.

[CSS] SVG : 애니메이션 구현하기 CSS : SVG를 이용하여 애니메이션 만들기 이번 시간에는 SVG태그와 CSS속성을 이용하여 백터 그래픽으로 애니메이션을 구현해보겠습니다! 😄 #1. SVG란 무엇인가요!? 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. • 인터넷 익스플로러9 버전 이상부터 지원됩니다. • XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. • .. 2022. 9. 8.

[CSS] SVG : 백터 그래픽 도형 표현하기 CSS : SVG를 이용하여 백터 그래픽 만들기 이번 시간에는 SVG태그와 CSS속성을 이용하여 백터 그래픽을 표현해보겠습니다! 😄 #1. SVG란 무엇인가요!? 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. • 인터넷 익스플로러9 버전 이상부터 지원됩니다. • XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. • 벡터 방식이기.. 2022. 9. 8.

[CSS] 애니메이션 실습 : 로딩 CSS : 애니메니션 만들기 : 로딩 이번 시간에는 CSS실습으로 귀여운 로딩 애니메이션을 만들어보겠습니다. 😄 #1. HTML 먼저 HTML 코드로 div를 이용하여 영역을 만들어 줍니다. #2. CSS 다음은 CSS 속성입니다. animation 속성을 사용하여 keyframes에 적용할 애니메이션 명을 작성해주고 그 외 속성을 설정해줍니다. @keyframes에 속성을 설정할 애니메이션 명을 써준뒤 각 0% ~ 100% 사이에 속성을 부여해줍니다. body { height: 100vh; background-image: linear-gradient(-60deg, plum 0%, skyblue 100%); /* 왼쪽 아래부터 그라디언트 시작 */ } .loading { position: absolute.. 2022. 8. 30.

[CSS] 애니메이션 실습 : 움직이는 박스 CSS : 애니메니션 만들기 : 박스 이번 시간에는 CSS실습으로 귀여운 박스 애니메이션을 만들어보겠습니다. 😄 #1. HTML 먼저 HTML 코드로 div를 이용하여 박스를 만들어 줍니다. #2. CSS 다음은 CSS 속성입니다. animation 속성을 사용하여 keyframes에 적용할 애니메이션 명을 작성해주고 그 외 속성을 설정해줍니다. @keyframes에 속성을 설정할 애니메이션 명을 써준뒤 각 0% ~ 100% 사이에 속성을 부여해줍니다. body { height: 100vh; background-image: linear-gradient(to top, Plum, skyblue); } .box { width: 50px; height: 50px; position: absolute; /* 위치 .. 2022. 8. 30.

[CSS] 요소를 숨기는 방법 CSS : 요소(element)를 안보이게 하는 방법 CSS 속성을 작업하다 보면 요소를 숨겨야 하는 속성들이 필요하게 됩니다. 이번 시간에는 CSS 기법 중 하나인 요소를 안보이게 하는 방법 5가지에 대해 알아보겠습니다!😄 #1. display : none; 가장 보편적으로 사용하는 속성 중 하나로 요소의 영역이 완전히 사라지게 됩니다. 또한 이 속성을 사용하게 되면 애니메이션 효과도 줄 수 없게 됩니다. 💡 코드 보기 p {display : none;} 없어집니당 뾰로롱 #2. opacity: 0; opacity는 투명도를 설정하는 속성 중 하나로 요소의 투명도를 0으로 하여 요소를 안보이게 합니다. 때문에 요소는 사라져도 영역은 남게 되며 애니메이션도 적용이 가능합니다. 💡 코드 보기 p {opac.. 2022. 8. 26.

[CSS] CSS의 색상 표현 방법 CSS : 색상 표현 방법 CSS에서는 색상을 설정하는 총 7가지의 방법이 있습니다. 먼저 기존 CSS에 있던 방법 3가지, CSS3에서 추가된 4가지 방법이 있습니다. 이번 시간에는 이러한 CSS의 색상 표현 방법에 대해 알아보겠습니다!😄 🔶 CSS 색상 표현 방법 🔶 #1. 색상 이름으로 표현 red, pink와 같이 색상의 이름을 나타내는 방법으로, 약 140가지의 색상 이름들이 브라우저에 미리 정의되어 있습니다. p {background-color: orange;} orange #2. RGB값으로 표현 rgb(red, green, blue)와 같은 형식으로 색을 표현합니다. 여기서 red, green, blue 각각의 변수에는 0에서 255사이의 정수를 입력하거나 백분율 값을 지정하여 색상을 설정.. 2022. 8. 24.

[CSS] CSS 단위의 종류 CSS : 단위 이번 시간에는 CSS의 단위에 대해 알아보겠습니다!😄 #1. px(픽셀) 해상도에 따라 상대적으로 달라지는 기본 단위로 글자 크기를 지정하지 않았을 경우 보통 16px로 자동 설정됩니다. #2. %(퍼센트) 부모 요소의 크기를 100% 기준으로 계산한 % 단위 특별한 설정이 없다면 16px = 100% / 24px = 150%가 됩니다. #3. em 부모 요소의 폰트 크기를 100% 기준으로 계산한 100분의 1단위 특별한 설정이 없다면 16px = 1em / 24px(16px x 1.5 = 24px) = 1.5em가 됩니다. #4. rem em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산합니다. r은 root. 즉 html요소를 뜻하므로 html 요소에서 .. 2022. 8. 24.

[CSS] 이미지 스프라이트 기법 + ir효과 / 백그라운드 CSS : Image Sprite 이번 시간에는 CSS 기법 중 하나인 이미지 스프라이트(Image Sprite) + ir효과 + 백그라운드에 대해 알아보겠습니다!😄 #1. 이미지 스프라이트 기법이란? 이미지 스프라이트란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 기법을 의미합니다. 웹을 제작하다 보면 이미지가 점점 증가하게 되고 그만큼 용량이 커지기 때문에 로딩 시간이 길어지게 됩니다. 이때 이미지 스프라이트를 사용하면 이미지를 다운받기 위한 서버 요청이 줄고 로딩시간을 절약할 수 있게 됩니다. 또한, 여러 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지 파일만을 관리하면 되므로 매우 간편합니다. 💡 그럼 다음의 예제를 통해 이미지 스프라이트 기법을 이해해보도록 합시다! #2. 이미지 .. 2022. 8. 22.

[CSS] SCSS 실습01 : 움직이는 강아지 일러스트 🐶 SCSS 실습01 : 🐶 움직이는 강아지 🐶 이번 시간에는 css 종류 중 하나인 지난 시간에 배웠던 SCSS언어를 이용하여 간단한 실습을 해봅시다! 🐶 HTML 🐶 ! point! 부모자식형제 요소에 맞게 코드를 정렬해주는 것이 중요합니다! 코드를 짤 땐 항상 코드 정렬을 잊지 마세요! 🐶 SCSS 🐶 SCSS를 이용하여 스타일 속성을 정해줍니다. $dog-width: 100px; $interval: 200ms; $color-gray: #eaebec; $easing: ease-in-out; body { display: flex; flex-direction: column; justify-content: center; align-items: center; } html, body { background: o.. 2022. 8. 19.

[CSS] SCSS 언어란? CSS : SCSS 이번 시간에는 CSS 언어 중 하나인 SCSS에 대해 알아보겠습니다!😄 #1. SCSS란? 코딩이 복잡해지게 되면 코드의 중복 및 오류 등의 이유로 CSS는 유지보수가 어려워지고 가독성 또한 떨어지게 됩니다. 이러한 CSS의 단점을 보완하고자 등장한 문법이 SCSS라고 합니다. SCSS는 Syntactically Awesome StyleSheet의 약어로 코드의 재사용성을 높이고, 가독성을 증가시켜 개발의 효율성을 높이기 위한 전처리기 언어입니다. !! 여기서 중요한 점은 SCSS언어로 직접 구현하는 것이 아니라 Scss로 작업 후 CSS언어로 컴파일하여 웹에 구현시키는 원리라는 것 입니다! 즉 CSS의 대체 언어가 아닌 좀 더 효율적으로 CSS 코드 작업을 할 수 있는 도구의 개념이.. 2022. 8. 19.

[CSS] 미디어쿼리 CSS: 미디어쿼리란? 해상도에 따라 css를 분기시키기 때문에 반응형 프로젝트에서 반드시 필요한 기법입니다! #1. !point! 위 코드는 최소 가로폭 1000px, 즉 1000px 보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻입니다! 또한 크롬 개발자 도구를 통해 각 기기마다의 해상도에 따른 예시를 볼 수 있습니다. 해상도 평균 사이즈 표 기기 가로 데스크탑 1920 테블릿pc 768 모바일 480 #2. @media 첫 로딩 때 성능이 저하되지 않도록 CSS 파일을 하나로 만들어서 CSS 내부에서 조건에 따라 분기시키는 것이 일반적인 형태의 반응형웹 CSS입니다. @media all and (min-width: 1000px) { /* 모든 기기에서 해상도가 최소 1000px 인 경.. 2022. 8. 16.

[CSS] 기본 문법 CSS 기본 문법 4가지 지금부터 CSS 기본 문법 4가지를 알아보도록 하겠습니다!😀 #1. 내부 스타일시트 HTML문서 안에 이 문장의 색은 빨강입니다. #2. 외부 스타일시트 스타일 속성을 따로 저장하여 HTML문서와 연결할 수 있습니다. 파일의 확장명은 '.css'로 저장해주어야 하며 HTML문서에서는 태그를 사용하여 선언 합니다. 내부 스타일시트 이 문장의 색은 빨강입니다. style.css - 외부 경로 @charset "UTF-8"; p { color: red; } 이처럼 내부 스타일시트와는 달리 외부 스타일시트는 html문서에 경로 선언만 해준다면 모든 페이지에서 동일한 시트를 적용할 수 있다. #3. @import css안으로 다른 css 파일을 불러올 수 있습니다. 여러개를 사용하면 복잡.. 2022. 8. 16.

[CSS] 이미지 표현 방식 : 벡터와 비트맵 벡터와 비트맵 백터와 비트맵은 이미지를 표현하는 방식으로 서로 상반된 방식으로 이미지를 표현합니다. 지금 부터 벡터와 비트맵에 대해 알아보겠습니다! #1. 비트맵(Bitmap) 방식 각 픽셀에 저장된 비트 정보가 집합된 것입니다. 비트맵은 벡터와 다르게 픽셀의 점 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교한 이미지 표현이 가능합니다. ! 특징정리 ! • 비트맵 방식은 색상 정보가 담긴 픽셀 하나 하나가 모여 만들어지는 방식으로 보다 정교한 이미지 표현이 가능하다. • 디스플레이는 픽셀의 배열로 구성되어 있으며 픽셀의 배열, 숫자, 비율이 디스플레이의 해상도를 결정한다고 볼 수 있다. 예를 들어서 1920x1080디스플레이가 있다면 이는 가로 1920개 세로 1080개의 픽셀로 구성되어 있는.. 2022. 8. 10.

이전 1 다음

728x90

Lucky Charms Rainbow

JAVASCRIPT

html

HTML

css

CSS

티스토리툴바