본문 바로가기

Web 기초

 (26)
[Web] 웹 기초 (14) - JavaScript #7 함수 (function) 함수 자바스크립트에서 함수는 클래스역할과 메소드 역할을 둘 다 함. 익명함수 function에 이름이 없음 frm.btn.onclick = function() { ... } callback함수 frm.btn.onclick = abc; // function abc( ) { ... } 를 의미함. // "btn을 클릭하면 abc라는 함수를 실행하라." // 여기서는 abc() 로 쓸 수 없다. 이름만 써야함 h4.onmouseover = abc; ⇒ h4에 마우스를 올리면 abc 함수가 실행됨 선언적 함수 (+ 함수적 선언) function abc ( 매개변수 ) { ... } ※ 국비지원으로 학원에서 배울 때 강사님이 hoisting -> hoising으로 가르쳐주셔서 계속 "hoising" 으로 나오지만..
[Web] 웹 기초 (13) - JavaScript #6 switch, for in / for of switch 예제 1 : prompt를 사용하여 정수 하나를 입력받아 짝수, 홀수를 구분하여 출력하고, 만약 숫자가 아니라면 '숫자를 입력하세요' 메시지를 div창에 출력하시오. 예제 2 : 성적을 입력받아 학점을 구하여 성적과 학점을 div에 출력. 예제 3 : 점수 60 이상이면 배경색 파란색, 미만이면 빨간색으로 소스코드 switch prompt를 사용하여 정수 하나를 입력받아 짝수, 홀수를 구분하여 출력하고, 만약 숫자가 아니라면 '숫자를 입력하세요' 메시지를 div창에 출력하시오. for in for in : array의 [인덱스] 번째가 찍힌다 x : 배열의 인덱스값 예시 let p = ['javascript', 'java', 'python', 'kotlin']; for (x in p) { /..
[Web] 웹 기초 (12) - JavaScript #5 var, let 자바스크립트 변수 - var, let * 참고 const : 변수가 재할당되지 않는 상수. 변경하지 않는 값이라면 let보다는 const 사용 권장 var는 전역변수 : for 블럭에서 사용하고 console에 출력해도 값을 가지고 있다. let은 for블럭에서 사용하고 버려지기 때문에 블럭밖에서 출력하려고 하면 undefined 오류가 뜬다. var는 항상 재선언할 수 있다. (let은 에러남) 이미 선언된 변수라서 다시 선언할 수 없다는 오류 함수가 달라지면 영역이 달라져서 쓰이지 못 함. var, let 제외하고 변수명만 쓰면 undefined가 뜨지 않음. var는 hoisting 처리가 돼서 변수가 먼저 메모리에 올라간 뒤에 처리됨 let은 hoisting 처리가 되지 않아서 사용전에 선언을 꼭..
[Web] 웹 기초 (11) - JavaScript #4 alert, comfirm, prompt 입력상자, backtic alert, comfirm, prompt 입력상자 alert : 윈도우 경고창. 말 그대로 경고창만 띄워주고 '확인' 버튼만 누르면 이벤트 종료. confirm : '확인' '취소' 버튼에 따라 true, false 리턴. prompt : 값을 입력받아서 리턴한다. "확인" 누르면 return값 true backtick 입력한 그대로 출력하고 싶을 때 사용! 작은 따옴표(')가 아니라, 키보드 숫자 1 왼쪽에 있는 backtick 기호(`) backtick 문장 안에 ${ } 를 쓰면 변수를 삽입할 수 있다. 문자열 + 변수 + 문자열 이 번거로울 때 유용함 백틱 변수 사용 예시 let animal = 'monkey'; let food = 'banana'; console.log(`${animal} lov..
[Web] 웹 기초 (10) - JavaScript #3 checkbox, selectbox 제어 checkbox 제어하기 예제 : 가고싶은 산, 살고싶은 지역, 가봤던 나라 복수선택하여 선택값 출력하기 return 하는 이유 : alert가 계속 나오지 않고, 하나만 나오면 return 시켜 밑에 for문 실행되지 않도록 하기 위해서. (밑으로 흘러가지 않도록 끊어주는 역할) 소스코드 checkbox 가고싶은 산을 고르시오. 백두산 한라산 금강산 설악산 치악산 살고싶은 지역을 선택 강원도 경기도 전라도 경상도 충청도 제주도 가봤던 나라를 선택 미국 중국 일본 태국 베트남 호주 selectbox 제어하기 예제 : selectbox로 과정명을 하나만 선택하고 신청 과정을 복수로 선택할 수 있도록 구현 multiple = 'multiple' 여러개 선택할 수 있는 select 상자 frm이 가지고 있는 ..
[Web] 웹 기초 (9) - JavaScript #2 if문, for문 If 예제 1 정수 하나를 폼으로부터 전달받아 60 이상이면 '합격'을, 60 미만이면 '불합격'을 textarea에 출력하라. IF 정수 하나를 폼으로부터 전달받아 60 이상이면 '합격'을, 60 미만이면 '불합격'을 textarea에 출력하라. 정수 Number( frm.su.value ) : 텍스트 필드에서 가져온 텍스트형 숫자를 실제 숫자값으로 형태변환 If 예제 2 정수 하나를 입력받아 90 이상이면 '전액 장학생' 70 이상이면 '반액 장학생' 70 미만이면 '전액 납부'가 있는 라디오 버튼의 상태값을 변경하시오. if(II) 정수 하나를 입력받아 90 이상이면 '전액 장학생' 70 이상이면 '반액 장학생' 70 미만이면 '전액 납부'가 있는 라디오 버튼의 상태값을 변경하시오. 정수 전액장학생..
[Web] 웹 기초 (8) - JavaScript #1 개요, 사용방법 javascript 개요 인터프리터 언어 (컴파일러가 없음) ⇒ 한줄번역, 한줄실행 실행환경 : 웹 브라우저 (웹 브라우저가 인터프리터를 내장하고 있다) 변수형이 없다. (지역, 전역형 변수는 존재) 지역형 변수 : var 또는 let으로 선언 var : hoisting이 됨. let : hoisting이 되지 않음. hoisting : 사용되기 전에 메모리에 탑재되는 현상 (불필요한 메모리가 들어갈 수 있음) 배열의 크기는 가변적이고, 1차원 배열만 존재한다. (1차원 쪼개서 2차원을 만들 수는 있음) 문장의 끝을 나타내는 ' ; ' (세미콜론) 은 생략 가능하다. 사용방법 안에서 작성 태그 안에서 작성 (비추천) 외부에 스크립트만 작성하여 현재 파일에서 사용하는 방법 (많이 사용) 데이터의 구조는 J..
[Web] 웹 기초 (7) - CSS #3 position, display, transform, transition 등 Position absolute : 절대좌표 fixed : 스크롤 내려도 좌표값 바뀌지 X static : 기본값(default) 이라서 굳이 안 줘도 기본으로 설정되어 있음 absolute Absolute 영역 좌표값 지정 안 해서 (0,0)으로 설정 → 다 겹쳐보임 absolute 는 좌측 상단 좌표를 기준으로 relative 현재 자기 자리에서 옆으로 이동하는 형태 fixed 스크롤 내려도 계속 따라옴 (fixed돼서) 스크롤 올리거나 내릴때 따라다니다가 마우스 올리면 메뉴 나타나도록 효과 줄 수 있음 (제이쿼리 등으로) clear none, left, right, both, initial, inherit float 기능 줬던거 없애기 (일반적으로 both 많이 씀) Display none : 영역..
[Web] 웹 기초 (6) - CSS #2 overflow, visibility, display CSS#2 문단속성 text-overflow, overflow - overflow : hidden, auto 혹은 scroll (scroll 하면 오른쪽에도 세로 스크롤 생김) - text-overflow text-overflow : clip; text-overflow : ellipsis; Visibility / Display visibility : visible, hidden display : none, block
[Web] 웹 기초 (5) - CSS #1 사용법, 선택자, 가상클래스 CSS 사용법 1. 단독으로 사용 2. 태그 내에 style 적용 위 여백 10px 3. style.css 따로 만들어서 @import로 연결 4. style.css 따로 만들어서 link 태그로 연결 CSS 선택자 p#abc : p 태그 중 id가 abc인 요소 p.abc : p 태그 중 class가 abc인 요소 p[title] : p 태그 중 title속성을 갖고 있는 태그 p>div : p 태그안에 있는 요소 중 div 태그(하위단계는 1단계까지만) p div : p 태그 안에 있는 모든 div 태그 (단계와 상관없이 하위 태그 모두 선택) p+div : p태그 바로 뒤에 있는 div 태그 p > div p 태그 내에 ol 태그가 있고 ol 태그 안에 div가 있으면 ( 2단계 하위) 적용되지 않..

티스토리툴바