본문 바로가기

CSS13

SVG Text Animation SVG Text Animation 이번 시간에는 SVG 텍스트에 애니메이션 효과를 넣은 한 가지를 보여드리도록 하겠습니다. 해당 효과에는 animation와 @keyframes를 사용하고 각 구역마다 %를 정해서 애니메이션을 설정해줍니다. See the Pen Text animaion by KDB6 (@kdb6) on CodePen. 2022. 9. 7.
SVG Animation SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. 1. 인터넷 익스플로러9 버전 이상부터 지원됩니다. 2. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 3. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. 4. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형(rect) svg lt;.. 2022. 9. 7.
CSS Motion Animation CSS Motion Animation 이번 시간에는 걸어다니는 모션 CSS 애니메이션을 만들어 봤습니다. 여러 이미지가 하나로 연결된 이미지를 사용하며, @keyframes에서 position을 이용하였습니다. See the Pen Untitled by KDB6 (@kdb6) on CodePen. 2022. 9. 7.
CSS Animation CSS Animation 이번 시간에는 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 애니메이션 반복 횟수를 설정합니다. animatio.. 2022. 9. 7.
숨김 요소 CSS 숨김 요소 이번 시간은 요소를 숨겨지는 여러가지 CSS 요소들이 있는데 해당 요소들을 알아보겠습니다. .sr-only 페이지에서는 가리지만, 스크린 리더에서는 접근 가능하도록 하는 일종의 CSS 선언이다. aria-hidden true로 설정되면, accessibility tree에서 해당 콘텐츠를 가리지만, 시각적으로는 볼 수 있으며, aria-hidden="true" 엘리먼트에 기본 스타일을 적용하는 브라우저는 없다. 주의 할 점은 , aria-hidden="true"가 focusable한 요소가 되어서는 안된다는 것이다. 스크린리더에는 보이지 않지만, focus가 되기 때문이다. display: none / hidden 두 가지 방법은 모두 렌더링트리와 접근성 트리에서 사라지게 하며, hid.. 2022. 8. 25.
CSS 색상 표현 CSS 색상 표현 CSS에서는 색상을 표현하는 여러가지 방법이 있습니다. 이번 시간에는 그 중 몇가지의 표현 방법을 알아보겠습니다. RGB 표현 방법 RGB 색상은 각각 red, green, blue의 세가지 색을 혼합하여 색을 표현합니다. RGB 색상 지정 방법은 정수 입력을 하거나 백분율 값을 지정하여 색상을 지정합니다. .blue {color: rgb(0, 0, 255)} .green {color: rgb(0, 128, 0);} 16진수 표현 방법 16진수 색상값은 RGB 색상값을 각각 16진수로 변환한 것이며, RGB 색상의 기본색(red, freen, blue)은 각각 00부터 FF까지 범위로 표현한다. .blue { color: #0000FF; } .green { color: #008000; .. 2022. 8. 23.
CSS 단위 CSS 단위 웹에 대한 성장 및 변화에 따른 여러 가지 단위들이 점점 등장하고 있습니다. 이번 시간에는 그에 맞는 여러 가지에 CSS 단위를 알아보겠습니다. rem rem은 em과는 다르며 부모요소에 html를 100%로 두고 그 아래 요소들에게 폰트 사이지를 정하는 것이다. html의 기본 값은 16px인며 rem은 해당 값에 정해둔 만큼 곱하면 된다. // 예시 .parent { font-size: 2rem;// 16px * 2 = 32px } vw / vh vw / vh 두 단위의 v는 viewport의 약자이며, 웹에서 보이는 부분에만 값을 준 것이다. vw는 viewport의 width이며, vh는 viewport height이다. 만약 화면 너비의 높이와 길이를 100vw, 100vh로 잡고 .. 2022. 8. 23.
IR / 이미지 스프라이트 / 백그라운드 IR / 이미지 스프라이트 / 백그라운드 이번 시간은 IR / 이미지 스프라이트 / 백그라운드에 대해 알아 보겠습니다. IR IR 기법은 이미지 대체 텍스트를 제공하기 위한 CSS 기법으로 다양한 CSS기법을 사용하여 이미지 대체 텍스트를 제공할 수 있다. ir 적용 방법 .ir { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; } 이미지 스프라이트 이미지 스프라이트 기법이란 여러개의 이미지를 따로 두고 코딩하는게 아닌 하나의 파일에 모아서 코딩하는 방식이다. 예시를 보여드리도록 하겠습니다. 기본적인 구조는 아이콘 구역 별로 50px 구역을 주었습니다. svg 파일을 사용합니다. 사용 방법 먼저 a.. 2022. 8. 21.
Scss Scss SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합이다. 장점 1. 가독성과 재사용이을 높여주어 유지 보수를 쉽개 해줍니다. 2. CSS보다 심플한 표기법으로 CSS를 구조화하여 표현이 가능하다. Scss와 CSS의 차이점을 확인해보세요. // Scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } // css nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a .. 2022. 8. 18.
Animation Animation codepen에서 HTML을 Pug로, CSS를 Scss로 변환하여 애니메이션을 만들어 보도록 하겠습니다. HTML --> Pug Pug는 템플릿 엔진으로 자바스크립트 와 함꼐 사용하여 HTML을 렌더링 할 수 있게 해준다. 때문에 기존 HTML과는 문법이 다르며, 자바스크립트 문법이 들어가기도 한다. 특징은 닫는 태그가 없으며, 들여쓰기한 이후에도 공백까지 태그로 읽는다. 태그 사이가 아닌 태그의 속성으로 넣으려면 ()괄호를 사용해야한다. .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 .dog.. 2022. 8. 18.
미디어 쿼리 미디어 쿼리 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어 쿼리는 반응형 프로젝트에서 반드시 필요한 기법 최소 가로폭이 1000px, 즉 1000px 보다 넓은 해상도일 때에 style pc.css를 연결 한다는 뜻 태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle de Toolbar를 누르면 기기 마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다 @media 처음 로딩했을 시에 성능이 저하되지 않도록 CSS 파일을 하나로 만들어 CSS 내부에 조건에 따라 분기시키는 것이 일반적인 형태 Media Type 설명 all 모든 미디어 장치에 사용 (기본값) print 프린터에 사용 screen PC, 태블릿, 스마트폰에 사용 speech 스크린 .. 2022. 8. 16.
CSS 기본 문법 CSS 기본 문법 CSS (Cascading Style Sheets)는 내부, 외부, 인라인 스타일 시트 등이 있다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일 만으로 사용할 수도 있다. 또한 인라인 스타일시트는 대체로 거의 사용하지 않지만 가장 우선 순위가 높기에 꼭 필요한 경우 편리하게 사용할 수 있다다. 참고로, CSS에서의 주석은 /* */ 로 표현한니다. 내부 스타일 시트 CSS를 HTML 문서 안에 외부 스타일 시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있다. 이때 스타일은 ". CSS 확장 자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언한다. @import @import는 CSS 안으로 다른 CSS 파일을 불러들일 .. 2022. 8. 16.
그래픽 확장자 그래픽 확장자 그래픽 작업 및 이미지를 이용할 때 여러 확장자가 있으며, 그에 따른 사용처와 방법은 다릅니다. 각 확장자에 대한 요소를 알아봅시다. 비트맵 (bitmap) 비트맵은 비트(bit)로 이루어진 지도(map)란 뜻이며, 픽셀에 저장된 일련 비트 정보의 집합을 뜻한다. 일반적으로 컴퓨터에서 사용되는 디지털 이미지는 대다수 비트맵 방식이다. Ex : JPG, JPEG, , EXIF, GIF, BMP, PNG, HEIF 벡터 (vector) 벡터는 점과 점, 선분과 면의 수학적 함수관계로 이미지를 표현 시, 선과 면을 만들어 내는 것을 말한다. 두 점을 연결하여 선을 만들거나 선이 3개 이상모여 면을 만들 수가 있다. 이러한 점, 선, 면 요소들이 모여 벡터 그래픽을 만들어 낸다. Ex : AI, .. 2022. 8. 9.

INFORMATION

javascript

css

html

티스토리툴바