필터 속성은 IE에서는 적용되지 않는다.

 

 

blur(px) grayscale(%)
흐림효과
값이 클수록 흐림이 커진다.		 회색조
grayscale(0) // 디폴트
grayscale(1 | 100%)

 

hover시 원본 이미지로 되돌아 옴 

<style>
		body {
			padding: 50px;
		}
		img {
			width: 500px;	
			transition: 1s;
		}
		.blur {
			filter: blur(5px);
		}
		.blur:hover {
			filter: blur(0);
		}

		.grayscale {
			filter: grayscale(1);
		}
		.grayscale:hover {
			filter: grayscale(0);
		}
	</style>
</head>
<body>
	<!-- 필터 속성은 iE에서는 적용이 되지 않는다. -->
	<img class="blur" 
      src="images/sky/video-sky-02_Moment.jpg" 
      alt="구름 풍경">
	<img class="grayscale" 
      src="images/sky/video-sky-02_Moment.jpg" 
      alt="구름 풍경">
</body>

 

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/filter

 

filter - CSS: Cascading Style Sheets | MDN

CSS filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다.

developer.mozilla.org

 

'Web > CSS' 카테고리의 다른 글

CSS 변수 var() 사용하기  (0) 2022.02.09
CSS calc() 산술식(사칙연산)  (0) 2022.02.07
[animation] 도형로딩 애니메이션 #2  (0) 2021.08.02
[animation] 도형로딩 애니메이션 #2  (0) 2021.08.01
UIKit #1 사용법, Accordion 컴포넌트  (0) 2021.07.27

** IE 지원 하지않는다.

1. 변수 선언하기 :

  css안에 :root {}를 작성하고 변수를 선언한다.

  변수이름은 --로 시작한다.

<h1>Large Headline Text</h1>
<h3>Medium Headline Text</h3>
<p>
	lorem50
</p>

<button class="btn primary">primary</button>
<button class="btn secondary">secondary</button>
<button class="btn positive">positive</button>
<button class="btn negative">negative</button>
/* style.css */

:root {
	/* 변수 선언 */
	--primary: royalblue;
	--secondary: black;
	--positive: yellowgreen;
	--negative: crimson;

	--big: 50px;
	--medium: 30px;
	--small: 14px;
}

 

2. var()로 변수 사용하기 

.btn {
	border: none;
	outline: none;
	padding: 7px 20px;
	border-radius: 5px;
	color: #fff;
}
.btn.primary {
	background-color: var(--primary);
}
.btn.secondary {
	background-color: var(--secondary);
}
.btn.positive {
	background-color: var(--positive);
}
.btn.negative {
	background-color: var(--negative);
}

h1 {
	font-size: var(--big);
}
h3 {
	font-size: var(--medium);
}
p {
	font-size: var(--small);
}

'Web > CSS' 카테고리의 다른 글

CSS filter 효과 - blur, grayscale  (0) 2022.02.09
CSS calc() 산술식(사칙연산)  (0) 2022.02.07
[animation] 도형로딩 애니메이션 #2  (0) 2021.08.02
[animation] 도형로딩 애니메이션 #2  (0) 2021.08.01
UIKit #1 사용법, Accordion 컴포넌트  (0) 2021.07.27

1.  중앙 정렬일때 ( margin: auto; ) width 값 조절하기

왼쪽 오른쪽 50px씩 빼기

<body>
	<div class="container"></div>
</body>
body {
	font-size: 16px;
	margin: 0;
	padding: 0;
}
.container {
	width: calc(100% - 100px);
	margin: 0 auto;
	height: 200px;
	background: yellowgreen;
}

 

 

2. 자식요소 width 똑같이 나누기

<body>
	<div class="container">
		<div class="child"></div>
		<div class="child"></div>
		<div class="child"></div>
	</div>
</body>
.container {
	width: 900px;
	margin: 0 auto;
	overflow: hidden;
    /* 자식요소 float -> 부모요소가 높이값을 잃음
       overflow: hidden; 또는 부모에 높이값을 줘야한다. */
	border: 5px solid #000;
}
.child {
	float: left;
    /* 3으로 나누기 */
	width: calc(900px / 3);
	height: 200px;
}
.child:nth-child(1) {
	background-color: coral;
}
.child:nth-child(2) {
	background-color: dodgerblue;
}
.child:nth-child(3) {
	background-color: green;
}

 

3. 중첩가능

1000px - 300px == 700px;

calc(1000px - calc(200px + 100px));

 

4. 화면 전체 100% 100vh로 채우고, 가운데정렬 (상하좌우 마진 20px)

		.container {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: calc(100% - 40px);
			height: calc(100vh - 40px);
			margin: 0 auto;
			background: yellowgreen;
		}

 

'Web > CSS' 카테고리의 다른 글

CSS filter 효과 - blur, grayscale  (0) 2022.02.09
CSS 변수 var() 사용하기  (0) 2022.02.09
[animation] 도형로딩 애니메이션 #2  (0) 2021.08.02
[animation] 도형로딩 애니메이션 #2  (0) 2021.08.01
UIKit #1 사용법, Accordion 컴포넌트  (0) 2021.07.27 

    <div class="loading">
        <span></span>
        <span></span>
    </div>

