-최종 결과 -HTML click 0 input 타입을 text로 하고 class명으로 선택한다. 나중에 js에서 유사 배열로 가지고 오기 위해서다. SuM 합계 버튼이다. 0 합계한 값을 출력하는 태그로 사용한다. -javascript 1. html태그를 js로 가지고 오기 const sum_input = document.getElementsByClassName('sum'); const btn = document.getElementById('btn'); const display = document.getElementById('display'); const sum_input = document.getElementsByClassName('sum'); input 태그를 ClassName으로 받아와서 유사 배..

최종 결과 HTML 부모안에 input을 자식요소로 넣어준다. CSS #insert_list #drop_the_text input{ background: #343a40; background-image: url(list.png); background-position: 5px center; padding-left: 40px; border: 1px solid #2e3238; width: 100%; height: 30px; box-sizing: border-box; outline: none; border-radius: 3px; } 👉 background-image: url(list.png); 배경 이미지로 아이콘 이미지를 넣는다. 👉 background-repeat: no-repeat 이미지가 작아서 반복이 된..

-최종 결과 자바스크립트를 이용하여 input이 활성화되면 전체 영역(img_content)의 배경 이미지가 바뀌게 한다. HTML && CSS 코드 보러 가기 -HTML 1. value 값 추가 각각의 input에 value값을 넣는다. 자바스크립트에서 input의 value값으로 어떤 input을 클릭하는지 알게 하기 위해 -Javascript 1. HTML 태그 선택하기 var changeImgBtn = document.getElementsByTagName('input'); var outBackground = document.getElementById('img_content'); var backImg = ['url(eximg1.jpg)', 'url(eximg2.jpg)', 'url(eximg3.jp..

-최종 결과 -HTML 1. 전체 영역 및 버튼 구조 잡기 div로 이미지 슬라이드 전체 영역을 잡는다. input의 타입 중 radio를 선택하고 모든 input의 name값을 같게 하여 체크 시 한 개만 선택되게 한다. checked는 처음 체크될 태그를 설정할 수 있다. input의 id 값이랑 label의 for값이랑 같게 하여 label을 클릭해도 input도 활성화된다. 2. img영역 구조 잡기 js를 사용하지 않고 버튼 클릭 시 이미지가 바뀌게 하려면 img영역을 input 태그와 형제관계로 만들어야 한다. CSS에서 인접 선택자(형제 선택자)를 사용하기 위해서다. class값을 두 개로 설정하여 CSS에서 공통 스타일은 .select_img에 스타일을 넣는다. 3. 브라우저 확인 사진 4..