CSS23 [CSS]애니메이션08 애니메이션07 오늘은 아래와 같이 마우스 움직임이나 키보드 방향키에 따라 눈알과 카드가 돌아가는 애니메이션을 만들어 보았습니다. See the Pen Untitled by Kim-chanmi (@kim-chanmi) on CodePen. HTML ABCDE 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-style: pre.. 2022. 9. 26. [CSS]애니메이션07 애니메이션07 오늘은 아래와 같이 동그라미가 원을 그리며 돌아가는 애니메이션을 만들어 보았습니다. See the Pen animation07 by Kim-chanmi (@kim-chanmi) on CodePen. HTML 큰 div태그에 class="loader"를 입력합니다. loader 안에 div박스 10개를 만들어줍니다. CSS 애니메이션을 위한 css입니다. body { background-color: #ffdde1; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; animation: spin .6s linear infinite rever.. 2022. 9. 25. [CSS]애니메이션06 애니메이션06 오늘은 아래와 같이 상자가 돌아가는 애니메이션을 만들어 보았습니다. See the Pen animation06 by Kim-chanmi (@kim-chanmi) on CodePen. HTML 큰 div태그에 class="cube"를 입력합니다. cube 안에 div박스 6개를 만들어줍니다. 가나다라 CSS 애니메이션을 위한 css입니다. body { background-color: #FBD786; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-.. 2022. 9. 22. [CSS]애니메이션05 애니메이션05 오늘은 아래와 같이 글씨가 통통 튀는 애니메이션을 만들어 보았습니다. See the Pen animation05 by Kim-chanmi (@kim-chanmi) on CodePen. HTML a b c d e f g h i CSS @font-face { font-family: 'CrownMychew'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.eot?#iefix') format('embedded-ope.. 2022. 9. 21. [CSS]MouseHoverEffect01 MouseHoverEffect01 오늘은 아래와 MouseHoverEffect를 만들어 보았습니다. 그림에 마우스를 올려보세요~! See the Pen MouseHoverEffect by Kim-chanmi (@kim-chanmi) on CodePen. HTML Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 to Right Mouse Hover Effect 마우스 내리면 to Left CSS @font-face { font-family: 'LocusSangsang'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.. 2022. 9. 20. [CSS]애니메이션04 애니메이션04 오늘은 아래와 같이 물결 모양의 애니메이션을 만들어 보았습니다. See the Pen Untitled by Kim-chanmi (@kim-chanmi) on CodePen. Pug div.circle-wrap - for (var x = 1; x 2022. 9. 19. [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. 7. [CSS]SVG intro SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 01. 사각형(rect) 02. 원형(circle, .. 2022. 9. 7. [CSS]CSS animation 애니메이션04 오늘은 아래와 같이 걸어가는 애니메이션을 만들어 보았습니다. 캐릭터가 걸어서 앞으로 나아가는 것처럼 보이지만, 사실은 뒤의 배경이 움직여서 캐릭터가 걸어나가는 것처럼 보이는 것입니다. Start Stop HTML Start Stop CSS .step { height: 700px; background: #18d351; position: relative; } .step .stepbox { width: 800px; //사진의 너비 height: 600px; background: url(../../animation/img/walking.jpg); border-radius: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%,.. 2022. 9. 7. [CSS]SVG animation svg 애니메이션 오늘은 아래와 같은 텍스트 애니메이션을 만들어 보았습니다. See the Pen Text Animation by Kim-chanmi (@kim-chanmi) on CodePen. HTML abcdefg CSS @font-face { font-family: 'CrownMychew'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.eot?#iefix') format('embedded-opentype'), ur.. 2022. 9. 7. [CSS]애니메이션03 애니메이션03 오늘은 아래와 같이 공이 튀는 애니메이션을 만들어 보았습니다. See the Pen animation03 by Kim-chanmi (@kim-chanmi) on CodePen. HTML CSS * { box-sizing: border-box } body { background: linear-gradient(to left, #4568DC 0%, #B06AB3 100%); width: 100vw; height:100vh; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; } .wrapper { position: absolute; animation: x 1s ease-in-out alternate.. 2022. 9. 2. [CSS]애니메이션02 애니메이션01 오늘은 아래와 같이 두 원이 돌아가는 애니메이션을 만들어 보았습니다. See the Pen animation02 by Kim-chanmi (@kim-chanmi) on CodePen. HTML CSS body { height: 100vh; background-image: linear-gradient(-60deg, #DBE6F6 0%, #C5796D 100%) } /* 위/아래 원 사이 */ .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 1s ease 100; } /* 위에 있는 원 */ .loading .circle1 { display: block; width:.. 2022. 8. 29. [CSS]애니메이션01 애니메이션01 오늘은 아래와 같은 바닥에 튕기면서 구르는 네모 박스 애니메이션을 만들어 보았습니다. See the Pen animation01 by Kim-chanmi (@kim-chanmi) on CodePen. HTML CSS body { height: 100vh; background-image: linear-gradient(to top, #2C3E50, #FD746C); /* to top: 아래에서 위로 향하는 */ } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } /* shadow 효과 */ .box::before { content: ''; width:.. 2022. 8. 29. [CSS]요소 숨기기 CSS 요소 숨기기 CSS 설정으로 요소들을 숨길 수 있습니다. 오늘은 요소 숨기는 방법 다섯 가지에 대해 알아보겠습니다. 01. display : none; 화면상에서 해당 콘텐츠가 안 보이게 되면서 해당 콘텐츠가 가지고 있던 영역 또한 사라지게 됩니다. 애니메이션도 불가하며, 스크린리더기에서 내용을 읽지 못합니다. .box { display: none; } 02. opacity : 0; 요소의 불투명도를 설정합니다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대입니다. 애니메이션 작동 가능하며, 영역도 남아있습니다. 스크린리더기에서 내용을 읽을 수 있습니다. .box { opacity : 0; } 03. visibility : hidden; 문서의 레이아웃을 변경하지 않고 요소를 숨깁.. 2022. 8. 25. [CSS]색상 표현 방법 CSS 색상 표현 방법 CSS의 색상은 글자색(color) 뿐 아니라 배경색(background), 테두리색(border) 등 다양한 CSS 속성들에 적용됩니다. 색상을 표현하는 방법에 대해 어떤 것들이 있는지 알아보겠습니다. 01. 색상명 해당 색상을 의미하는 고유명사를 속성값으로 사용합니다. 사용할 수 있는 속성값으로는 red, green, blue, aqua, corel, 등 여러 가지가 있으나 해당 색상값을 의미하는 단어를 미리 알고 있어야 합니다. http://www.w3schools.com에 접속하여 Learn CSS > Color Colors를 클릭하면 등록된 색상명을 확인할 수 있습니다. 속성 값 속성 설명 color: orange; 글자를 오렌지색으로 표현 background: beige.. 2022. 8. 23. [CSS]단위 CSS 단위 CSS에서는 다양한 단위들이 사용됩니다. 오늘은 CSS에서 쓰이는 단위들을 알아보겠습니다. 01. px 해상도에 따라 달라지는 기본 단위로서 다음과 같이 표현합니다. font-size: 12px; 02. % 부모 요소의 글자 크기를 100% 기준으로 계산한 %단위로 다음과 같이 표현합니다. font-size: 150%; 특별한 설정이 없다면 기본값인 16px이 100%가 되므로 150%는 24px이 됩니다. 만약 부모 요소가 10px이었다면 150%는 15px이 될 것입니다. 03. em 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위로 다음과 같이 표현합니다. font-size: 1.5em; 특별한 설정이 없다면 기본값인 16px이 1em이 되므로, 1.5em은 24p.. 2022. 8. 23. [CSS]이미지 스프라이트 / IR 효과 / 백그라운드 표현 이미지 스프라이트(Image Sprite) 이미지 스프라이트란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 이미지를 다운받기 위한 서버 요청과 로딩 시간을 단축해주는 효과가 있습니다. 또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지 파일만을 관리하면 되므로 매우 간편합니다. 이미지 스프라이트의 장단점 장점 단점 이미지 로딩 속도가 최적화 됩니다. 상황에 따라 유지보수가 어려울 수 있습니다. HTML 마크업이 간결해지고 스크린 리더의 탐색 속도가 향상됩니다. 데이터 관리에 문제가 생기면 이미지의 로딩이 불가능합니다. 하나의 파일만 관리하면 됩니다. 1. Figma 예시 다음은 피그마를 이용해 제작한 이미지 스프라이트 예시입니다. 아이콘들은 50px씩 간격을 .. 2022. 8. 20. [CSS]강아지 애니메이션 강아지 애니메이션 오늘은 아래와 같은 움직이는 강아지를 만들어 보았습니다. 머리와 몸통, 꼬리를 흔드는 아주 귀여운 강아지입니다. 코드펜을 이용하여 평소와 다르게 HTML(Pug)와 CSS(SCSS)를 사용하였는데요. SCSS는 CSS를 간편하게 쓸 수 있습니다. SCSS에 대한 자세한 설명은 따로 포스팅 했으니 참고해 주시기 바랍니다. See the Pen CSS Dog by Kim-chanmi (@kim-chanmi) on CodePen. 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.. 2022. 8. 18. [CSS]SCSS SCSS(Syntactically Awesome StyleSheet CSS는 복잡한 언어는 아니지만 작업이 커지고 코드가 많아질수록 불편함이 생기게 됩니다. 예를들어 선택자의 과용과 연산 기능의 한계, 구문의 부재 등등 프로젝트가 커지면 코드 중복이 많아지고 복잡해져 유지보수가 어려워지게 됩니다. SCSS는 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어 입니다. CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어라고 보시면 됩니다. 여기서 CSS 전처리기 언어는 CSS 문법과 유사하지만 선택자의 중첩이나 조건문, 반복문, 다양한 단위의 연산 등 표준 CSS보다 훨씬 많은 기능을 사용.. 2022. 8. 18. [CSS]미디어쿼리 미디어쿼리(Media query) 미디어쿼리란 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS의 속성 중 하나입니다. 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 01. 위 예시는 최소 가로폭이 1000px, 즉 1000px 보다 넓은 해상도일 때에 style_pc.css를 연결한다는 뜻입니다. 태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다. 또한 다음 트로이(http://troy.daum.net/)에서는 기기별 해상도를 제공하고 실제 작동 화면을 확인할 .. 2022. 8. 15. [CSS]기본문법 CSS 기본 문법 CSS(cascading Style Sheets)를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트만으로 사용할 수 있습니다. 또한 인라인 스타일시트는 대체로 거의 사용하지 않지만, 가장 우선순위가 높아서 꼭 필요한 경우 편리하게 사용할 수 있습니다. 참고로, CSS에서 주석은 /* */로 표현합니다. 01. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 우리를 기쁘게 하는 것들. 결과보기 우리를 기쁘게 하는 것들. 02. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파.. 2022. 8. 13. [CSS]벡터방식과 비트맵방식 01. 비트맵(Bitmap)이란? 비트맵은 웹 상에서 가장 많이 접하는 이미지 포맷입니다. JPG, PNG, GIF 모두 비트맵 확장자입니다. 비트맵은 이미지의 각 점들을 픽셀 단위로 나타낸 형태이며, 사각 픽셀이 모여있기 때문에, 확대 시 '계단현상' 또는 '깨짐현상'이 발생합니다. 비트맵 방식의 이미지 표현은 컴퓨터에게 부담을 덜 주는 구조를 갖고 있기 때문에, 웹에서의 이미지 표시, 사실 표현, 특수효과, 합성, 보정 작업 등에 주로 사용됩니다. 또한, 픽셀 하나당 모두 색상 설정이 되어 있어, 사이즈가 커질수록 용량 또한 무거워집니다. [BMP, JPG, GIF, PNG, webp의 특징] BMP : 픽셀 데이터를 압축하지 않고 그대로 저장합니다. 구조가 간단한 반면, 파일 용량은 커지는 단점이 .. 2022. 8. 9. [CSS]레이아웃 만들기 레이아웃(LAYOUT) 레이아웃이란 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것을 말합니다. 레이아웃 방법 01. float 방법 'float'은 원래 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. div태그로 틀을 잡는데, div 태그는 block 특성을 가지고 있어 세로로 표시됩니다. 이것을 가로로 정렬시켜주는 것이 float입니다. 이 속성을 쓰면 요소가 보이지 않는 버그가 생기는데, clear:both;를 사용하면 요소를 다시 볼 수 있습니다. float: left; 버그로 나타나지 않는 요소에는 clear: both; 사용예시 See the Pen float 레이아웃 by Kim-chanmi (@kim-chanmi).. 2022. 7. 25. 이전 1 다음 728x90
