letsgoddud

안녕하세요! 오늘은 저번에 배워본 DOM 요소에 노드 추가하는 방법으로 참가자 신청 명단 프로그램을 만들고, 노드 순서 변경 및 삭제하는 방법을 배워보겠습니다. 1. 참가자 신청 명단 프로그램 만들기 참가자 신청 명단 프로그램 만들기 순서 1. [신청] 버튼에 이벤트 함수 지정하기 2. 이벤트 함수 정의하기 3. 화면에 나타내기 0단계 HTML, CSS 기본세팅 HTML 삽입 미리보기할 수 없는 소스 1단계 [신청] 버튼에 이벤트 함수 지정하기 신청 button 태그에 click 이벤트가 발생했을 때 실행할 newRegister() 함수를 지정합니다. * return false는 입력 내용을 서버로 전송하는 기능을 사용하지 않겠다는 뜻입니다. 2단계 이벤트 함수 정의하기 function newRegist..

안녕하세요! 오늘은 DOM으로 스타일 수정하는 방법과 DOM에 요소 추가하는 방법을 배워보겠습니다. 1. 웹 요소의 스타일 가져와서 수정하기 자바스크립트를 사용하여 스타일 속성 값을 가져오거나 원하는 값으로 수정할 수 있습니다. 그 중에서도 화면에 표시하고 감추는 방법을 풀어보겠습니다. [완성본 미리보기] 웹 요소를 화면에 표시하기 / 감추기 1. [상세 설명 보기] 버튼 만들기 2. [상세 설명 닫기] 버튼 만들기 0단계 HTML, CSS 기본 세팅 1단계 [상세 설명 보기] 버튼 만들기 #view는 [상세 설명 보기] 링크 부분이고, #detail은 상품 상세 정보 입니다. 상품 상세 정보는 처음부터 화면에 가려져 있는 display = none 상태 입니다. view.addEventListener(..

안녕하세요! 오늘은 DOM 요소 예제 문제 풀이와 이벤트 처리하는 방법을 배워보겠습니다. 1. DOM 요소 예제 풀이 - 선택한 상품 이미지 표시하기 선택한 상품 이미지 표시하기 예제 풀이 순서 1. querySelector(),querySelectorAll() 함수를 사용하여 큰 이미지와 작은 이미지 가져오기 2. for문을 사용하여 작은 이미지를 클릭할 때 큰 이미지로 나타나게 실행하기 3. 큰 이미지의 파일 경로 바꾸기 0단계 HTML, CSS 기본 셋팅 1단계 querySelector(),querySelectorAll() 함수를 사용하여 큰 이미지와 작은 이미지 가져오기 큰 이미지는 id="cup", 작은 이미지는 class="small"의 값을 주었습니다. bigPic이라는 변수에 querySe..

안녕하세요! 오늘은 자바스크립트 제어문에서 중첩 else if문, 중첩 for문을 이용한 예제 2문제를 풀어보도록 하겠습니다. 예제1 회원가입 문구 만들기 코드 작성 순서 1. 변수에 id와 pw값 저장하기 2. prompt() 메소드로 아이디, 비밀번호 값 받기 3. 바깥쪽 조건문(조건문1)에 아이디 값이 일치한지 확인하기 4. 안쪽 조건문(조건문2)에 비밀번호 값이 일치한지 확인하기 5. 화면에 결과 나타내기 1. 변수에 id와 pw값 저장하기 var id와 var pw에 각각 아이디와 비밀번호를 저장해 줍니다. 저장한 아이디와 비밀번호가 같아야만 조건이 실행됩니다. 2. prompt() 메소드로 아이디, 비밀번호 값 받기 prompt() 메소드를 통해 아이디와 비밀번호 값을 받고, user_id, ..

안녕하세요! 오늘은 자바스크립트의 연산자, 변수 등을 사용한 간단한 프로그램 만들기 예제 2가지를 풀어보겠습니다. 예제 1 적정 체중을 구하는 테스트기 만들기 *적정 체중 계산법 적정 체중 = (신장 - 100) * 0.9 코드 작성 순서 1. prompt() 메서드로 이름, 신장, 몸무게와 같은 필요 정보 입력값 받고 변수 지정하기 2. 적정 체중 계산법을 사용하여 적정 체중인지 아닌지 구하기 (오차범위 ±5) 3. 삼항 조건 연산자를 사용하여 화면에 나타내기 1. prompt() 메서드로 이름, 신장, 몸무게와 같은 필요 정보 입력값 받고 변수 지정하기 var name, var height, var weight를 통해 각각의 이름, 신장, 몸무게와 같은 필요 정보를 prompt() 메소드를 통해 받습..

안녕하세요! 오늘은 접두어 webkit를 사용하여 그라디언트 텍스트를 만들어보겠습니다. IE에서 지원하지 않는 속성이니 참고해주세요! 1. HTML, CSS setting h1 태그에 맘에 드는 문장의 텍스트를 넣어주었습니다. 또한, CSS에 원하는 폰트를 import하고 지정해주었으며, body를 가운데 배치해주었습니다. 2. 텍스트에 그라디언트 주기 이제 이 상태에서 텍스트에 그라디언트를 주도록 하겠습니다. background에 linear-gradient 색상을 지정해 준다면 이렇게 나타납니다. 저희는 배경이 아닌 텍스트에 그라디언트를 주기를 원하죠! 텍스트에만 그라디언트를 주기 위해서는 접두어 webkit가 필요로 합니다. 3. 접두사 webkit 속성 주기 -webkit-background-cl..

안녕하세요! 오늘은 CSS에서 변수 var()를 사용해 보도록 하겠습니다. CSS에 변수 var()를 사용하는 이유? CSS에서 변수 var()를 지정하면 각각의 선택자에 공통된 CSS를 주고싶을 때 선택자 하나하나 별도로 속성과 값을 지정해주지 않고, 미리 지정해 둔 변수를 넣어 한번에 선택자를 관리할 수 있어 편리합니다. 1. HTML setting html에 4개의 버튼을 만들고 class명을 지정해 주었습니다. 2. 변수 지정 CSS에 변수 지정 방법 1. :root 선택자 만들기 :root 안에 변수를 넣어줍니다. 수정에 용이하도록 최상단에 배치합니다. 2. --변수명 변수 이름을 지정할 때는 ' --변수명 ' 형태로 지정합니다. 변수명은 최대한 직관적으로 알아보기 쉽게 정해줍니다. 2. 각 선..