본문 바로가기

CSS22

CSS 애니메이션 만들기 : 마우스를 따라가는 눈알 CSS 애니메이션 : 마우스를 따라가는 눈알 오늘은 마우스를 따라 눈알이 빙글빙글 돌아가는 애니메이션을 만들어 보도록 하겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen eye by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 EYE wrapper 안에 card, card 안에 me와 text, me 안에 eye 클래스를 가진 div 박스를 만들어 줍니다. text는 자유롭게 작성합니다. 2. CSS 소스 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } .wrapper { position: absolute; left: 50%.. 2022. 9. 26.

CSS 애니메이션 만들기 : 로딩 애니메이션 CSS 애니메이션 : 로딩 애니메이션 오늘은 로딩 화면처럼 빙글빙글 돌아가는 애니메이션을 만들어 보도록 하겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen animation 몇번째지... by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 div 안에 10개의 div 박스를 만들어 줍니다. 2. CSS 소스 body { background-color: pink; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; animation: spin 0.6s linear infinite reverse; } .b.. 2022. 9. 24.

CSS 애니메이션 만들기 : 3D 박스 애니메이션 CSS 애니메이션 : 3D 박스 애니메이션 오늘은 움직이면서 크기가 변형되는 3D 박스를 만들어 보겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen Untitled by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 소름 cube class를 가진 div 박스를 하나 만들어 주고, 그 안에 div 박스 6개를 작업해 줍니다. div 박스 6개는 정육면체의 각각의 면입니다. 원하는 문구를 작성하면 됩니다. 2. CSS 소스 body { background-color: lavender; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; .. 2022. 9. 22.

CSS 애니메이션 만들기 : 통통 튀는 글자 CSS 애니메이션 : 통통 튀는 글자 오늘은 글자들이 딜레이를 두고 통통 튀는 듯한 애니메이션이 나타나도록 작업해 보겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen Text animation02 by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 M I N J E O N G h1 태그 안에 원하는 글자 수만큼 span 태그를 작성하고, 글자를 한 자씩 입력해 줍니다. 2. CSS 소스 html, body { width: 100%; height: 100%; background: linear-gradient(140deg, skyblue 0%, plum 100%); display: flex; justify-content: center; align-items:.. 2022. 9. 22.

CSS 애니메이션 만들기 : 카드 뒤집기 CSS 애니메이션 : 카드 뒤집기 애니메이션 오늘은 마우스를 오버했을 때 카드가 뒤집히는 듯한 애니메이션이 나타나도록 작업해 보겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen hoveranimation by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 Mouse Hover Effect 마우스를 올리면 Up Mouse Hover Effect 마우스를 내리면 Down Mouse Hover Effect 마우스를 올리면 to Right Mouse Hover Effect 마우스를 내리면 to Left HTML 소스는 전체에 해당하는 hover__wrap 안에 hover__updown, hover__leftright 두 개의 div 박스를 만들어 줍니다. 그 안.. 2022. 9. 20.

CSS 애니메이션 만들기 : 일렁이는 애니메이션 CSS 애니메이션 : 일렁이는 애니메이션 오늘은 CSS의 다양한 속성을 이용하여 애니메이션을 만들어 보도록 하겠습니다. 애니메이션 이름을 뭐라고 해야 할지 모르겠네요. 작업해볼 애니메이션은 다음과 같습니다. See the Pen Untitled by mj0614k (@mj0614k) on CodePen. 1. HTML(PUG) 소스 div.circle-wrap -for (var x = 1; x 2022. 9. 19.

CSS 애니메이션 만들기 : GIF 이미지 애니메이션 구현하기 CSS 애니메이션 : GIF 이미지 애니메이션 구현하기 오늘은 조금 다른 방식으로, GIF 이미지를 애니메이션으로 구현하는 방법을 알아보겠습니다. 1. 애니메이션을 만들 이미지 찾기 먼저, 어떠한 GIF 이미지를 애니메이션으로 만들 것인지 결정합니다. 2. 애니메이션의 프레임 나열하기 Photoshop에서 GIF 이미지를 가져와 Timeline 창을 띄우면, GIF를 이루고 있는 각각의 레이어들이 나타납니다. 여우 이미지의 크기는 1600px * 1200px이며, 레이어는 총 18개가 있었습니다. GIF의 이미지의 너비(1600px) X 레이어 수(18)의 값(28,800px)을 구해줍니다. 이후, width값이 28,800px, height값이 1200px인 새로운 창을 만들고, 여우의 움직임에 해당하.. 2022. 9. 8.

CSS 애니메이션 만들기 : 애니메이션 기초 CSS 애니메이션 만들기 : 기초 애니메이션 오늘은 CSS의 다양한 애니메이션과 관련된 속성을 알아보고, 기초적인 애니메이션을 만들어 보도록 하겠습니다. ANIMATION 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션 끝나고 난 뒤 어떤 값을 적용할지.. 2022. 9. 8.

CSS 애니메이션 만들기 : SVG CSS : SVG 애니메이션 만들기 SVG로 도형 만드는 방법을 알게 되었으니, 더 나아가 SVG에 애니메이션 효과를 주는 방법에 대하여 알아보도록 하겠습니다. 1. HTML로 도형 만들기 2. CSS로 애니메이션 효과 추가하기 stroke-dasharray 속성은 선을 대쉬 형태로 만들며, 값을 부여한 만큼 대쉬 길이가 늘어납니다. 만약 svg의 path 길이가 100이고, dasharray의 길이를 50으로 설정하면, SVG는 절반만 보이게 되는 것입니다. 한편, stroke-dashoffset 속성은 그림이 어떤 부분에서부터 시작할지 정하는 속성입니다. .ani1 { width: 100px; height: 100px; x: 30px; y: 30px; fill: none; stroke: #880E41.. 2022. 9. 8.

CSS : SVG 도형 만들기 CSS : SVG 도형 만들기 오늘은 CSS로 여러 가지 SVG 도형을 만드는 방법에 대하여 알아보도록 하겠습니다. SVG란? 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM .. 2022. 9. 7.

CSS 애니메이션 만들기 : 공 튀기기 CSS 애니메이션 : 공 튀기기 오늘은 CSS의 다양한 속성을 이용하여 애니메이션을 만들어 보도록 하겠습니다. 작업해볼 애니메이션은 다음과 같습니다. 조랭이떡 같네요. See the Pen balls by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 잔상을 포함하여 다섯 개의 공을 만들 것이기 때문에, 다섯 개의 wrapper 클래스를 가진 div 박스를 만들어 줍니다. 2. CSS 소스 * { box-sizing: border-box; } body { background: linear-gradient(to top, pink 0%, skyblue 100%); width: 100vw; height: 100vh; display: flex; justify-content: cent.. 2022. 9. 2.

CSS 애니메이션 만들기 : 굴러가는 네모 CSS 애니메이션 : 굴러가는 단무지 오늘은 CSS의 다양한 속성을 이용하여 애니메이션을 만들어 보도록 하겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen animation01 by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 단무지의 그림자는 가상요소로 작업해줄 것이기 때문에, HTML 소스는 box 클래스를 가진 div 박스 하나로 충분합니다. 2. CSS 소스 body { height: 100vh; background-image: linear-gradient(to top, skyblue, pink); } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; .. 2022. 8. 29.

CSS 애니메이션 만들기 : 빙글빙글 돌아가는 원 CSS 애니메이션 : 빙글빙글 돌아가는 원 오늘은 CSS의 다양한 속성을 이용하여 애니메이션을 만들어 보도록 하겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen animation02 by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 돌아가는 원을 두 개 만들 것이기 때문에, circle 이름을 가진 span 태그를 두 개 작업해 주었습니다. 2. CSS 소스 body { height: 100vh; background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 1.. 2022. 8. 29.

CSS : 요소 숨기기 CSS : 요소 숨기기 우리가 코딩을 할 때, 때때로 웹 접근성 준수, 탭 효과 등을 이유로 어떠한 요소가 화면에서 보이지 않도록 설정해야 할 필요가 있습니다. 오늘은 CSS로 요소를 숨기는 5가지 방법에 대하여 알아보겠습니다. 1. display로 속성 주기 display: none; display는 요소가 화면에 보여지는 방식을 결정하는 속성입니다. display: none; 속성을 추가하면 요소를 숨길 수 있습니다. 이 방법은 애니메이션을 사용할 수 없고, 요소가 차지하는 영역이 사라집니다. 2. opacity 속성 주기 opacity: 0; opacity는 요소의 투명도를 의미합니다. 요소의 투명도를 0으로 처리하는 이 방식은, 요소가 불투명해지는 애니메이션을 사용할 수 있습니다. 요소가 차지하는.. 2022. 8. 25.

CSS : 색상 표현 방법 색상 표현 방법 CSS에서 색상을 표현하는 방법에는 여러 가지가 있습니다. 대표적인 방법 몇 가지를 알아보도록 하겠습니다. 1. 색상명으로 표현 색상의 이름을 나타내는 방법으로, 브라우저에는 약 140가지의 색상 이름들이 정의되어 있습니다. 적용 예시를 살펴보겠습니다. 멋진 빨간색 글자 멋진 주황색 글자 멋진 파란색 글자 멋진 빨간색 글자 멋진 초록색 글자 멋진 파란색 글자 2. HEX값으로 표현 #RRGGBB 형식의 16진수 색상 값을 이용하여 표현하는 방법입니다. RR, GG, BB는 각각 red, green, blue를 나타내는 값으로, 16진수 00에서 FF사이의 값으로 결정됩니다. 적용 예시를 살펴보겠습니다. 노잼 검정색 글자 촌스러운 분홍색 글자 민트색 같은 글자 아무렇게나 써본 글자 노잼 검.. 2022. 8. 23.

CSS : 단위 CSS : 단위 오늘은 CSS에서 유용하게 사용하는 단위에 대하여 알아보겠습니다. 참고로, 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. px 해상도에 따라 상대적으로 달라지는 기본 단위로서, 다음과 같이 표현합니다. font-size: 12px; % 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로서, 다음과 같이 표현합니다. font-size: 150%; 특별한 설정이 없다면 16px이 100%가 되므로, 150%는 24px이 됩니다. 만약 부모 요소가 10px이었다면 150%는 15px이 될 것입니다. em 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위로서, 다음과 같이 표현합니다. font-size: 1.5em; 특별한 설정이 없다면 16px이 1em이.. 2022. 8. 23.

CSS : 이미지 스프라이트(image sprite) 이미지 스프라이트(Image Sprite) 오늘은 이미지 스프라이트 기법에 대하여 알아보겠습니다. 이미지 스프라이트란? 이미지 스프라이트란, 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다. 하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 됩니다. 이럴 때, 이미지 스프라이트를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다. 또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지 파일만을 관리하면 되므로, 매우 간편합니다. 이미지 스프라이트 만들기.. 2022. 8. 22.

CSS : SCSS 알아보기 CSS : SCSS 알아보기 CSS는 비교적 배우기 쉬운 편이지만, 불편한 점이 많습니다. 프로젝트의 규모가 커질수록, 불필요한 선택자의 과용, 연산 기능의 한계, 구문의 부재 등 불편을 느낄 것입니다. 그 불편을 해소하기 위해, 우리는 CSS Preprocessor라고 불리우는 Sass, Less, SCSS 등의 기능을 사용할 수 있습니다. 오늘은 그 중, SCSS에 대하여 알아보겠습니다. SCSS란? CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등 디자인 요소를 추가할 때 사용하는 전처리 과정입니다. 프로젝트 규모가 커지면 CSS는 불가피하게 가독성이 떨어지는 등 유지보수의 어려움을 주는 요소가 됩니다. 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 .. 2022. 8. 18.

CSS : 애니메이션 만들기 : 꼬리를 흔드는 강아지 꼬리를 흔드는 강아지 애니메이션 만들기 CSS 효과로 다음과 같이 꼬리를 흔드는 강아지 애니메이션을 만들어 보도록 하겠습니다. See the Pen CSS Dog by mj0614k (@mj0614k) on CodePen. 이번에는 VSCode 대신, Codepen을 활용하여 HTML을 Pug로, CSS를 SCSS로 작업해 주었습니다. Codepen 작업은 작업물을 실시간으로 볼 수 있고, 간편하게 작성할 수 있어 편리하지만, 정렬에 주의해야 하고, 오류를 찾기가 힘들다는 단점이 있습니다. 원본 HTML 소스와 CSS 소스는 아래에서 확인하실 수 있습니다. HTML 소스 먼저, HTML로 div 박스를 만들어 강아지의 몸을 작업해 줍니다. 강아지의 전체인 dog는 body와 torso, head로 나누어.. 2022. 8. 18.

CSS : 미디어쿼리(media query) 미디어쿼리 뷰포트의 해상도에 따라 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 .. 2022. 8. 15.

CSS : 기본 문법 CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 주로 사용합니다. 인라인 스타일시트는 대체로 거의 사용하지 않으나, 우선순위가 가장 높기 때문에 필요한 경우에는 편리하게 사용할 수 있습니다. 참고로, CSS에서의 주석은 /* */로 표현합니다. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 멋진 빨간색 글자 결과 보기 멋진 빨간색 글자 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. .. 2022. 8. 12.

CSS : 비트맵 방식과 벡터 방식 비트맵 방식과 벡터 방식 오늘은 비트맵 방식과 벡터 방식의 차이에 대하여 알아보겠습니다. 그 전에, 픽셀(Pixel)이라는 개념을 알아야 합니다. 픽셀이란? 픽셀이란 Picture(그림) + Element(원소)의 합성어로서, 화소라고도 하는 화면을 구성하는 가장 기본이 되는 단위입니다. BMP, GIF, JPEG, PNG가 픽셀을 사용하는 대표적인 포맷으로, 이를 '비트맵 이미지'라고 합니다. 비트맵 방식이란? 비트맵 방식은 각 픽셀에 저장된 비트 정보가 집합된 것입니다. 비트맵은 벡터와 달리 픽셀의 점 하나하나가 이미지를 이루는 요소이기 때문에 벡터에 비하여 정교한 이미지 표현이 가능합니다. 픽셀의 수가 많아질수록 화질은 뛰어나지만, 용량 또한 커지게 됩니다. 또한, 비트맵 이미지는 크기를 확대하거나.. 2022. 8. 9.

이전 1 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바