HTML & CSS & JavaScript/JavaScript 연습문제 (10) 썸네일형 리스트형 JS 연습문제 10 - 체크박스 실습 JS 연습문제 10 - 체크박스 실습CSS#result{ height: 200px; border: 2px solid red;}HTML 취미 전체선택 종합 소설 시/에세이 경제/경영 자기계발 아동 여행 과학 역사/문화 외국어 컴퓨터 .. JS 연습문제 9 - 로그인 화면 JS 연습문제 9 - 로그인 화면CSSform .btn { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; cursor: pointer; width: 100px; margin-bottom: 10px; margin-top: 10px;}button.btn:hover { opacity: 0.8; color: yellow;}.cancel:hover { opacity: 0.8; background: red;}HTML로그인 로그인 Login Email .. JS 연습문제 8 - 회원 가입 양식 ▶ JS 연습문제 8 - 회원 가입 양식회원 가입 양식 포함 사항- 아이디 / 비밀번호 및 비밀번호 확인 / 이름 / 성별 / 전화번호 / 이메일CSSfieldset{width: 500px;}#resetBtn{margin-left: 150px;}.confirmId{background-color: green;}.errorId{ background-color: red; color: white;}.confirm{color: green;}.error{color: red;}HTML 회원 가입 양식 아이디 중복확인 .. JS 연습문제 7 - 로또 번호 생성 ▶ 로또 번호 생성CSSbody{ display: flex; flex-direction: column; justify-content: center; align-items: center;}#container{ margin-top: 200px; display: flex;}#container>div{ border: 1px solid black; border-radius: 50px; margin-left: 30px; width: 70px; height: 70px; font-size: 45px; font-weight: bold; text-align: center;}#createLotto{ margin-top: 40px; width: 300px; heig.. JS 연습문제 6 - 색깔 변경_표준 이벤트 모델 적용 ver. ▶ JS 연습문제 6 - 색깔 변경_표준 이벤트 모델 적용 verHTML 현재 transition-duration : 0초 transition-duration 변경 : 변경 초기화JavaScript// 색 출력 영역// 요소를 얻어와서 변수에 저장const container = document.getElementsByClassName('container')[0];const area = document.getElementsByClassName('area');const box = document.getElementsByClassN.. JS 연습문제 5 - 색깔 변경 ▶ JS 연습문제 5 - 색깔 변경HTML 현재 transition-duration : 0초 transition-duration 변경 : 변경 초기화JavaScript// 색 출력 영역(style)// 클래스명, 태그명, name속성값, querySelectAll() 같은 경우// 요소를 얻어올 때 배열 형식으로 반환!!const container = document.getElementsByClassName('container')[0];const area = document.getElementsByClassName('area'.. JS 연습문제 4 - 간이 계산기 ver.4 ▶ JS 연습문제 4 - 간이 계산기 ver.4간이 계산기 만들기첫 번째 값 : 두 번째 값 : 이벤트가 발생한 요소 자체를 의미(여기에서는 클릭된 연산자 버튼) -->+-*/%계산 결과 : See the Pen 24-12-25 js review-pr4 by Namu (@Namu-the-sans) on CodePen. JS 연습문제 3 - 간이 계산기 ver.3 ▶ JS 연습문제 3 - 간이 계산기 ver.3간이 계산기 만들기첫 번째 값 : 두 번째 값 : 이벤트가 발생한 요소 자체를 의미(여기에서는 클릭된 연산자 버튼) -->+-*/%계산 결과 : See the Pen 24-12-25 js review-pr3 by Namu (@Namu-the-sans) on CodePen. 이전 1 2 다음