CSS23 [CSS] "경규옹 미국ver." 을 만들어봅시다! 📎codepen을 이용해서 눈에는 눈 미쿡인~Joe아저씨의 눈을 소개합니다! Joe아저씨의 눈은 마치 이경규아저씨처럼 자유자재로 움직일 수 있습니다. 지금 바로 미국판 이경규아저씨 보시죠!👀 See the Pen Untitled by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️HTML 카드부분과 인물, 눈, 텍스트 부분으로 틀을 짜줍니다. I'm Joe ✔️CSS 사진에 효과를 넣어줍니다. *{ margin: 0; padding: 0; box-sizing:border-box; } html, body { height: 100%; overflow:hidden; } .wrapper { position:absolute; left:50%; top:50%.. 2022. 9. 26. [CSS] "로딩중" 을 만들어봅시다! 📎codepen을 이용해서 자칫 재빠른 한국인을 화나게 할 수 있는(?) 로딩 동그라미를 만들어봅시다! 동그라미 여러개로 로딩화면을 만들어보도록 할텐데 로딩화면과 흡사하여 한숨이 푹 쉬어질 수 있으니 주의바랍니다.😤 See the Pen loading screen by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️HTML 여러개의 동그라미를 만들어줍니다. ✔️CSS ball에 애니메이션과 스타일을 입혀줍니다. body { background-color: skyblue; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px;.. 2022. 9. 26. [CSS] "고무고무💪🏻 박스" 를 만들어봅시다! 📎codepen을 이용해서 "고무고무 박스"를 만들어봅시다! 이번 애니메이션은 박스가 원피스에 나오는 루피 팔마냥 쭈욱 쫘악 늘어나는 박스입니다. 제 height도 저렇게 늘어났으면 좋겠습니다...🙏🏻 See the Pen Untitled by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️HTML 정육면체이므로 div박스를 여섯개 만들어줍니다. 징징이😖 ✔️CSS nth-child를 통해 각 면의 변형값과 애니메이션을 만들어줍니다. body { background-color: skyblue; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content.. 2022. 9. 22. [CSS] "⭐️뽀짝귀염⭐️ 🤪산만정신🤪 텍스트" 를 만들어봅시다! 🧷 codepen을 이용해서 ⭐️뽀짝귀염⭐️ 🤪산만정신🤪 텍스트를 만들어봅시다! 글자 하나하나 통통튀는 효과를 만들어보도록 하겠습니다. See the Pen Untitled by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️HTML 글자 하나하나 효과를 주어야 하기 때문에 span태그로 글자 하나하나 적어줍니다. n o e y h e y h K ✔️CSS 글자가 하나하나 통통 튀는 효과를 넣어줍니다. html,body { width: 100%; height: 100%; background: linear-gradient(140deg, skyblue 0%, beige 100%); display: flex; justify-content: center;.. 2022. 9. 22. [CSS] "마우스를 오버했을 때 3d느낌으로 회전하는 사진" 을 만들어봅시다! codepen을 이용해서 3d 마우스 오버효과를 곁들인 빙글뱅글 동물사진을 만들어봅시다! 마우스를 올리고 내릴 때의 오버효과를 3d효과를 적용하여 만들어봅시다!:) 참고로 사진의 주제는 가끔 사람같아보이는 동물들입니다. 🐴❤︎ See the Pen MouseHoverEffect by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️HTML up down 했을 때의 앞부분(front)와 뒷부분(back)과 To right, left했을 때 앞면(front)과 뒷면(back)부분의 틀을 작성해줍니다. Mouse Hover Effect 마우스 올리면 up↑ Mouse Hover Effect 마우스 내리면 down↓ Mouse Hover Effect 마우스.. 2022. 9. 20. [CSS] "한 웨이브 하는 동그라미" 를 만들어봅시다! codepen을 이용해서 저보다(?) 웨이브 잘하는 동그라미⚪️를 만들어봅시다! 동그라미 여러개가 작아졌다 커졌다를 반복하면서 웨이브하는 느낌을 PUG와 SCSS의 animation 기능을 이용하여 만들어봅시다. See the Pen Untitled by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️PUG 동그라미 여러개를 가로 세로 12개씩 만들어줍니다. 이 때 정렬을 잘 맞춰 주어야 오류가 나지 않습니다. div.circle-wrap - for (var x = 1; x 2022. 9. 19. [CSS] CSS animation Start Stop timing-function Start border-radius step-start step-end steps(4, start) steps(4, end) steps(10, start) steps(10, start) .timing6.show {animation: move 4s 1 step-start;} .timing7.show {animation: move 4s 1 step-end;} .timing8.show {animation: move 4s 1 steps(4, start);} .timing9.show {animation: move 4s 1 steps(4, end);} .timing10.show {animation: move 4s 1 steps(10, start);} .timing11.. 2022. 9. 8. [CSS] CSS intro 📎 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. 8. [CSS] SVG animation CSS를 이용해서 text animation을 만들어봅시다! @keyframes를 이용하여 애니메이션을 줍니다. See the Pen Text Animation by KwonHyehyeon (@kwonhyehyeon) on CodePen. 애니메이션 코드 소스를 알아봅시다.💻 ✔️HTML noeyheyh ✔️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.. 2022. 9. 8. [CSS] 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. 8. [CSS] "통통튀는 공" 을 만들어봅시다! 🧷 codepen을 이용해서 어디로 튈지 모르는 공🏐을 만들어봅시다! 공과 공의 잔상(?)까지 HTML과 CSS의 animation 기능을 이용하여 만들어봅시다. See the Pen Untitled by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️HTML 공 5개를 만들어 주어야 합니다. ✔️CSS nth-of-type()을 통해서 공의 순번을 정해준 후 각각의 애니메이션 효과를 지정해줍니다. * { box-sizing:border-box } body { background:linear-gradient(to top, #a18ca1 0%, #fbc2eb 100%); width:100vw; height:100vh; display: flex; ju.. 2022. 9. 2. [CSS] "동 to the 그 to the 라미 애니메이션" 을 만들어봅시다! codepen을 이용해서 ⚫️동 to the 그 to the 라미~⚪️를 만들어봅시다! 무한으로 회전하는 동그라미 두 개를 HTML과 CSS의 animation 기능을 이용하여 만들어봅시다. 대한민국 국기 느낌으로 만들었는데 이걸 보고 국뽕이 차오르신다면 당신은 진정한 한국인🇰🇷입니다^^. See the Pen circle by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️HTML 동그라미 두 개의 틀만 만들어주면 됩니다. ✔️CSS ∙ linear-gradient : [필수] 시작 색상, 끝 색상 / linear-gradient(각도(deg), 색상1, 색상2 , ..., ) ∙ animation : 이름지정, 애니메이션 시간, linear(일.. 2022. 8. 29. [CSS] "네모 애니메이션" 을 만들어봅시다! codepen을 이용해서 🔸데구르르 박스🔸를 만들어봅시다! 귀염뽀짝한 박스를 HTML과 CSS를 이용하고 CSS에 animation 기능을 추가하여 움직이도록 만들어봅시다. See the Pen popping Box by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️HTML box하나만 만들면 됩니다. ✔️CSS ∙ linear-gradient : [필수] 시작 색상, 끝 색상 / linear-gradient(방향, 색상1, 색상2 , ..., ) ∙ animation : 이름지정, 애니메이션 시간, linear(일정한 속도로 진행), 무한반복 body { height: 100vh; background-image: linear-gradient(t.. 2022. 8. 29. [CSS] "요소 숨기는 방법" 에 대해 알아봅시다! CSS 요소 숨기는 방법에 대해 알아봅시다! 📎 CSS 요소 숨기기 종류 1. display :none; (애니메이션 X, 영역X) 2. opacity : 0; (애니메이션 O, 영역O) 3. visibility: hidden; (애니메이션 X, 영역X) 4. transform: scale(0); (애니메이션 O, 영역X) 5. width: 0; height: 0; (애니메이션 X, 영역X) : blind ➰display :none; 객체를 안 보이게 하는 첫번째 방법으로, display에 none을 넣어주면 눈에도 안 보이고 자리도 차지하지 않고 숨어있게 합니다. ※ 객체를 안 보이게 하는 display방법 중에 hidden도 있습니다. none과 hidden 의 차이는 공간부분에서 차이가 있는데 no.. 2022. 8. 26. [CSS] "색상 표현 방법" 에 대해 알아봅시다! CSS 색깔을 지정하는 방법에 대해 알아봅시다! 📎 CSS 색깔을 지정하는 4가지 방법 📌 이름 📌 16진수 📌 RGB 또는 RGBA 📌 HSL 또는 HSLA ➰이름을 사용해서... 색상의 이름을 직접 써서 컬러를 지정할 수 있습니다. 브라우저가 인식할 수 있는 색상 이름은 대략 147개입니다. 👍🏻 : 쉽게 색상 지정 가능 👎🏻 : 표현 색상 한정적, 이름 외우고 있어야 함 See the Pen 색상01 by KwonHyehyeon (@kwonhyehyeon) on CodePen. ➰16진수를 사용해서... 2자리씩 3개의 16진수로 색상을 표현합니다. #00(빨강)FF(초록)99(파랑) 여기서 2자리씩 차지하고 있는 3개의 16진수는 각각 RED, GREEN, BLUE를 의미합니다. 16진수로 색상을.. 2022. 8. 24. [CSS] "단위(Unit)" 에 대해 알아봅시다! CSS 단위(Unit) 대해 알아봅시다! 📎 CSS 단위 종류 CSS에서 사용되는 길이는 절대 길이 단위와 상대 길이 단위 두 가지 유형이 있습니다. ➰절대 길이 단위 : 항상 동일한 크기(다른 것과 관련X) 단위 이름 값 cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q 4분의 1 밀리리터 1Q = 1/40th of 1cm in 인치 1in = 2.54cm = 96px pc Picas 1pc = 1/6th of 1in pt 포인트 1pt = 1/72th of 1in ⭐️px⭐️ 픽셀 1px = 1/96th of 1in 위와 같은 값의 대부분은 화면 출력이 아닌 인쇄에 사용될 때 더 유용합니다. px(픽셀)만 보통 유일하게 화면에서 사용되는 절대 길이 단위입.. 2022. 8. 24. [CSS] "이미지 스프라이트 / ir효과 / 백그라운드 표현" 에 대해 알아봅시다! CSS : 이미지 스프라이트 / 백그라운드 표현 / IR 효과에 대해 알아봅시다! 📎이미지 스프라이트(Image Sprite)란? : 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법입니다. : 간단하게 말해서, 하나로 뭉친 파일을 다운 받아 필요 부분만 똑 떼어 사용하는 기법입니다. : 실제로 네이버에서는 메인페이지에서 이 기법을 굉장히 광범위하게 사용하고 있습니다. [참고] 한 칸의 크기를 50cm로 잡아주었으며 아이콘 크기는 36cm로 정해주었으며 아이콘 안 이미지의 크기는 20cm로 정해주었습니다.(가로, 세로 동일) ➰왜 사용하는 걸까? (장점) 📌 서버로의 요청 횟수를 줄여 사이트 로딩 속도를 줄여줌 📌 많은 이미지 파.. 2022. 8. 21. [CSS] PUG와 SCSS를 활용하여 강아지 애니메이션을 만들어 봅시다! SCSS를 이용해서 🐶댕청미 강아지 애니메이션🐶을 만들어봅시다! 코드펜을 이용하여 강아지 애니메이션를 만들 때 HTML은 Pug를 이용해서, CSS는 SCSS를 이용할 수 있습니다. See the Pen CSS Dog by KwonHyehyeon (@kwonhyehyeon) on CodePen. 애니메이션 코드 소스를 알아봅시다.💻 ✔️HTML Pug코드는 View Compiled HTML을 눌러주면 밑과 같이 바뀝니다. ✔️CSS SCSS코드는 View Compiled CSS를 눌러주면 밑과 같이 바뀝니다. body { display: flex; flex-direction: column; justify-content: center; align-items: center; } html, body { bac.. 2022. 8. 18. [CSS] "SASS ⊃ Sass, SCSS" 에 대해 알아봅시다! SASS에 대해 알아봅시다! : CSS의 단점을 보완하기 위해 만든 CSS 전처리기입니다.보통 CSS를 사용하다보면 단순 반복되는 부분이 많은 등, 불편함이 느껴지기 마련인데, SASS는 이 부분을 거의 완전하게 해소시켜주는 스타일 언어입니다. SASS에는 Sass와 SCSS가 있습니다. : CSS의 확장팩 같은 언어이기 때문에 CSS 파일 그 자체를 SCSS로 확장자만 바꾸어줘도 정삭적으로 작동합니다. 다만, SASS자체는 개발자용 언어이기 때문에 웹브라우저가 읽을 수 없습니다. 따라서, 중간에 컴파일러를 거쳐서 CSS로 변환하여 HTML에 연결해야 합니다. ★ CSS의 단점 ★ : 선택자(Selector)을 만들 때 매번 불필요한 부모요소 선택자를 적어야 합니다. : function 같은게 없으니, .. 2022. 8. 18. [CSS] 미디어쿼리에 대해 알아보자! 미디어쿼리(media query)란 무엇일까? 미디어쿼리란, 뷰포트의 해상도에 따라 CSS를 분리시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. ▶︎ 종류 01. 02. @media 03. media query를 흉내내는 script 01. 1000) $('body').addClass('mob').removeClass('pc'); else $('body').removeClass('mob').addClass('pc'); } 창의 가로 크기를 재고 1000px 보다 좁으면 body에 mob 클래스를 붙이고 pc 클래스는 제거하고, 1000px 이상이면 body에 pc 클래스를 붙이고, mob 클래스는 제거한다는 뜻입니다. $(window).resize(function() { initLayo.. 2022. 8. 16. [CSS] 기본 문법 정리 CSS 기본 문법에 대해 알아봅시다! ★CSS 정의하는 방법★ 01. 내부 스타일시트 : 간단한 스타일 사용시 02. 외부 스타일시트 : 많이 사용하는 편 03. 인라인 스타일시트 : 거의 사용하지 않지만 우선순위가 가장 높기에 꼭 필요한 경우 편리하게 사용 가능 ※ CSS 주석 : /* */ 01. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 예제 우리를 기쁘게 하는 것들. 결과보기 02. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 스타일은 *.css확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. 내부 스타일시트는 그 스타일이 기술된 페이지.. 2022. 8. 16. [CSS] 비트맵(Bitmap)방식과 벡터(Vector)방식에 대해 알아보자! 비트맵(Bitmap)방식과 벡터(Vector)방식은 무엇일까? 이미지 확장자를 선택하는 것은 비트맵과 벡터 이미지 중 어떤 형식으로 저장할지를 선택하는 것입니다. 포토샵과 일러스트레이터 중 결정하는 것도 비트맵과 벡터 중에서 선택하는 것입니다. 이번 포스팅을 통해 비트맵 방식과 벡터 방식 차이를 배워봅시다! ▶ 비트맵(Bitmap) 방식이란? 비트맵(Bitmap) 방식이란, 사각형 격자로 된 작은 점(픽셀)들이 모여서 표시된 이미지를 의미합니다. 쉽게 말해 픽셀에 있는 비트들이 모여 있는 방식이라고 보면 됩니다. 비트맵 이미지는 래스터 이미지라는 다른 표현으로 부르기도 합니다. 1픽셀마다 다른 데이터들을 가지고 있으며 서로 조합하여 하나의 이미지가 완성됩니다. 비트맵 이미지는 섬세한 색상을 표현해야 하는.. 2022. 8. 9. [CSS] 레이아웃(layout)에 대해 알아보자! 레이아웃(layout) CSS에서 "layout" 이란, 다양한 요소들들 적절한 위치에 배치하고 정렬할 수 있도록 하는 기능을 뜻합니다. 작성한 순서대로 입력되는 HTML만으로는 우리가 원하는 위치에 원하는 정보를 배치할 수 없기 때문에 CSS의 layout을 이용하는 것입니다. 레이아웃 종류 1. float 방법 float이란, 페이지에서 이미지와 텍스트를 인라인으로 어우러지게 할 수 있는 기능입니다.(구버전) ※ float 속성을 적용하면 그 다음 요소에도 float가 적용되어 버그가 생길 수 있습니다. 이럴 때 사용할 수 있는 속성이 "clear" 입니다. 사용 방법 div태그는 block특성을 가지고 있기 때문에 세로로 나타납니다. 이를 가로로 정렬시켜주는 것이 float입니다. float: le.. 2022. 7. 25. 이전 1 다음
