CSS23 박스 회전 애니메이션 박스 회전 애니메이션 CSS를 사용해 통통 튕기는 박스를 회전시키는 간단한 애니메이션 효과 입니다. See the Pen rotate box by mbynae (@mbynae) on CodePen. 이번 애니메이션은 절대 위치로 위치를 잡고 가상요소를 이용해 박스와 그림자를 따로 만들어줘야 합니다. 애니메이션의 속도 요소중 linear는 일정한 속도로 진행하도록 해줍니다. 그리고 애니메이션 동작 설정의 rotate는 요소의 회전을 나타내며 "*deg"로 각도를 조절할 수 있습니다. 2022. 8. 29. 원 회전 애니메이션 원 회전 애니메이션 CSS를 사용해 두개의 원을 회전시키는 간단한 애니메이션 효과 입니다. See the Pen circle rotate by mbynae (@mbynae) on CodePen. 이번 애니메이션은 길다란 막대 블록을 만든 후 position: absolute로 양 끝에 원을 배치시켜 회전시키면 되는 간단한 애니메이션 효과 입니다. 색상을 넣을 때 그라디언트 효과를 넣을 수 있습니다. 그라디언트 효과는 gradient 요소로 사용하며 시작 위치, 색상, 끝나는 위치, 색상 형태로 적용이 가능합니다. linear-gradient : 선형 그라디언트 radical-gradient : 반지름형 그라디언트 repeating-gradient : 반복형 그라디언트 2022. 8. 29. 요소 숨김 기능 요소 숨김 기능 CSS에서 사용할 수 있는 5가지의 요소 숨김 기능입니다. CSS는 숨기고 싶은 문자나 블록 등을 화면에 안보이게 처리할 수 있습니다. 방식에 따라 영역을 인식하거나 애니메이션을 적용할 수 있는 차이점이 있습니다. 방식 설명 특징 display: none; diplay는 요소를 화면에 어떻게 보여줄지 정해주며 none는 안보이게 처리합니다. - 영역 인식X - 애니메이션X opacity : 0; opacity는 요소의 불투명도를 설정하며 0으로 갈수록 투명해집니다. - 영역 인식O - 애니메이션O visibility: hidden; visibility는 요소의 가시성을 나타내며 보이거나 숨기거나 겹쳐보이게 해줍니다. hidden은 숨겨줍니다. - 영역 인식O - 애니메이션O width: .. 2022. 8. 26. 색상 표현법 색상 표현 방법 CSS에서 사용할 수 있는 5가지의 색상 표현 방법입니다. CSS는 폰트, 배경, 블록, 테두리 등에 색상을 넣을 수 있으며 각 요소 혹은 요소 뒤에 -color 을 붙여 색상을 적을 수 있습니다. 표현법 설명 예시 색상명 색상의 이름으로 표현하는 방법으로 약 140가지의 이름이 정의되어 있습니다. 표현 가능한 색상명은 여기에서 확인 가능합니다. color: red; color: GreenYellow; rgb 표현 rgb(red, green, blue) 표현은 각 색의 0에서 255사이의 정수를 입력하여 색을 표현하는 방법입니다. color: rgb(255, 0, 0); color: rgb(154, 205, 50); 16진수(HEX) 표현 rgb 색상값을 각각 16진수로 변환하여 표현한 .. 2022. 8. 24. CSS 단위 CSS 단위 CSS에서 사용하는 단위입니다. 단위 설명 px 가장 기본적인 단위입니다. em/rem em은 각 부모 요소의 폰트 크기를 기반으로 한 단위이며 1rem은 해당 폰트 픽셀 크기입니다. rem은 최상위 요소의 폰트 크기를 기반으로 한 단위입니다. vw/vh 뷰포트를 100개로 나눠 기준을 정한 단위입니다 vmin/vmax 뷰포트 너비 또는 높이를 기준으로 하는 최대, 최소 값 1920x1080px 일때 1vmin = 10.8px / 1vmax = 19.2px ch/ex 폰트 사이즈의 특정 수치에 기반하는 단위 ch : 제로 문자인 0의 너비값의 고급 척도 (width:10ch 0의 10개만큼의 길이) ex : 현재 폰트의 x-높이 값 or em의 절반 값 2022. 8. 24. 백그라운드 이미지/ir 효과 백그라운드 이미지 / ir 효과 배경에 이미지를 넣고 웹접근성을 준수하는 효과입니다. 1. 백그라운드 이미지 HTML에 이미지를 넣기 위해선 태그를 사용해야 합니다. 하지만 CSS를 이용해 배경에 이미지를 넣는 방법이 있습니다. 'background-image: url("")' 을 사용하면 배경에 이미지를 직접 넣을 수 있습니다. 하지만, 이미지에 링크를 걸거나 이미지의 설멸을 적어 웹표준을 준수할 수는 없습니다. 2. ir 효과 웹표준을 준수하기 위해선 이미지에 설명을 넣어야 하며 태그를 사용시 "alt"를 이용해 준수할 수 있습니다 하지만 백그라운드 이미지는 직접 넣을 수 없는데 이 때 대신 사용하는 것이 ir 효과 입니다. ▶ 의미있는 이미지의 대체 텍스트를 제공하는 경우 ir { display: .. 2022. 8. 22. 강아지 애니메이션 만들기 강아지 애니메이션 Fug와 SCSS를 활용해 만든 강아지 애니메이션입니다. See the Pen CSS Dog by mbynae (@mbynae) on CodePen. Fug는 HTML을 간편히 쓰기 위해 나온 언어로 ".*" 형태로 class를 표현할 수 있습니다. 들여쓰기를 통해 부모요소와 자식요소를 구분하게 되지만 코드가 길어지면 육안으로 구별하기 힘들어질 수 있는 단점이 있습니다. SCSS 역시 css를 좀 더 간편히 쓰기 위해 나온 언어입니다. "$"를 써서 변수 처럼 사용할 수 있으며, 하나의 구조에 여러개의 다른 선택자를 넣어 중첩해 사용할 수 있는 특징이 있습니다. ▶ 애니메이션 효과 .dog-tail { animation: dog-tail-segment $interval $easing i.. 2022. 8. 18. SCSS SCSS(Super CSS) CSS의 단점을 보완한 CSS 전처리기 언어입니다. ※ CSS 전처리기 언어란? CSS의 단점을 보완하기 위해 문법을 바꾼 형태로 직접 동작시키지 않지만 코드를 작성시 CSS로 컴파일 해서 CSS가 웹으로 동작하도록 하는 언어입니다. 1. SCSS SCSS는 현재 가장 많이 쓰이고 있는 CSS 전처리기 언어로 초기에 나온 SASS를 버전 업한 언어입니다. ▶ SCSS 장점 1. CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있습니다. 2. 가독성과 재사용성을 높여주어 유지보수가 쉽습니다. 3. 변수를 사용해 CSS 속성값을 통일해 사용할 수 있습니다. 4. 선택자의 중첩 사용으로 편의성을 높여줍니다. 5. 조건문, 반복문을 사용해 동적으로 CSS 관리가 가능합니다.. 2022. 8. 18. 미디어 쿼리 미디어쿼리(media query) 뷰포트의 해상도에 따라 CSS를 분기시키는 기법으로 반응형 프로젝트에서 반드시 필요합니다. 뷰포트 해상도가 달라질 때 레이아웃이 깨질 수 있습니다. 이를 방지하기 위해 해상도마다 레이아웃을 다르게 지정해 주도록 해주는 것이 미디어쿼리입니다. 1. 2022. 8. 15. CSS 기본 문법 CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. ▶ 스타일 시트 종류 설명 형태 내부 스타일시트 CSS를 HTML 문서 안에 외부 스타일시트 스타일 속정을 외부 HTML에 따로 저장하는 형태입니다. 외부 스타일시트는 그 스타일을 선언한 모든 HTML 페이지에 적용되며 *.css의 확장자를 가집니다. @import CSS 안으로 다른 CSS 파일을 불러올 때 사용하며 CSS의 맨 윗줄에 기술합니다. @import url("style.css"); 인라인 스타일 태그에 직접 CSS를 정의해주는 형태로, 해당 요소에 syle="" 형태로 기술합니다. 우선순위가 제일 높지만 공통으로 css를 수정할 수 없어 자주 사용하지는 않습니다. 2022. 8. 15. 비트맵/벡터 방식 벡터와 비트맵 방식 차이 이미지를 표현하는 방식으로 비트맵과 벡터 방식이 있습니다. 비트맵을 설명하기 전에 우선 픽셀의 개념부터 알아야 합니다. 1. 픽셀(pixel) 픽셀이란? Picture(그림) + Element(원소)의 합성어로서 화소라고도 하는 화면을 구성하는 가장 기본이 되는 단위. 픽셀은 그림을 나타내는 최소한의 점이며, 이 점 하나에 해당 색의 정보가 담겨져 있습니다. 픽셀 하나하나가 모이면 그림이 되며 이렇게 이미지를 나타내는 방식이 바로 비트맵 방식이 됩니다. 2. 비트맵(Bitmap) 방식 비트맵 방식이란? '비트의 지도(Map of bits)'라는 뜻으로, 각 픽셀에 저장된 비트 정보가 집합된 것. 비트맵은 벡터와 다르게 픽셀의 점 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다.. 2022. 8. 10. 이전 1 2 다음
