CSS22 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: preserve-3d; } .me { position: absolute; width: 369px; height: 547px; transform: translatez(80px) scale(0.8); }.. 2022. 9. 26. CSS - 로딩 화면 애니메이션 로딩화면 로딩화면을 만들어 보아요😏 CSS body { background-color: #FA9494; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; animation: spin .6s linear infinite reverse; } .ball { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; animation: spin 1s infinite ease-in-out; } .ball::after { content: ''; position:.. 2022. 9. 26. CSS - 움직이는 육면체 움직이는 육면체 나도 이게 뭔지 몰라요.....;;; CSS body { background-color: #FFB3B3; 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) translatez(0); animation: rotate 8000ms linear infinite; } .cube div { display: flex; align-items: ce.. 2022. 9. 22. CSS - 통통 튀는 글자 효과 글자 효과 통통 튀는 글자의 효과를 만들어 봅시다~ CSS @font-face { font-family: 'EF_Hyunygothic'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/earlyfont/EF_Hyunygothic.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/earlyfont/EF_Hyunygothic.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfontworld/earlyfont/EF_Hyunygothic.woff2') .. 2022. 9. 22. CSS - 마우스 오버 효과 마우스 hover Effect 마우스 오버 했을때 위아래, 좌우로 변화하는 이펙트를 만들어 봅시다. CSS @font-face { font-family: 'LocusSangsang'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsa.. 2022. 9. 20. CSS 애니메이션 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 애니메이션 방향을 설정합니다. animation-fill.. 2022. 9. 7. SVG 알아보기 SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형(rect) svg 원형(circle, elli.. 2022. 9. 7. 정신없이 움직이는 원 애니메이션 요리조리 움직이는 원 정신없이 돌아가는 원을 만들어 봅시다👻 CSS * { box-sizing: border-box; } body { background: linear-gradient(to top, #CBA0AE 0%, #80558C 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 infinite 0s both; } .wrapper:nth-of-type(2) {animation-delay: 0.1s;} .wrapper.. 2022. 9. 2. 빙글빙글 도는 원 애니메이션 빙글빙글 돌아가는 원 빙글빙글 돌아가는 두개의 원 애니메이션을 만들어 보아요🪄 HTML 두개의 원을 만들고, 그위에 부모 박스를 만듭니다. CSS body { height: 100vh; background-image: linear-gradient(-60deg, #FF85B3 0% , #9900F0 100%) } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 0.9s ease 1000; } .loading .circle1 { display: block; width: 20px; height: 20px; border-radius: 50%; background: #00FFC6; } .. 2022. 8. 29. 통통튀는 네모 애니메이션 통통튀는 네모박스 통통튀는 애니메이션 효과가 들어간 박스를 만들어 보아요✏️ HTML 박스 한개를 만듭니다 CSS body { height: 100vh; background-image: linear-gradient(to top, #B2A4FF, #FFB4B4); } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .box::before { content: ''; width: 50px; height: 5px; background: #000; position: absolute; top: 58px; left: 0; border-radius: 50%; opacity: .. 2022. 8. 29. CSS 요소 숨기기 CSS 요소 숨기기 CSS를 통하여 요소를 숨길 수 있습니다. 숨기는 방법은 다양하지만, 각각의 방법마다 접근성, 레이아웃, 애니메이션, 성능 및 영향이 다르게 적용됩니다. display display: none; display: none; 방식은 가장 많이 사용되는 요소 숨기기 방법입니다. 눈에 보이지 않으며 영역도 차지 하지 않습니다. 이 속성은 애니메이션을 적용할 수 없으며, 페이지 레이아웃을 트리거 합니다. opacity opacity: 0; opacity는 0에서1 사이의 숫자나 0 ~ 100% 사이의 백분율로 표시 할 수 있습니다. opacity는 불투명도를 주는 것이기에 애니메이션을 적용 할 수 있으며, 영역도 그대로 존재하게 됩니다. 0은 완전 투명을 뜻하며, 1은 완전 불투명을 뜻합니다... 2022. 8. 25. Illustrator - 사슴 그리기 일러스트레이터로 사슴을 그려 보았습니다. 팬툴을 이용해서 깔끔한 선의 사슴 그림을 그릴 수 있습니다. 목업 +보너스 고양이 그려 왔습니다 2022. 8. 24. 색상 표현 방법 CSS 색상표현방법 CSS의 색상은 글자색(color) 뿐 아니라 배경색(background), 테두리(border)등 다양한 CSS속성들이 적용됩니다. 이때, 색상을 표현하는 것에는 다양한 방법이 존재합니다. 색상명 해당 색상을 의미하는 고유명사를 속성값으로 사용합니다. 사용할 수 있는 속성값으로는 red, green, blue, aqua, corel, ... 등 여러 가지가 있으나 해당 색상값을 의미하는 단어를 미리 알고 있어야 합니다. 속성 값 속성 설명 color: orange; 글자를 오렌지색으로 표현합니다. background: beige; 배경을 베이지색으로 표현합니다. border-color: tomato; 테두리를 토마토색으로 변경합니다. 픽셀(px)은 해상도에 따라 상대적으로 달라지는 .. 2022. 8. 24. CSS 단위 CSS 단위 CSS에는 다양한 형태의 단위가 있으며, 이것을 상황에 맞게 효율적으로 사용하는 것이 좋습니다. font-size 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. px font-size: 12px; 픽셀(px)은 해상도에 따라 상대적으로 달라지는 기본 단위 입니다. % font-size: 150%; 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위 입니다. 특별한 설정이 없다면 16px가 100%입니다. em font-size: 1.5em; 부모 요소의 글자 크기를 100% 기준으로 계산한 100 분의1 단위 입니다. 특별한 설정이 없다면 16px이 1em 입니다. rem font-size: 1.5rem; rem은 em과 비슷하지만 .. 2022. 8. 24. Illustrator - 토끼 그리기 일러스트레이터로 토끼 그리기 일러스트레이터로 벡터방식의 이미지를 만들 수 있습니다. 2022. 8. 22. 이미지 스프라이트 / IR효과 / 백그라운드 표현 이미지 스프라이트 / IR효과 / 백그라운드 표현 이번 시간에는 CSS에서 사용되는 이미지 스프라이트와 IR효과 ,백그라운드 표현에 대해 알아봅시다. 이미지 스프라이트란? 이미지 스프라이트(image sprite)는 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 말합니다. 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해서 웹 브라우저에는 서버에 이미지를 요청하게 되는데 이때, 이미지가 많을 경우에는 웹 브라우저는 서버에 해당 이미지 많큼 요청하게 되므로 페이지에 로딩 시간이 오래 걸리게 됩니다. 이때 이미지 스프라이트를 사용하면 이미지를 다운받기 위한 서버 요청을 최소한으로 줄이 수 있습니다. 이미지를 50px 간격에 맞춰 하나의 셀에 넣습니다. 이미지의 배경을 제거 한 상태.. 2022. 8. 20. 강아지 애니메이션 만들기 SCSS SCSS는 CSS를 보다 쉽게 사용하기 위해서 만들어진 기능 입니다. SCSS는 중괄호{}와 세미콜론(;)의 형식으로 작성 됩니다. SCSS코드를 이용해 애니메이션 만들기 SCSS와 Pug를 이용하여 강아지 애니메이션을 만들어 보겠습니다🐶 SCSS 코드 보기 코드 보기 $dog-width: 100px; $interval: 200ms; $color-gray: #eaebec; $easing: ease-in-out; body { display: flex; flex-direction: column; justify-content: center; align-items: center; } html, body { background: #FFB47E; width: 100%; height: 100%; margin.. 2022. 8. 18. SCSS SCSS SCSS는 CSS를 보다 쉽게 사용하기 위해서 만들어진 기능 입니다. SCSS는 중괄호{}와 세미콜론(;)의 형식으로 작성 됩니다. CSS와 SCSS CSS와 SCSS의 차이점을 예제를 통해서 알아 봅시다. CSS .dog { width: 100px; height: 100px; z-index: 1; } .dog:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: rgba(0, 0, 0, 0.03); transform: translatey(-30%) scale(1.5); } SCSS //dog .dog { width: $dog-width; h.. 2022. 8. 18. 미디어쿼리(media query) 미디어쿼리(media query) 디바이스들이 점점 다양해 지면서 웹에서 화면의 해상도에 따라 유연하게 컨텐츠를 배치하는 기술은 중요해지고 있습니다. 미디어쿼리는 반응형 웹디자인의 기본이 되는 기술 입니다. //link ~ media=" " 최소 가로폭이 1000px, 즉 1000px 보다 넓은 해상도일 때에 style_pc.csss를 연결한다는 뜻입니다. 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6,7,8 375 667 iPhone 6,7,8 plus 414 736 iPhone 5 320 568 Galaxy S5, S8 360 640 Galaxy Note 8 360 640 iPad Pro 1024 1366 ⁝ ⁝ ⁝ @media 처음 로딩할 때 성능이 저하되지 않도록 CSS 파.. 2022. 8. 15. CSS 기본 문법 CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트만으로 사용할 수도 있습니다. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 우리를 기쁘게 하는 것들. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용되는 반면, 외부 스타일시트는 그 스타일을 선언한 모든 HTML 페이지에 적용됩니다. 우리를 바라보게 하는 것들. @charset "utf-8"; p { color : blue }; @im.. 2022. 8. 13. 비트맵과 벡터의 차이점 비트맵과 벡터 비트맵이란? 비트맵은 웹 상에서 가장 많이 접하는 이미지 포맷을 일컫는 말입니다. 비트맵은 디스플레이의 각 점들의 픽셀 형태로 나타낸 형태입니다. JPG, PNG, GIF가 주된 비트맵 확장자 입니다. 비트맵은 사각 픽셀들이 모여있는 형태이기 때문에, 확대시에는 '계단현상' 또는 '깨짐현상'이 발생하게 됩니다. 이러한 비트맵의 방식은 컴퓨터에게 부담을 덜 주는 구조를 갖고 있기 때문에, 웹에서의 이미지 표시, 사실 표현, 특수효과, 합성, 보정 작업들에 주로 사용합니다. 벡터 란? 벡터 방식은 비트맵과 상반되는 방식으로 이미지를 표현 합니다. 벡터 방식은 이미지를 수학적인 공식으로 표현하는 방법 입니다. AI, SVG 등이 주된 벡터 확장자 입니다. 수학적인 연산으로 이루어진 표현방식이기 .. 2022. 8. 9. Layout만들기 레이아웃 레이아웃(layout)이란, 특정 공간에 여러 구성요소를 보기좋게 효과적으로 배치 하는 작업을 의미합니다. 레이아웃 : float float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다. 이 속성은 본래 자연스럽게 어울리게 하는 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성 할 때자주 사용됩니다. clear 속성 컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어집니다. 따라서 float속성이 적용하고자 하는 요소가 모두 등장하고 난 다음에 clear속성을 이용하여 이후의 요소들이 더이상 float의 속성에 영향을 받지 않도록 합니다. See the Pen 레이아웃1.. 2022. 7. 26. 이전 1 다음
