'CSS' 태그의 글 목록

TIL 220915 새롭게 알게 된 CSS + etc.

새롭게 알게 된 CSS 속성 calc() calc를 사용하면 css속성값에 계산식을 이용할 수 있다. , , , , , , 또는 를 받는 속성의 값으로 사용할 수 있다. length구문에 해당하는 아무 값에나 사용할 수 있다. 덧셈, 뺄셈, 곱셈, 나눗셈이 가능하다. 곱셈과 나눗셈은 오른쪽 피연산자가 숫자여야한다. width: calc(100% - 80px); filter 흐림효과나 색상 변형 등 그래픽 효과를 요소에 적용한다. /* SVG 필터를 가리키는 URL */ filter: url("filters.svg#filter-id"); /* 값 */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow..

TIL 2022. 9. 15. 00:54

[CSS] CSS transition CSS 트랜지션

How to Use CSS Transitions? To create a transition effect, you must specify two things: 트랜지션 효과를 주고 싶다면 두가지만 기억하세요 the CSS property you want to add an effect to 효과를 주려는 css속성 the duration of the effect 효과의 시간 Note: If the duration part is not specified, the transition will have no effect, because the default value is 0. The following example shows a 100px * 100px red element. The element has als..

공부 노트 2022. 3. 20. 17:50

CSS 학습 게임 - CSS Diner, Flexbox Froggy

CSS Diner CSS 선택자를 학습할 수 있는 게임 CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 12번 13번 16번 19번 22번 나중에 다시 풀어보기 해답 CSS Diner 완료(답안/요점정리) (1/3) CSS selector 연습에 좋은 자료인 CSS Diner를 완료하고 요약 및 답안을 정리하려고 한다. CSS Diner는 코드로만 보면 이해가 쉽게 되지 않는 부분을 visual aid를 가미하여 좀 더 쉽고 재미있게 CSS selector를 velog.io Flexbox Froggy 플렉스 박스를 학습할 수 있는 게임 Flexbox Froggy A game for learning C..

공부 노트 2021. 12. 22. 12:09

구름에듀_김버그 SCSS 7. GNB 마크업

보호되어 있는 글입니다.

보호글 2021. 11. 27. 00:48

구름에듀_김버그 SCSS 6. placeholder

보호되어 있는 글입니다.

보호글 2021. 11. 16. 00:43

구름에듀_김버그 SCSS 5. mixin

보호되어 있는 글입니다.

보호글 2021. 11. 15. 01:17

구름에듀_한 눈에 끝내는 HTML5/CSS3 4. css grid

보호되어 있는 글입니다.