개발한 것/배운 것
vanilla Javascript 30days 프로젝트 - 03. Playing with css variables and JS
개요 : spacing, blur, base color 요소를 설정시, 하단 이미지의 css 스타일이 함께 변경되는 웹페이지
개발 필요 기능
1) html + css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Scoped CSS Variables and JS</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<h2>Update Variables with <span class="hl"></span></h2>
<div class="controls">
<label for="spacing">Spacing:</label>
<input
type="range"
id="spacing"
name="spacing"
min="10"
max="200"
value="10"
data-sizing="px"
oninput="setSpacing(this.value)"
/>
<label for="blur">Blur:</label>
<input
id="blur"
type="range"
name="blur"
min="0"
max="25"
value="0"
data-sizing="px"
oninput="setBlur(this.value)"
/>
<label for="base">Base Color</label>
<input
id="base"
type="color"
name="base"
value="#ffc600"
oninput="setColor(this.value)"
/>
</div>
<img id="image" src="https://source.unsplash.com/7bwQXzbF6KE/800x500" />
<script src="./app.js"></script>
</body>
</html>
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 0px;
}
img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}
body {
text-align: center;
background: #193549;
color: white;
font-family: "helvetica neue", sans-serif;
font-weight: 100;
font-size: 50px;
}
.controls {
margin-bottom: 50px;
}
input {
width: 100px;
}2) 자바스크립트
- html에서 설정하는 spacing, blur, base color의 값을 받아오고, 이를 이미지에 조정하는 함수
const spacingBar = document.getElementById("spacing");
const blurBar = document.getElementById("blur");
const baseColor = document.getElementById("base");
const img = document.getElementById("image");
function setSpacing(val) {
img.style.padding = `${val}px`;
}
function setBlur(val) {
img.style.filter = `blur(${val}px)`;
}
function setColor(val) {
img.style.background = `${val}`;
}새로 배운 것
1. 초기 CSS 값 선언
- :root {} 으로 기본 값을 선언할 수 있으며 --을 앞에 붙임
- 선언한 기본 값의 재사용은 var(--spacing)등으로 사용 가능
2. html input의 oninput 기능
- input에서 값이 변경될 경우에 수행할 함수를 지정할 수 있음
회고
강의에 나온 방법을 그대로 따라하는 대신에 기본 구조에 직접 코드를 짜보기로 했고, 시행착오가 많았지만 원하는 기능 구현에 성공했다. 계속 직접 찾아보고 해보면서 익숙해져야 할 것 같다. 내일은 오전에 별다른 스케쥴이 없으니 강의 두개를 목표로 잡으려 한다.
내일 할 것
1. freecodecamp 10문제 풀기
2. 30days 자바스크립트 4, 5 강의 완료
3. udemy JS 강의 - movie 완료
4. github 공부 및 글 업로드
'프로그래밍' 카테고리의 다른 글
| wecode 사전스터디(8/8) 로그 (0) | 2020.08.08 |
|---|---|
| wecode 사전스터디(8/5) 로그 (0) | 2020.08.06 |
| wecode 사전스터디(8/3) 로그 (0) | 2020.08.04 |
| wecode 사전스터디(8/2) 로그 (0) | 2020.08.02 |
| wecode 사전스터디(7/31) 로그 (0) | 2020.08.01 |
댓글