자바스크립트을 활용하여 배경 색상을 변경시켜주는 예제를 만들어보겠습니다.
먼저, 스틱코드에 올라온 배경 색상을 변경시켜주는 코드를 즐겨찾기 추가해주세요.
<main.html>
먼저 html 코드를 작성해봅시다.
html 파일에서 스틱코드 호출태그인 backgroundimage_HTML을 입력하면
자바스크립트 배경색 바꾸기 - html 코드가 자동완성됩니다.
일단 HTML 코드에서는 수정없이, JS 파일과 CSS 파일을 작성해보겠습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="main.js">
</script>
</head>
<body>
<div id="box" class="box">
<div id="colorList">
</div>
</div>
</body>
</html><main.css>
다음으로 필요한 css 코드를 작성해줍니다.
이전과 마찬가지로 css 파일에서 스틱코드 호출태그인 backgroundimage_CSS를 입력하면
자바스크립트 배경색 바꾸기 - css 코드가 자동완성됩니다.
이제 호출태그로 수정하고 싶은 부분을 수정해주세요.
colorBox는 선택할 수 있는 색상이 박스형태로 보일 속성의 클래스 이름 입니다.
원하는 크기로 조정해주시면 됩니다.
cursor 는 crosshair로 지정하여, 색상 박스 위에 마우스 커서를 대면 십자 모양으로 커서가 바뀌도록 설정해주었습니다.
또한 selected 속성을 지정하여, 선택한 색상 박스 주위에 흰색 테두리를 씌워보도록 하겠습니다.
만약 다른색으로 변경하고 싶다면 outline 속성의 색상을 변경해주면 됩니다.
저는 코드 수정없이 진행하도록 하겠습니다.
body{
display: flex;
justify-content: center;
}
/* 색상 박스들을 배치할 박스 */
.box{
width: 300px;
height: 50px;
}
/* 색상 박스가 선택되었을 때 속성 */
.selected{
outline: 2px solid white;
}
/* 색상 박스 */
.colorBox{
width: 40px;
height: 40px;
float: left;
margin: 4px 4px 0px 0px;
cursor: crosshair;
}
<main.js>
마지막으로, 버튼의 클릭에 따라 선택한 색상에 맞게 배경색을 바꿔주겠습니다.
이전과 마찬가지로 js 파일에서 스틱코드 호출태그인 backgroundimage_JS를 입력하면
자바스크립트 배경색 바꾸기 - js 코드가 자동완성됩니다.
호출태그로 자동완성된 코드에서 수정할 부분을 수정해줍니다.
colorChip 변수 내에 "색상코드" 라고 적혀있는 부분에, 색상값을 원하는 만큼 넣어줍니다.
저는 6개의 색상 코드를 추가했습니다.
위 코드에 따르면,
colorBox의 id 명을 색상명으로 지정해준 뒤, colorBox의 배경색으로 아이디 값인 색상명을 지정해줍니다.
그리고 그 색상을 클릭했을 때, colorSet 함수가 호출됩니다.
함수가 호출되면, 배경색을 colorBox의 아이디 값(색상명)으로 변경해주는 것을 확인할 수 있습니다.
수정한 JS 코드는 하단에서 확인해주세요.
var selectedColor; //선택한 컬러값 저장할 변수
window.onload = function(){
init();
}
function init(){
var colorChip = ["#f89b00", "#f7e600", "#7dbad5", "#e091a9", "#86e6c2", "#81c147"]; //색상코드를 원하는 만큼 넣어주세요
var tag = "";
for(i=0; i<colorChip.length; i++){ //colorBox 의 id명을 색상명으로 지정해주기.
tag += "<div id="+colorChip[i]+" class='colorBox' onclick='colorSet(this)'></div>";
}
document.getElementById("colorList").innerHTML = tag;
var colorBoxList = document.getElementsByClassName("colorBox");
for(i=0; i<colorBoxList.length; i++){
colorBoxList[i].style.background = colorBoxList[i].id; //id인 색상명을 colorBox의 배경색으로 지정해주기
}
}
// onclick event
function colorSet(colorPick){
document.querySelector("body").style.background = colorPick.id; //배경색을 선택한 색상박스의 id 값으로 지정해주기
if(selectedColor != null){
document.getElementById(selectedColor).className = document.getElementById(selectedColor).className.replace(" selected", "");
}
document.getElementById(colorPick.id).className += " selected";
selectedColor = colorPick.id;
}
<완성된 화면>
참고한 스틱코드
자바스크립트로 이미지 슬라이더 구현 > stickode.com/detail.html?no=2122
스틱코드
stickode.com
'JavaScript' 카테고리의 다른 글
| [JavaScript] JSON 데이터 사용해보기 (0) | 2021.06.01 |
|---|---|
| [JavaScript] 태그 추가 삭제 기능 빠르게 구현하기 (5) | 2021.05.28 |
| [JavaScript] 애니메이션 구현하기 (anime.js 사용) (0) | 2021.05.19 |
| [JavaScript] 자바스크립트로 이미지 슬라이더 구현하기 (0) | 2021.05.06 |
| [JavaScript] 모달창 빨리 만들기 (0) | 2021.05.05 |
