인천 일보 아카데미 35일차 -숙제- 계산기 / 학점 관리 프로그램 계산기 만들어보기 계산기 number1: number2: 계산결과: 학점관리 프로그램 만들기 JAVA 성적: html 성적: 학점: guping.tistory.com 계산기 - 풀이 number1 : number2 : 계산결과 : 계산 형변환에 사용한 Number()함수와 , pareInt()함수의 차이는? 학점계산기 - 풀이 JAVA 성적: html 성적: 학점: 학점계산 로그인 - id 길이(length) 체크 해당 결과를 띄워주는 기능을 만들어봅시다 *head부분에 style로 margin100 줌* 이메일 이메일 작성 공간을 알려주는 h6태그 input태그를 이용해 text바를 생성 onblur를 이용해 사용자가 text바를 탈출..
DOM - 응용문제 풀어보기 1. buttond을 만들고 클릭하면 onclick을 이용하여 함수 fun1을 호출하고 결과를 출력합니다 script 2. button을 만드는 방식은 위와 같습니다 다른점은 fun2함수를 호출합니다 script 3. 이번에는 함수 fun3을 호출합니다 4. 기출 변형입니다 버튼 4를 누르면 함수 fun4를 호출합니다 이번 문제는 상당히 자주사용하고 중요하기 때문에 2가지 방법 모두 알아보겠습니다 DOM - 응용 이미지 변경 이미지 교체 버튼을 누르면 이미지가 변경되게 script를 사용해봅시다 먼저 호구마2라고 이름지은 고구마 사진을 넣어줍니다 이미지 교체 버튼을 누르면 이미지 교체이기 때문에 button 태그에 이벤트 onclick을 사용합니다 onclick 이벤트가 발생..
DOM이란 ? html의 body부분을 javascript로 가져와 변수로 사용하기 위해 주로 사용됩니다 쉽게 말하면 javascript에서 html을 제어하는것을 말합니다 DOM - document의 사용 예시 Document 객체 Document 객체는 웹 페이지 그 자체를 의미합니다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 합니다. 이렇게 document로 html의 모든 정보를 가져와 document의 메소드와 함께 사용합니다 아직 다 배우지는 못했지만 document 객체의 대표적인 메소드 기능은 html 요소 선택 , html 요소 생성 , html 이벤트 추가 , html 객체 선택 정도가 있습니다 - html 요소 선택 그중 오늘 ..
javascript의 변수 변수 선언 var num1 = 10; let num2 = 10; const num3 = 10; javascript에서는 따로 변수를 선언하지 않는다. 타입은 존재하지만 따로 쓰지 않는다 (아마 javascript에서는 자동 형변환을 지원하기 때문인듯 하다) javascript 각 변수의 차이점 변수 선언 var num1 = 10; let num2 = 10; const num3 = 10; var는 let 과 const가 만들어지기 전에 사용되던 변수입니다 var에는 여러가지 문제점이 있는데요 전역변수이기 때문에 변수의 이름을 실수로 동일하게 변경하고 값을 넣는다면 큰 문제가 발생할 수 있기 때문이고 for문 사용에도 for문을 빠져나온 변수가 초기화되지 않는 현상이 있다고합니다 ..
form 태그에서 button을 사용하면 ? NAVER 회원가입창 만들어보기 div를 만들고 class를 지정했습니다 이후 container text - center로 container 클래스에 스타일을 바로 지정해줬습니다 이제 container 클래스는 센터로 정렬됩니다 mt - 5는 margin to 5를 뜻합니다 a태그를 이용하여 링크를 걸어주고 target으로 새창이아닌 본창에서 링크가 켜지게 했습니다 a태그 안에 img태그를 이용하여 링크위에 다운받은 이미지를 덮어씌워 이미지를 누르면 링크로 이동합니다 아이디 비밀번호 class 이름이 container 이기 때문에 중앙으로 정렬됩니다 label의 for의 값과 양식..
layout - 만들어보기 layout - 영역 구분 먼저 body에 레이아웃의 영역을 설정해준다 이번 만들어 보기에는 4가지 영역으로 ( heder , main , section , footer )구분했다 layout - 스타일 적용 전날 만든 menu + layout 합쳐보기 Home 저는요 Portfolio Contact Me 전날 만든 menu를 div class = "menu" 안에 복사 붙여넣기 하였다 menu 클래스로 지정한 div에 넣었기 때문에 스타일에도 클래스 선택자를 이용하여 .menu스타일 안에 복사 붙여넣기 해주었다 mediaquery 알아보기 mediaquery는 웹 페이지를 보는 디바이스나 화면 크기의 특성에 따라 다른 스타일을 적용하는 쿼리입니다. @media를 사용하여 스마..
table 태그 기본 구성 섹션1 섹션2 섹션3 섹션4 섹션4 섹션5 table태그는 표를 만들때 주로 사용하는 태그입니다 table 태그는 다른 태그들과는 다르게 thead 태그와 tbody태그로 나눠서 사용되고 표를 만드는 태그이기 때문에 정보를 집어넣기 위해 tr ,td ,th ,tb 태그를 사용합니다 아래 사진을 참고해주세요 사진을 보면 알겟지만 thead에는 표의 헤더를 넣어주고 아래 tbody에는 표해더에 맞게 정보를 넣어준다 살제 사용에는 굳이 thead와 tbody를 쓰지 않고 th와 td 만주로 사용한다 th는 표의 헤더로 지정해주고 td는 표에 넣어줄 데이터로 사용된다 ul 태그(unordered list) , ol태그(ordered list) , li태그 기본 구성 안녕 하세요 ul ..
