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..

문서 객체 모델(DOM) 정의 및 DOM 트리 설명과 DOM 요소 접근 방법 및 수정 방법, 이벤트 처리방법을 배워보겠습니다. 1. 문서 객체 모델(DOM) 이란? 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법입니다. DOM 트리 DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분하기 때문에 이 구조 모습이 나무처럼 생겼다고 해서 DOM 트리라고 불립니다. DOM 트리는 가지와 노드로 표현합니다. 노드(Node)는 그림에서 body, div와 같은 네모상자를 가르키고, 가지는 말 그대로 그림에 보여지는 얇은 선을 가리키며 노드와 노드 사이의 연결 관계를 나타냅니다. div는 h1의 부모 노드이고, h1은 body의 자식 노드 입니다. DOM 트리..

안녕하세요! 오늘은 대표적인 내장 객체 문자(string), 배열(array), 수학(math) 객체를 이용하여 예제 문제를 풀어보도록 하겠습니다. 내장 객체(Built - in Object)란? 브라우저의 자바스크립트 엔진에 내장된 객체를 말합니다. 예제1 점심식사 메뉴 랜덤으로 정하기 코드 작성 순서 1. 변수 안에 배열 객체를 이용하여 메뉴 넣기 2. 수학 객체를 사용하여 랜덤으로 배열 인덱스 값 나타나게 하기 3. 브라우저 화면에 결과 나타내기 1. 변수 안에 배열 객체를 이용하여 메뉴 넣기 var menu 안에 메뉴를 배열 객체로 나열합니다. var 참조 변수 = [값1, 값2, 값3, ... 값n] 2. 수학 객체를 사용하여 랜덤으로 배열 인덱스 값 나타나게 하기 var menuNum = Ma..

안녕하세요! 오늘은 자바스크립트 제어문에서 중첩 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. 각 선..

안녕하세요! 오늘은 jquery를 사용하여 별점 주기 프로그램을 만들어보겠습니다. 결과물 결과물 설명 : 왼쪽의 별점을 클릭하면 별점의 갯수에 따라 오른쪽의 텍스트 및 아이콘이 변화하는 효과를 주기 위해 addClass, removeClass 이벤트를 주었으며, index() 함수로 별점 카운팅 갯수를 변수 안에 넣어 if, else if 조건문으로 script 안에 html을 추가하여 아이콘 img가 나타나도록 하였습니다. jquery CDN을 head 태그 안에 미리 링크해놨으며, 별 아이콘은 폰트어썸의 i태그를 가져왔습니다. 폰트어썸 CDN과 구글 웹폰트 CDN을 임포트 했으며, 콘텐츠를 정중앙 배치 시켰습니다. 콘텐츠를 담고있는 .star..