CSS23 [애니메이션효과 만들기] 움직이는 눈 눈알 움직이기 눈알 움직이기 입니다 ■ HTML 가나다라 ■ CSS *{ margin: 0; padding: 0; box-sizing:border-box; } html,body{ height:100%; overflow:hidden; } .wrapper{ position: absolute; left: 50%; top:50%; width: 369px; height: 547px; transform-style:preserve-3d; transform:translate(-50%,-50%) perspective; } .me{ position: absolute; width: 369px; height: 547px; transform: translatez(80px) scale(0.8); } .me:before, .me:.. 2022. 10. 3. [애니메이션효과 만들기] 움직이는 박스 움직이는 큐브 박스모양이 움직이게 만들겠습니다. ■ 새로운 것들 transform-origin 이 속성은 transform의 변형 기준점을 지정하는 속성입니다. 속성 값은 길이 단위 값과 키워드로 지정할 수 있습니다. x,y,z축 방향으로 촟 3개까지 입력 가능합니다. ■ HTML 메가박스 ■ CSS body { background-color : #c9c9c9; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube{ position: relative; width: 100px; height: 100px; transform-style: preserve-3d; transform.. 2022. 9. 22. [애니메이션효과 만들기] 카드 뒤집기 효과 (근데 3D를 곁들인...) 마우스를 오버하면 뒤집히는 효과 만들기 카드에 마우스 오버시 뒤집히는 효과를 만들어 보겠습니다. 그리고 이 효과에 텍스트는 3D효과까지 곁들여 보겠습니다. ■ 새로운 것들 perspective: 1000px; 원근감을 부여하는 속성인데요. 2D는 x,y좌표로도 충분히 구현 가능하지만, 3D는 x,y,z로 구현해야 합니다. 그래서 이 속성을 부여하게 되면 z를 컨트롤할 수 있게 됩니다. 숫자가 클 수록 멀리서 보는 느낌이 나고, 작아질 수록 가까이 있는 효과입니다 backface-visibility: hidden; 요소의 뒷면이 보일지 말지 결정하는 속성입니다. transform-style : preserve-3d; 자식 요소를 3D공간에 배치하게 해줍니다. 기본값은 flat인데 이건 2D의 2차원에서 부.. 2022. 9. 21. [애니메이션효과 만들기] 미역같이 움직이는 원들 미역같이 움직이게 하기 미역마냥 펄럭이는 원의 집합체(?)를 만들어보겠습니다. html을 pug, css는 scss 사용했습니다. ■ HTML (PUG) div.circle-wrap -for (var x = 1; x 2022. 9. 19. [CSS] CSS로 움직이는 애니메이션(GIF)를 만들어보자 CSS로 움직이는 이미지 만들기 CSS애니메이션을 이용하면 움짤파일을 굳이 사용하지않아도, Gif파일처럼 흔히 말하는 움짤의 형식으로 만들수도 있습니다. 그리고 'Start'와 'Stop'버튼을 이용해 움직이는 이미지를 일시정지 할 수도 있습니다. Start Stop 소스 보기 HTML Start Stop CSS .step { height: 700px; background: #fff; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(img/ani1.jpg); border-radius: 0; position: absolute; background-size: cover; left: 50%; top: 50%;.. 2022. 9. 8. [CSS] 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. 8. [CSS]SVG에 대해 알아보고 애니메이션까지 만들어 보자! SVG란 뭘까 스케일러블 벡터 그래픽스(Scalable Vector Graphics)즉 SVG는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. | 특징 1. 인터넷 익스플로러9 버전 이상부터 지원됩니다. 2. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 3. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. 4. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. | 모양 종류 몇 가지 종류가 미리 내장되어 있습니다. 1).. 2022. 9. 7. [코드펜] 애니메이션 효과 만들어 보기 CSS를 이용해서 요소 숨기기 오늘은 쉬어가는 시간?으로 코드펜을 이용해서 간단한 CSS애니메이션 효과를 만들어 보았습니다. ■ 네모 굴리기 네모를 열심히 굴려봅시다. 그림자는 가상요소를 이용해서 표현해 주었습니다. See the Pen 공굴리기 by Parkhyeonshin (@parkhyeonshin) on CodePen. ■ 로딩처럼 계속 돌아가는 원 만들기 원 두개를 계속 돌려봅시다. 제 머리도 같이 돌아갈거 같네요. .loading의 안에 circle이라는 원 두개를 만들어서 배치한 후 loading의 배경을 없앤상태로 뱅글뱅글 돌리면 마치 원이 돌아가는 시각효과를 가져올 수 있게 됩니다. 뱅글뱅글 돌아가는 속성과 관련된 값은 transform: rotate가 있습니다. See the Pen 로.. 2022. 8. 29. [CSS] 요소 숨기는 방법 : display, opacity, scale, visibility... CSS를 이용해서 요소 숨기기 여러분은 반응형웹을 하면서 요소를 숨기는 상황이 많지 않나요? 저는 그런 상황이 많더라고요! 그래서 여태까지 display:none만 이용했었는데 이 방법 말고도 더 많은 방법이 있단걸 알고 계신가요? 오늘은 CSS를 이용해서 요소를 숨기는 방법에 대해서 알아보겠습니다. ■ display: none; 레이아웃에는 영향을 주지 않습니다. 차지하던 공간자체도 사라지는 개념입니다. ■ visibility: hidden; 차지하던 공간은 유지한채로 컨텐츠만 사라집니다.고로 사라진 공간은 빈 공간으로 남게 됩니다. ■ width: 0; height: 0; 넓이와 높이를 0으로 지정해서 보이지 않게 하는 방법입니다. 제가 실험해보니 안에 텍스트가 들어가면 텍스트는 적용이 안되더라구요?.. 2022. 8. 26. [CSS] CSS에서 색을 표현하는 방법 CSS 색표현방법 CSS를 공부하시면서 가장 많이 사용되는 속성이 뭘까요? 바로 color입니다.🎨 그런데 단순히 color값을 지정한다고 하면 뭐 별거 있어요? "빨간색이면 빨간색이고 노란색이면 노란색이죠" 아니요~ 빨간색도 채도, 명도 등에 따라 정말 많은 색이 존재한답니다. 그렇다면 이 수많은 색상을 도대체 저흰 어떻게 표현해줘야할까요? 오늘은 이 색을 표현하는 방법에 대해 알아볼까 합니다. 01_ 색상명으로 표현하기 제가 소개글에 단순하게 "빨간색은 빨간색이죠"라고 말씀드렸듯이 가장 원초적인 방법입니다. 그냥 저희가 알고있는 색상명을 입력하는 것입니다. CSS에서는 140가지의 이름을 지원한다고 합니다. 일일히 나열할 수는 없어서 몇가지 색상만 예시로 보여드릴게요. ▶ 표현은 다음과 같이 합니다... 2022. 8. 24. [CSS]CSS 기본 단위 : %, vh, vw, em, rem 등등 CSS 단위 우리가 웹을 코딩 후 디자인을 할때 CSS를 사용해야 한다는 것은 당연히 알고 있는 사실인데요. 대부분이 px(픽셀)과 %단위만 알고 있지 다른 단위값도 있다는 것을 아시나요? 심지어 반응형 웹이 기본이 된 지금! 더 알고 있어야겠죠? 오늘은 이 CSS를 좀 더 정교하게 만들 수 있는 CSS의 기본이 되는 단위에 대해 낱낱히 파헤쳐 보겠습니다. | 절대 길이 단위 | 절대 길이 단위는 화면이 어떤 사이즈이던간에 항상 동일한 크기를 지니는 단위값입니다. 그래서 화면 출력보다는 인쇄에 사용할 때 더 유용합니다.단, 반응형을 고려하지 않을시에는 괜찮게 쓰입니다. ■ px 픽셀이라고 불리며, 가장 익숙한 단위입니다. 화면의 크기를 1920x1080이라 가정한다면 px은 가로: 1920개, 세로: 1.. 2022. 8. 24. 이미지 스프라이트 기법과 백그라운드 표현방법, IR효과 이미지 스프라이트와 백그라운드 표현 이 기법은 우리나라에서 아무도 모를 수가 없는 대표 사이트 '네이버'에서 자주 사용되는 기법입니다. 이게 도대체 무슨 기법이길래 네이버에서 사용을 할까요? 같이 알아보자구요! ■ 개념 여러 개의 이미지를 하나의 이미지로 합쳐 관리하는 이미지를 뜻합니다. 웹 페이지가 서버에 이미지를 요청할 때, 사용된 이미지가 많은 경우 당연히 이미지의 수 만큼 요청을 하므로 로딩 시간이 오래 걸리겠죠? 하지만 위의 개념대로 여러개의 이미지가 들어가 있는 하나의 이미지만 요청한다면 로딩시간을 대폭 감소시킬 수 있습니다. ■ 장점 - 많은 이미지를 각각 서버에 요청하면 로딩 시간이 오래 걸릴 수 밖에 없는데, 뭉쳐진 이미지를 하나만 부르면 되므로 로딩시간이 현저히 감소합니다. - 많은 이.. 2022. 8. 21. SCSS SCSS CSS는 많이 들어봤는데 SCSS는 생소하시죠...? 오늘은 이 생소한 친구에 대해 파헤쳐 볼건데요. 쉽게 생각해서 CSS를 좀더 편하게 쓰기 위한 녀석입니다. 이 언어는 Sass라는 언어와 자주 묶여서 설명이 나오는데요. 이 둘은 문법 생김새는 다르지만 사실 같은 파생언어라고 봐도 무방합니다. 그리고 Sass보다는 SCSS의 활용수, 사용자 수 가 많으므로 여기서는 SCSS를 다룰게요. ■ 개념 Sassy CSS란 뜻인데요. 이걸 풀이하자면 문법적으로 멋있는(Sassy) CSS란 뜻이에요. SCSS란 매우 쉽게 말하자면 CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어에요. SCSS는 중첩, 변수 선언, 연산자 등 많은 장점이 있습니다. 그중에서도 가장 대표적.. 2022. 8. 18. 애니메이션 효과 움직이는 강아지 만들기 이번시간에는 CSS를 이용해서 움직이는 강아지 애니메이션를 만들어 보겠습니다.오늘 작업은 코드펜으로만 작업하였고 html소스는 Pug를 이용했고 CSS는 SCSS를 이용해서 작업했습니다. 강아지는 언제봐도 귀엽죠...💕 같이 만들어 봐요!!🐾 ■ 그래서... Pug가 뭔가요? Pug는 html을 조금 더 세련되게 쓸 수 있는 템플릿 언어, express 뷰 엔진입니다. 여기서 템플릿언어란 간단하게 설명하자면 자바스크립트를 사용해서 HTML을 렌더링할 수 있게 해주는 엔진에서 사용되는 언어입니다. ▶ 왜 쓰는거죠? ' 강아지 보고 가실게요' 이렇게 쓰는 것을 '.dog 강아지 보고 가실게요' 처럼 쓸 수 있습니다. 너무 편하죠?사실 어느 템플릿 언어를 사용해도 무방하나 이 Pug라는.. 2022. 8. 18. 미디어 쿼리 미디어 쿼리 해상도에 따라 CSS를 분기시키는 반응형 웹에서는 없어서는 절.대 안되는 기법입니다. 태블릿,모바일기기 마다 가로폭이 다른데 크롬브라우저의 경우 개발자도구(F12)를 열고 Toggle device Toolbar를 눌러 기기마다 해상도를 확인할 수 있고 기기 모델도 추가 가능합니다. 다음 트로이(http://troy.labs.daum.net/)에서는 실제 작동 화면을 확인할 수 있습니다. 미디어 쿼리는 아래와 같은 상황에 사용할 수 있습니다. ▷ CSS @media와 @import .@규칙을 사용해 특정 조건에 따라 스타일을 적용할 때 ▷ HTML요소에 media 특성을 사용해 특정 매체만 가리키게 할때 ▷ Window.matchMedia()와 MediaQueryList.addListener(.. 2022. 8. 14. CSS 기본 문법 CSS 기본 문법 여러분은 같은 음식을 먹더라도 그냥 대~충 차려놓은 음식과 보기 좋은 음식 중 어느 음식이 더 드시고 싶으신가요? 당연히 같은 음식이라면 보기 좋은 음식을 고르시겠죠? 홈페이지 제작도 똑같아요! 이런 겉으로도 보기 좋게 만들어주는 것이 바로 CSS입니다. 이러한 CSS를 정의하는 방법에는 여러 방법이 있는데요. 오늘은 그 방법들에 대해 알아보겠습니다. (공통 사항으로 주석표시는 /* */으로 합니다.) 01_ 내부 스타일 시트 HTML 코드를 작성하는 HTM 문서 내부의 내부스타일시트예제 결과보기 내부스타일시트예제 02_ 외부 스타일 시트 실제 가장 많이 사용되는 방법입니다. 스타일 속성을 따로 *.css확장자를 가진 별도의 파일로 저장하고, HTML에서 태그를 이용해서 선언합니다(=불.. 2022. 8. 13. 벡터와 비트맵 방식 벡터와 비트맵 방식 그래픽 도구에는 페인팅을 위한 프로그램과 드로잉을 위한 프로그램으로 나눌 수 있는데, 2차원에서 이미지를 구성하는 방식은 비트맵이미지와 벡터이미지로 나눌 수 있습니다. 말이 너무 어렵죠? 쉽게 말하자면 결국 이미지 표현 방식입니다. 벡터 방식 점과 점을 연결함으로써 수학적 함수 관계에 의해 이미지를 표현해서 선, 면을 만들어 냅니다. 이런 방식으로 만들어진 선이 두께값과 색상 값, 곡률값을 갖거나 면이 색상 값을 가지면서 그래픽을 만들게 되는 것입니다. 벡터는 좌표계(x,y)로 구성되기 때문에 비트맵과 달리 이미지크기 조절 혹은 변형으로 인해 해상도가 깨지지 않습니다. 아무리 크기를 키워도 깨짐현상이 나타나지 않죠. 그렇기 때문에 크기조절이 자유로워야 하는 로고나 서체, 캐릭터 등을 .. 2022. 8. 9. 레이아웃 배치 5 레이아웃(Layout) 배치 레이아웃 배치 다섯번째 시간입니다. (float, flex, grid에 대한 자세한 설명은 여기를 참고하세요!) 저번 시간에 배웠던 container요소와 기존에 계속해서 학습했던 레이아웃속성값들을 이용해서 구조화 해볼게요! 그리고 flex에도 grid처럼 시멘틱태그를 활용해서 구조화 해 볼 예정입니다. 01_ float을 이용한 레이아웃 foat:left 속성을 이용해 좌측 빈 공간부터 차곡 차곡 채워나갑니다. float로 인해 깨지는 영역은 clearfix를 활용해서 해결합니다. 반응형 웹을 구현하기 위해서 width와 height의 값을 조정해줍니다. * { margin: 0; padding: 0; } #wrap { width: 100%; } #header { width.. 2022. 7. 29. 레이아웃 배치 4 레이아웃(Layout) 배치 레이아웃 배치 네번째 시간입니다. 주요 콘텐츠들을 가운데로 배치하고 화면이 늘어나도 뒷요소들을 계속해서 표현해주는 구조입니다. 요즘 실제 웹들은 이러한 구조를 가장 많이 사용하고 있습니다. container라는 부모요소를 활용한 레이아웃 이번 구조는 따로 레이아웃에 관련된 속성값을 부여할 필요가 없는 구조입니다. 가운데 주요 콘텐츠 요소들을 container로 묶어 설정합니다. container의 높이값은 직접 입력해도 되지만, height: inherit를 이용해 부모요소의 높이값을 그대로 상속받도록 합니다. *{ margin: 0; padding: 0; } #header{ height: 100px; background-color: #E0F2F1; } #nav{ height.. 2022. 7. 29. 레이아웃 배치 3 레이아웃(Layout) 배치 레이아웃 배치 세번째 시간입니다. (float, flex, grid에 대한 자세한 설명은 여기를 참고하세요!) 특이사항으로, flex사용 시 요소들을 한번 더 묶어서 구조화 합니다. 또 태블릿 이후의 해상도에서는 사라지는 요소가 있는데 이는 display:none을 이용합니다. 01_ float을 이용한 레이아웃 foat:left 속성을 이용해 좌측 빈 공간부터 차곡 차곡 채워나갑니다. 이후 아래 요소가 보이지 않는 버그는 clear:both속성을 사용하여 해결하였습니다. 반응형 웹을 구현하기 위해서 width와 height의 값을 조정해줍니다. *{ margin: 0; } body{ background-color: #E1F5FE; } #wrap{ width: 1200px; .. 2022. 7. 29. 레이아웃 배치 2 레이아웃(Layout) 배치 저번시간과 마찬가지로 기존에 배웠던 float, flex, grid를 활용하여 실제 레이아웃 배치를 해봅시다. (자세한 설명은 여기를 참고하세요!) 두번째 구조는 1번 구조에서 한개가 더 추가된 구조이며, 반응형 웹 적용시 속성값을 변경해주는 구조입니다. 01_ float을 이용한 레이아웃 foat:left 속성을 이용해 좌측 빈 공간부터 차곡 차곡 채워나갑니다. 이후 아래 요소가 보이지 않는 버그는 clear:both속성을 사용하여 해결하였습니다. 반응형 웹을 구현하기 위해서 width와 height의 값을 조정해줍니다. *{ margin: 0; } body{ background-color: #E8F5E9; } #wrap{ width: 1200px; margin: 0 aut.. 2022. 7. 29. 레이아웃 배치 1 레이아웃(Layout) 배치 오늘은 기존에 배웠던 float, flex, grid를 활용하여 실제 레이아웃 배치를 해봅시다. (자세한 설명은 여기를 참고하세요!) 첫번째 구조는 가장 기본이 되는 구조입니다. 01_ float을 이용한 레이아웃 foat:left 속성을 이용해 좌측 빈 공간부터 차곡 차곡 채워나갑니다. 이후 아래 요소가 보이지 않는 버그는 clear:both속성을 사용하여 해결하였습니다. 반응형 웹을 구현하기 위해서 모바일사이즈에서는 aside와 section의 width값을 100%로 조정해줍니다. *{ margin: 0; } body{ background-color: #FFF3E0; } #wrap{ width: 1200px; margin: 0 auto; } #header{ width: .. 2022. 7. 29. 레이아웃 기본 익히기 레이아웃(Layout) 기본 레이아웃 배치시 사용할 수 있는 방법으로는 float, flex, grid 방식이 있습니다. 01_ float 특정 요소(elemnet)를 떠있게, 부유하게 만드는 속성입니다. 즉, 박스를 왼쪽(left) 또는 오른쪽(right)으로 배치시키는 방법입니다. flaot를 사용할시 영역이 깨지는 버그(부모요소가 자식요소의 높이를 인지못함)가 있는데, 이 버그는 1) 깨지는 영역에 'clear: both' 속성을 사용합니다.(비추) 2) 부모 요소 영역에 overflow:hidden을 설정합니다. 3) flaot을 사용한 부모요소에 clearfix를 설정합니다 float를 취소할 때에는 float:none; 합니다. 속성 값 속성 설명 left 좌측 빈공간부터 채워 내려옴 righ.. 2022. 7. 25. 이전 1 다음 반응형
