frontend(7)
-
[HTML/CSS/JS] 회원가입화면 만들기
🔵 실습 1 회원가입정보 아이디 중복확인 영문, 숫자 조합으로 4~12자 이내 비밀번호 영문, 숫자 조합으로 4~12자 이내 비밀번호 확인 이름 생년월일 년 월 일 음력 양력 이메일 휴대전화 - - 직업 직업선택 직장인 사업가 학생 기타 영어수강목적 시험대비 업무상 취미 기타 가입취소 가입완료 * { margin: 0; padding: 0; } ul { list-style-type: none; } input { width: 80px; height: 16px; border: 1px solid #cccccc; } input[type="checkbox"] { margin-top: 1px; } select { width: 80px; height: 20px; border: 1px solid #cccccc; fon..
2024.01.08 -
[HTML/CSS/JS] 로그인(login)화면 만들기
로그인 MEMBER LOGIN 로그인을 하시면 회원을 위한 다양한 서비스와 혜택을 누리실 수 있습니다. 아 이 디 비밀번호 로그인 자동 로그인 아직 회원이 아니세요? 아이디 또는 비밀번호를 잊으셨나요? body { margin: 0; padding: 0; color: #444444; font-size: 12px; font-family: '돋움', 'Dotum'; } li { list-style-type: none; } #login_title { width: 585px; margin: 50px; padding: 10px; border: 5px solid #e6e2d7; /*font-size: 50px;*/ } #login_box { width: 610px; height: 283px; margin-top: ..
2024.01.08 -
[HTML/CSS/JS] 달력 (calendar) 만들기
학사일정 2017년 6월 일 월 화 수 목 금 토 1 2 3 4 5 6 7 8 9 특강 10 11 12 13 14 기말고사 15 기말고사 16 기말고사 17 기말고사 18 기말고사 19 20 21 하계방학 22 23 24 25 26 27 28 29 MT 30 MT 31 body { color: #444444; font-size: 12px; font-family: '돋움', 'Dotum'; } table, th, td { border: 1px solid #aaaaaa; } table { border-collapse: collapse; } tr { height: 60px; vertical-align: top; } td { width: 76px; padding: 5px; } .bar-container { wi..
2024.01.08 -
[HTML/CSS/JS] table 생성
🔵 실습 1 더보기 HTML 삽입 미리보기할 수 없는 소스 영어 교재 안내 수강레벨 코스 A 코스 B 수강기간 세부내용 보기 레벨1 Side by Side 1 American Headway 1 1개월 세부내용보기 레벨2 Side by Side 2 American Headway 1개월 세부내용보기 레벨3 Exploring English 1 2개월 세부내용보기 레벨4 Exploring English 2 2개월 세부내용보기 table, th, td { border: 1px solid #e6ecd4; border-collapse: collapse; } table { color: #444444; font-size: 12px; font-family: '돋움', 'Dotum'; } tr { height: 30px; ..
2024.01.08 -
[JavaScript] 이벤트 리스너 종류
이벤트리스너 웹 페이지의 상호 작용을 처리할 수 있게 해 줌 특정 사용자 행동에 응답하는 역할 // 버튼 클릭 시 메시지 출력 function showMessage() { alert('안녕하세요!'); } // 웹 페이지 로딩 시 실행 window.onload = function() { // 버튼에 이벤트 리스너 추가 var button = document.getElementById('myButton'); button.addEventListener('click', showMessage); }; Click 이벤트 리스너 사용자가 요소를 클릭할 때 발생 element.addEventListener('click', function() {...}); Change 이벤트 리스너 입력 필드나 선택 상자 등의 값이 ..
2023.12.22 -
[JavaScript] Document 정의 및 사용 방법
document 웹 페이지의 문서 객체 모델(Document Object Model, DOM)을 나타내는 JavaScript의 내장 객체 중 하나 HTML 문서의 구조를 표현하고, JavaScript를 통해 이 구조에 접근하고 조작할 수 있게 해주는 인터페이스를 제공 웹 페이지의 전체 문서를 나타내며, 해당 문서 내의 요소들에 접근하고 조작할 수 있는 다양한 메서드와 속성을 제공 JavaScript로 HTML 문서를 동적으로 조작 * 요소 선택 document.getElementById( ) 지정된 ID를 가진 요소를 선택 var myElement = document.getElementById('myId'); document.getElementsByClassName( ) 지정된 클래스를 가진 모든 요소를..
2023.12.22