본문 바로가기

CSS23

[CSS] 마우스를 따라가는 눈알 효과 만들기👀 마우스를 따라가는 눈알 효과 만들기👀 이번 포스팅에서는 마우스 커서 위치를 따라가는 눈알 효과를 만들어보도록 하겠습니다. HTML 코드 wrapper 클래스값을 가진 div 안에 card 클래스값 div를 만든 후, 그 card div 안에는 me와 text 클래스값을 가진 div를 생성합니다. text div 안에는 넣고 싶은 짧은 문구를 넣습니다. me 안에는 eye 클래스값 div를 넣습니다. HELLO CSS 코드 HTML에서 만들어두었던 div의 클래스값들을 이곳에 정의하여 디자인합니다. .me::before, .me::after에서 background url 방식으로 얼굴을 출력시키고, .eye, .eye::before에서는 움직여줄 눈알을 출력시켜주도록 합니다. 코드 펼쳐보기 * { marg.. 2022. 9. 26.

[CSS] 로딩 애니메이션 만들기 로딩 애니메이션 만들기 이번 포스팅에서는 로딩 애니메이션을 만들어보도록 하겠습니다. HTML 코드 loader 클래스값을 가진 div 안에 ball 클래스값 div를 10개를 만들어주도록 한다. CSS 코드 ball 클래스를 지닌 div의 형태를 만들어 준 다음 nth-child를 이용하여 애니메이션 딜레이를 주고 마지막으로 키프레임을 통해 본격적으로 움직임을 주도록 한다. body { background-color: #b38dff; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; animation: spin .6s linear infinite r.. 2022. 9. 25.

[CSS] 움직이는 육면체 애니메이션🎲 움직이는 육면체 애니메이션🎲 이번 포스팅에서는 움직이는 육면체 애니메이션을 만들어보도록 하겠습니다! HTML 코드 cube클래스를 가진 div 태그 안에 div 박스를 6개 만들고 첫번째 div 박스에 글자를 넣습니다. 코딩공책 CSS 코드 body { background-color: #999; 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) tr.. 2022. 9. 22.

[CSS] 통통 튀는 글자 효과🐰 통통 튀는 글자 효과🐰 이번 포스팅에서는 통통 튀는 글자 효과를 만들어보도록 하겠습니다! HTML 코드 h1 태그 안에 쓰고 싶은 글자 수만큼의 span 태그를 만든 다음 글자를 채워 넣는다. 코 딩 공 책 ★ 티 스 토 리 CSS 코드 @import url('https://webfontworld.github.io/crown/CrownMychew.css'); 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 { f.. 2022. 9. 22.

[CSS] 마우스 오버 효과(Mouse Hover Effect) 마우스 오버 효과 만들기🐭 이번 포스팅에서는 마우스 오버 효과를 만들어보도록 하겠다. HTML 코드 hover__wrap 안에 hover__updown, hover__leftright 두 개의 div 박스가 들어가고 각각의 div 박스 안에 figure class="front"와 "back" 안에 이미지가 들어간 형태로 Hover시에는 back, 평상시에는 front가 되도록 나중에 CSS 코딩을 해준다. 코드 펼쳐보기 Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 to Right Mouse Hover Effect 마우스 내리면 to Left CSS 코드 /* 웹폰트 */ @font-face .. 2022. 9. 20.

[CSS] SCSS로 웨이브 애니메이션 만들기🌊 웨이브 애니메이션 만들기🌊 이번 포스팅에서는 웨이브 애니메이션을 만들어보도록 하겠다. HTML Pug 코드 HTML 코드에서는 반복 작업해야 할 것을 Pug 코드에서는 JS처럼 for문이 사용 가능하여 소스를 간략화 할 수 있습니다. circle-wrap 클래스 div 박스 하나 안에 row 클래스 div(안에 circle클래스 div 12개) 12개를 만드는 방법이다. div.circle-wrap - for (var x =1; x 2022. 9. 19.

[CSS] 걷는 호박 애니메이션 만들기🎃 CSS 애니메이션 : 걷는 호박 이번 포스팅에서는 호박이 걸어가는 애니메이션을 CSS를 통해 만들어보겠습니다. HTML 소스 Start Stop CSS 소스 ani1.jpg 파일은 포토샵에서 호박이 걷는 장면 32장을 가로로 이어붙여 만든 이미지 파일이며 width 값은 25600px입니다. 이렇게 가로로 이어붙인 이미지 파일을 먼저 준비합니다. 이러한 이미지 파일을 애니메이션 적용하는 방법은 다음과 같습니다. .step { height: 700px; background: #3b0643; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(https://kde66034.github.io/coding/anim.. 2022. 9. 8.

[CSS] 텍스트가 서서히 그려지는 SVG 애니메이션 SVG 텍스트 애니메이션 이번 포스팅에서는 텍스트가 서서히 그려지는 효과의 SVG 애니메이션을 만들어보도록 하겠습니다. 태그가 사용된 방법입니다. HTML 소스 코딩공책 CSS 소스 @font-face { font-family: 'Jalnan'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/goodchoice/Jalnan.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/goodchoice/Jalnan.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh.. 2022. 9. 8.

[CSS] SVG란? - 도형·애니메이션 만들기 SVG Animation 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. 01. 인터넷 익스플로러9 버전 이상부터 지원됩니다. 02. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 03. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. 04. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형.. 2022. 9. 7.

[CSS] 애니메이션 종류와 사용 방법 총정리 CSS Animation CSS 애니메이션 종류와 예시 정리. 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 애니메이션 방향을.. 2022. 9. 7.

[CSS] 공이 정신없이 튀는 애니메이션 만들기 공이 튀는 애니메이션 만들기⚽ 이번 포스팅에서는 공이 정신없이🤪🤪🤪 무한으로 튀는 애니메이션을 만들어보도록 하겠습니다. HTML 코드 CSS 코드 linear-gradient로 그라디언트 효과 배경을 사용할 수 있으며 position 속성과 animation, @keyframes 등을 잘 활용하여 애니메이션을 완성시킬 수 있다. * { box-sizing: border-box; } body { background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; .. 2022. 9. 2.

[CSS] 정사각형이 회전하는 애니메이션 만들기 정사각형이 회전하는 애니메이션 만들기⬜ 이번 포스팅에서는 정사각형이 시계방향으로 계속 돌아가는 간단한 애니메이션을 만들어보도록 하겠다. HTML 코드 HTML 코드는 매우 간단하다. box 클래스값을 가진 div만 넣는다. CSS 코드 linear-gradient로 그라디언트 효과 배경을 사용할 수 있으며 position 속성과 animation, @keyframes 등을 잘 활용하여 애니메이션을 완성시킬 수 있다. body { height: 100vh; background-image: linear-gradient(to top, goldenrod, darkkhaki) } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; righ.. 2022. 8. 29.

[CSS] 원 2개가 시계방향으로 회전하는 애니메이션 만들기 원 2개가 돌아가는 애니메이션 만들기⚪ 이번 포스팅에서는 동그라미 2개가 시계방향으로 계속 돌아가는 간단한 애니메이션을 만들어보도록 하겠다. HTML 코드 loading 클래스값을 가진 div 안에 circle1, circle2 클래스값을 가진 span 태그 2개를 종속시킨다. CSS 코드 linear-gradient로 그라디언트 효과 배경을 사용할 수 있으며 position 속성과 animation, @keyframes 등을 잘 활용하여 애니메이션을 완성시킬 수 있다. body { height: 100vh; background-image: linear-gradient(-60deg, darkorchid 0%, lightpink 100%); } .loading { position: absolute; lef.. 2022. 8. 29.

[CSS] 요소 숨기는 방법 알아보기 CSS 요소 숨기는 방법 CSS에서 특정 요소를 숨기는 방법에 대해 설명하는 포스팅입니다. display로 요소 숨기기 차지하던 영역을 제거해 존재 자체가 사라진다고 이해하면 된다. 애니메이션 적용 불가능. display: none; opacity로 요소 숨기기 투명도를 0으로 설정하는 것이기 때문에 영역은 남아있다. 애니메이션 적용 가능. opacity: 0; visibility로 요소 숨기기 차지하던 공간은 그대로 유지하지만 콘텐츠가 숨겨지는 방식이다. 애니메이션 적용 불가능. visibility: hidden; transform으로 요소 숨기기 scale 값을 0으로 설정하여 요소를 안 보이게 하는 방식이다. 애니메이션 적용 가능. transform: scale(0); width, height 값 .. 2022. 8. 25.

[CSS] 색상 표현하는 방법 알아보기 CSS 색상 표현 방법 CSS의 색상 표현 방법에 대해 설명하는 포스팅입니다. 1. 색상명으로 표현 색상 이름으로 표현 가능하다. 약 140가지의 색상명들이 브라우저에 미리 정의되어 있다. color: yellow; // yellow, red, green, blue... 등등 색상명 넣기 2. RGB 값으로 표현 RGB(Red Green Blue)와 같은 형식으로 색을 표현할 수 있다. RGB 각각의 변수에 0에서 255 사이의 정수를 입력하거나 백분율 값을 지정해 색상을 결정한다. background-color:rgb(255, 0, 0); 3. RGBA 값으로 표현 2번의 RGB 방식에서 불투명도까지 조절 가능한 방법이다. rgb 변수 다음에 오는 자리에서 0.0(투명)부터 1.0(불투명) 사이의 값을.. 2022. 8. 23.

[CSS] CSS 단위 종류 및 고찰 CSS 단위 종류 및 단위의 고찰 CSS의 단위의 종류를 설명하는 포스팅입니다. font-size, 단위의 고찰 문자의 글자 크기를 지정하는 속성이며 크기를 명시하지 않을 시 기본 크기는 16px입니다. 1. px 해상도에 따라 상대적으로 달라지는 기본 단위입니다. font-size: 12px; 2. % 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로, 다음과 같이 표현합니다. 특별한 설정이 없다면 16px이 100%가 되므로, 150%는 24px이 됩니다. 부모 요소가 10px이라면 150%는 15px이 되죠. font-size: 150%; 3. em 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로, 다음과 같이 표현합니다. 특별한 설정이 없다면 16px이 1em가 되므로, 1.. 2022. 8. 23.

[CSS] 이미지 스프라이트 + 백그라운드 & IR 효과 이미지 스프라이트 이번 포스팅에서는 지난번에 올렸던 이미지 유형 03 포스팅에서 활용된 이미지 스프라이트 효과와 백그라운드, IR 효과에 대해 심도 있게 다뤄보도록 하겠습니다. 이미지 스프라이트(Image Sprite)란? 여러 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다. 웹을 제작하다보면 사용되는 이미지 수는 기하급수적으로 증가하게 될 것이며 그만큼 웹 브라우저가 서버에 요청해야 할 이미지의 수가 늘어나게 되므로 로딩 시간이 오래 걸리게 된다. 하지만 이미지 스프라이트를 사용한다면 요청해야 할 이미지의 수를 줄여 로딩 시간을 절약하는 것이 가능하다. Figma 예제 다음 예제는 SNS 공유 기능을 위한 아이콘(36x36px 사이즈)을 14px 간격으로 떨어뜨려 아이콘 하나당 50px씩 .. 2022. 8. 20.

[CSS] SCSS & Pug 활용 - 강아지 애니메이션 만들기🐶 SCSS와 Pug를 이용해 강아지 애니메이션 만들기🐶🐾 이번 포스팅에서는 지난 포스팅에서 다뤘던 SCSS와 Pug를 이용하여 강아지 애니메이션을 만들어보도록 하겠다. HTML(Pug) 코드 먼저 HTML 코드는 Pug 방식으로 틀을 짜주도록 하자. .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 위의 Pug 코드를 HTML로 컴파일하기 위의 HTML(Pug) 코드를 보통의 HTML 코드로 컴파일 시킨 코드이.. 2022. 8. 18.

[CSS] Sass(SCSS) 알아보기 Sass(SCSS)란? Sass(=SCSS)에 대해 이해하기 전에 우선 CSS부터 이해하고 넘어가야 한다. CSS란 표현하지 못하는 게 없을 정도로 충분히 훌륭한 언어이긴 하나 치명적 단점 또한 존재한다. CSS는 규모가 커질수록 코드가 복잡해지고 유지보수에 매우 불리하다. Sass는 이러한 CSS의 치명적 단점을 보완하기 위해 나온 CSS 확장 언어이며, CSS에 존재하지 않는 다양한 기능들도 가지고 있다. Sass(SCSS)를 사용해야 하는 이유 Sass(SCSS)는 다음과 같은 장점들을 가지고 있다. · 가독성 : CSS보다 간단명료한 문법으로 CSS를 구조화하여 표현 가능 · 호환성 : 모든 버전의 CSS와 완벽 호환 · 기능성 : 다양한 기능을 제공하며, CSS보다 모든 면에서 뛰어남 · 인지도.. 2022. 8. 18.

[CSS] 기본 문법 - 스타일시트를 불러오는 방법들 정리 CSS 기본 문법 CSS 정의 방법에는 내부 스타일시트, 외부 스타일시트, @import 방식, 인라인 스타일시트 총 4가지가 있다. 이 중 외부 스타일시트가 많이 사용되며 CSS 코드가 적은 경우 내부 스타일시트가 사용된다. 인라인 스타일시트는 잘 사용되지 않지만 우선순위를 높여야 할 때 간혹 사용된다. 또한 CSS에서의 주석 처리는 /* */ 로 한다. 이번 포스팅에서는 4가지 CSS 정의 방법에 대해 살펴보고자 한다. 01. 내부 스타일시트 CSS를 HTML 문서 내에 태그로 기재하여 사용하는 방법으로 코드 양이 적을 때 사용한다. 안녕1 결과 보기 안녕1 02. 외부 스타일시트 스타일 속성을 따로 저장하여 HTML 문서에 파일명으로 연결하는 방법. 스타일 속성은 *.css 확장자 파일로 저장하고 .. 2022. 8. 14.

[CSS] 미디어 쿼리 활용하기 미디어 쿼리(Media Query)란? 사용하는 기기의 해상도에 따라 CSS를 분기시키는 기법이며, PC 이외에도 스마트폰이나 태블릿 PC 등 다양한 기기에서 웹 서핑을 하는 사람들을 위한 반응형 프로젝트에 반드시 필요하다. 01. 최소 가로폭이 1000px, 즉 1000px보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻이다. 태블릿이나 모바일 기기마다 가로폭은 다르며 Chrome의 개발자 도구의 Toggle device toolbar를 누르면 기기마다의 해상도가 등록되어 있고 기기 모델 추가도 가능하다. 모바일 기기별 해상도 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6, 7, 8 375 667 iPhone 6, 7, 8 plus 414 736 iPhone 5 32.. 2022. 8. 14.

[CSS] 비트맵 방식과 벡터 방식 알아보기 비트맵(Bitmap) 방식 서로 다른 점(픽셀)들의 조합으로 그려지는 이미지 표현 방식을 비트맵이라고 하며, 사진 이미지에서 주로 사용된다. 크기를 늘리거나 줄이면 원본 이미지에 손상이 가는 것이 단점이자 큰 특징이며 이에 대해 우리는 '계단현상'이나 '이미지가 깨졌다'라고 흔히 표현한다. 치명적 단점 「계단현상」에도 많이 사용되는 이유는? 이미지를 표시하는 방식 중 가장 컴퓨터에 부담을 덜 주는 구조를 갖기 때문에 웹에서 이미지를 표시할 때에는 주로 비트맵 방식 이미지를 사용한다. 우리가 흔히 사용하는 .jpg, .jpeg, .png, .gif 등이 비트맵 방식이다. 대표적 파일 확장자와 특징 정리 확장자 특징 BMP 픽셀 데이터를 압축하지 않고 그대로 저장. 구조가 간단한 반면 파일 용량이 커진다는 .. 2022. 8. 9.

[CSS] 레이아웃 배치 유형 3가지 알아보기 레이아웃(Layout) 웹을 구성하는 요소들을 보다 알아보기 쉽게 효과적으로 배치시켜주는 작업입니다. 레이아웃의 3가지 유형 레이아웃에는 Float, Flex, Grid라는 총 3가지 유형(방법)이 있습니다. 사용 방법은 아래와 같으며 1번의 경우 정렬하고자 하는 요소에, 2·3번의 경우는 부모 태그에 적습니다. 1. float: left; 2. display: flex; 3. display: grid; 01. Float Float란 '띄우다'라는 의미를 지니며 레이아웃의 틀을 잡을 때 사용됩니다. 레이아웃의 틀을 잡을 때에는 태그가 사용됩니다. 하지만 해당 태그는 block 형식이기 때문에 요소들이 가로로 나란히 정렬될 수 없습니다. float: left; 이때, 나란히 정렬해주고자 하는 요소의 CSS.. 2022. 7. 25.

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바