본문 바로가기

HTML & CSS & JavaScript

 (55)
JS 연습문제 10 - 체크박스 실습 JS 연습문제 10 -  체크박스 실습CSS#result{ height: 200px; border: 2px solid red;}HTML 취미 전체선택 종합 소설 시/에세이 경제/경영 자기계발 아동 여행 과학 역사/문화 외국어 컴퓨터 ..
함수 (Function) 기본적인 함수의 선언, 정의, 호출- function 함수명(매개변수){   // 함수 선언            // 함수 정의   }   함수명( );   // 함수 호출0function clickCount(btn){ btn.innerText = Number(btn.innerText) + 1;}See the Pen 24.12.20_함수1-1 by Namu (@Namu-the-sans) on CodePen.익명 함수- function(매개변수){   // 함수 선언          //  함수 정의   }- 이름이 없는 함수이기 때문에 필요할 때 마음대로 호출 불가- 이벤트 핸들러처럼 바로 동작하는 함수가 필요한 경우   또는 변수, 매개변수에 함수를 저장해야 하는 경우에 사용즉시 실행 함수- ( ..
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 ..
요소 추가 / 제거 요소 추가 / 제거HTML 추가계산CSS/* 한 줄 */.row{ margin: 5px 0; display: flex;}/* input 태그 */.in{width: 100px;}/* span 태그(X 버튼) */.remove{ border: 1px solid black; border-radius: 50%; display: inline-block; width: 20px; margin-left: 5px; text-align: center; font-weight: bold; cursor: pointer;}JavaScript// "추가" 버튼이 클릭되었을 때document.getElementById('add').addEventListener('click', function(){ // ..
DOM ( Document Object Model) DOM ( Document Object Model)- HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것  → HTML 문서에 작성된 내용을 트리구조(계층형으로 표현)로 나타냈을 때,       각각의 태그, TEXT, COMMENT 등을 Node라고 함document : {    DOCTYPE : html,    HTML : {       HEAD : {          TITLE : { TEXT : "문서 제목" },          STYLE : {...},          META : {...}       } ,       BODY : {              H1 : { TEXT : "제목", ATTRIBUTE : "속성" },              COMMENT : {TEXT : ..
객체 ( Array ) 자바스크립트 객체- 자바스크립트의 객체는 { }(중괄호) 내에 Key : Value(Map 형식)가 모여있는 형태로 작성됨- {K : V, K : V, K : V, ...} : 자바스크립트 객체- (참고) 자바스크립트 객체 모양의 문자열   == JSON(JavaScript Object Notation, 자바스크립트 객체 표기법)   "{K : V, K : V, K : V}"- 자바스크립트에 객체를 생성하는 방법   1) { } : 객체 리터럴 표기법을 이용한 생성 방법   2) 생성자 + new 생성자( ) 를 이용한 생성객체 생성 1// 객체 생성 1document.getElementById('btn1').addEventListener('click', function(){ const div1 =..
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 회원 가입 양식 아이디 중복확인 ..
정규 표현식 (Regular Expression) 정규 표현식(Regular Expression)- 특정한 규칙을 가진 문자열 집합을 표현하는데 사용하는 형식의 언어- 정규 표현식을 이용하면 입력된 문자열에 대한   특정조건 검색, 일치여부 판단, 치환에 대한 조건문을 간단히 처리할 수 있음- 정규 표현식 참고 사이트1) https://regexper.com/ : 작성한 정규표현식을 그림으로 나타내주는 사이트2) https://regexr.com/ : 정규표현식 테스트 사이트3) https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D : MDN - 정규표현식 설명정규 표현식 객체 생성 및 확인하기1. 정규 표현식 객체 생성 방법   1) const reg..

티스토리툴바