부모가 이미 absolute면 relative로 바꾸지 않아도 된다.

calc() 함수 사용해서 정확하게 계산하기

 

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
    width: 100px;
    height: 100px;
    /* border: 1px solid #000; */
}
.loading span {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0;
    left: 0;
    animation: clockwise 2s linear infinite;
}
.loading span:nth-child(1) {
    background-color: pink;

}
.loading span:nth-child(2) {
    background-color: palegoldenrod;
    animation-delay: 1s;
}

/* Animation */
@keyframes clockwise {
    0% {
        top: 0;
        left: 0;
    }
    25% {
        top: 0;
        left: calc(100% - 30px);
        background-color: dodgerblue;
    }
    50% {  
        top: calc(100% - 30px);
        left: calc(100% - 30px);
        background-color: orange;
    }
    75% {
        top: calc(100% - 30px);
        left: 0;
        background-color: yellowgreen;
    }
    100% {
        top: 0;
        left: 0;
    }
}

'Web > CSS' 카테고리의 다른 글

CSS 변수 var() 사용하기  (0) 2022.02.09
CSS calc() 산술식(사칙연산)  (0) 2022.02.07
[animation] 도형로딩 애니메이션 #2  (0) 2021.08.01
UIKit #1 사용법, Accordion 컴포넌트  (0) 2021.07.27
display 속성 정리 (인라인, 블럭, 인라인블럭)  (0) 2021.07.23

 

    <div class="loading">
        <span></span>
        <span></span>
        <span></span>
    </div>

일단 중앙정렬, nth-child로 색 다르게 넣기

@keyframes 로 0%, 100%는 안보이고 크기작게 50%는 보이고 크기1.2배가 되게 한다.

 

animation: 이름, duration, linear(키프레임 구간이 넘어갈때 부드럽게), infinite;animation-delay: 첫번째 span이 애니메이션 되고나서 0.2s뒤에 2번째 span이 0.3s뒤에 3번째 span이 애니메이션 된다.

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
}
.loading span {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    animation: loading 1s linear infinite;
}
.loading span:nth-child(1) {
    background-color: #F2A2A9;
    animation-delay: 0;
}
.loading span:nth-child(2) {
    background-color: #55A6D9;
    animation-delay: .2s;
}
.loading span:nth-child(3) {
    background-color: #5FC2D9;
    animation-delay: .4s;
}
/* Animation */
@keyframes loading {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);    
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

'Web > CSS' 카테고리의 다른 글

CSS 변수 var() 사용하기  (0) 2022.02.09
CSS calc() 산술식(사칙연산)  (0) 2022.02.07
[animation] 도형로딩 애니메이션 #2  (0) 2021.08.02
UIKit #1 사용법, Accordion 컴포넌트  (0) 2021.07.27
display 속성 정리 (인라인, 블럭, 인라인블럭)  (0) 2021.07.23

- UIKit : css framework

 

framework : 프로그램을 개발하기 위한 여러 요소들과 메뉴얼인 룰을 제공하는 프로그램, 처음부터 만들어야하는게 적다.

 

https://getuikit.com/

 

UIkit

UIkit, a lightweight and modular front-end framework for developing fast and powerful web interfaces.

getuikit.com

 

getting started 클릭

 

다운로드, cdn 둘다 가능하다. cdn코드를 복사해서 html에 link하기  

마지막줄은 icons라서 필수는 아님!!

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- UIkit CDN -->
    <link 
    	rel="stylesheet" 
    	href="https://cdn.jsdelivr.net/npm/uikit@3.7.1/dist/css/uikit.min.css" />
    <script 
    	src="https://cdn.jsdelivr.net/npm/uikit@3.7.1/dist/js/uikit.min.js"></script>
 <!-- 
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.7.1/dist/js/uikit-icons.min.js"></script> 
 -->
</head>

 

연결을 하고 어떤 컴포넌트가 있는지 옆 사이드바에서 확인가능하다. 어코디언 클릭

어떻게 사용하는지 나와있다.

 

맨위에있는 가장 기본적인 형태를 복사하기

markup을 클릭하고 직접 복사해도 됨 (복사 후 인덴트 확인하기)

 

ul 안에 uk-accordion은 속성이자 값이다. 클래스명처럼 css에서 사용하면된다.

 

.uk-accordion { } 

    <ul uk-accordion>

    </ul>

 

컴포넌트 옵션이 다양하게 있는데 기본값은 0.2초 멀티플 false이다.

한번에 한가지 섹션만 나오게 되어있음 

 

 

// 인라인 스타일 넣는 방식과 같다. 
// 0.5초, 멀티플true
<ul uk-accordion="duration: 500; multiple: true;">
</ul>

// css
        .uk-accordion {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 600px;
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.178);
        }

 

'Web > CSS' 카테고리의 다른 글

CSS 변수 var() 사용하기  (0) 2022.02.09
CSS calc() 산술식(사칙연산)  (0) 2022.02.07
[animation] 도형로딩 애니메이션 #2  (0) 2021.08.02
[animation] 도형로딩 애니메이션 #2  (0) 2021.08.01
display 속성 정리 (인라인, 블럭, 인라인블럭)  (0) 2021.07.23

+ Recent posts

티스토리툴바