본문 바로가기

웹 개발

 (140)
[Web_JavaScript] 05 실습(종합(1)) - 문제 - 코드 마우스를 올려보세요 여기에 마우스를 올리면 배경색이 노란색으로 변합니다. 실습(종합(2)) - 문제 - 코드 월화수목금토일 실습(종합(3)) - 문제 - 코드 분석 결과 실습(종합(4)) 1. 문제 1 - 문제 - 코드 2. 문제 2 - 문제 - 코드
[Web_JavaScript] 04 ● callback - JS에서는 함수를 값으로 취급하기 때문에 매개변수로 전달이 가능하다. - 함수를 리턴할 수도 있다. ● setTimeout(callback, 밀리초); - setTimeout에 전달한 callback 함수에 write() 메소드를 사용했다면 기존에 작성했던 HTML 요소들이 사라진다. 실습(callback) 1. function에서 callback 사용하기 function mul(num1, num2, callback) { // 외부에서 callback에 함수를 전달했다면 if(callback) { // 매개변수로 결과를 전달해준다. callback(num1 * num2); } } function print(result) { console.log(result); } mul(4, 5,..
[Web_JavaScript] 03 ● 함수 1. 인자(파라미터, parameter) : 매개변수(선언부) 2. 인수(아규먼트, argument) : 매개변수에 들어가는 값(사용부, 호출부) ● 함수의 선언 function 식별자(param1, param2, ...) { 코드 작성 return 리턴 값; } (1) function : 함수를 선언한다는 키워드(표시) (2) parameter : 여러 개 있을 때에는 콤마로 분리하고 자료형을 따로 작성하지 않는다.(생략 가능) (3) return : 사용하는 부분에 전달할 값 작성 ● 동적 바인딩 - 컴파일 시 값에 따라 자료형이 동적으로 결정된다. ● hoisting(호이스팅) - 선언의 위치에 상관없이 존재하면 메모리에 할당된다. - 초기화 작업은 호이스팅 되지 않고 선언만 호이스팅된다...
[Web_JavaScript] 02 ● 데이터 타입과 변수 1. 자바스크립트 식별자 - 식별자(identifier)란 자바스크립트 개발자가 변수, 상수, 함수에 붙이는 이름이다. - 식별자를 만들 때 다음 규칙을 준수해야 한다. - 첫 번째 문자 : 알파벳, 언더바, $문자만 사용 가능 - 두 번째 이상 문자 : 알파벳, 언더바, 0-9, $사용 가능 - 대소문자 구분 : data와 dAta는 다른 식별자이다. - 키워드는 사용 불가 (ex) 6variable (X) (ex) student_id (O) (ex) _code (O) (ex) if (X) (ex) %calc (X) (ex) $data (O) 2. 문장 구분 - 세미콜론으로 문장과 문장을 구분한다. - 한 줄에 한 문장만 있는 경우 세미콜론을 생략할 수 있다. (ex) i = i..
[Web_JavaScript] 01 ● 자바스크립트(Javascript) 1. 퍼즐 조각처럼 코드 형태로 HTML 페이지에 내장된다. 2. 컴파일 과정 없이 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 바로 실행된다. ※ 개발의 발전을 통해 컴파일 과정이 가능해졌으며, Node.js로 서버 환경을 구축한다. [index.html] ● 웹 페이지에서 자바스크립트의 역할 (1) 웹 페이지는 3가지(HTML, CSS, JS) 코드가 결합되어 작성된다. (2) 자바스크립트는 사용자의 입력을 자리하거나 웹 에플리케이션을 작성하는 등 웹 페이지의 동적 제어에 사용된다. (3) 사용자의 입력 및 계산 - HTML 품은 입력 창만 제공하고, KEY, MOUSE의 입력과 계산은 오직 자바스크립트로만 처리가 가능하다. (4) 웹 페이지 내용 및 ..
[Web_CSS] 08 ● 가상요소 1. before - 해당 요소 앞에 넣고 싶은 속성 2. after - 해당 요소 뒤에 넣고 싶은 속성 ● HTML5와 시맨틱 태그 - HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공한다. ※ 시맨틱 : "의미, 의미론적인" ● 태그의 종류 - : non-semantic 태그, 안에 들어갈 의미를 크게 유추하기 힘들다. - 미디어 쿼리 미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술이다. @media only all and(조건문){실행문} @media: 미디어 쿼리가 시작됨을 표시 only: 미디어 쿼리 구문을 해석하라는 명령어(생략 가능) all: 미디어 쿼리를 해석해야 할 대상을 나타냄(생략 가능) and: 앞과 ..
[Web_CSS] 07 ● 미디어 쿼리 - 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술 @media only all and(조건문){실행문} (1) @media: 미디어 쿼리가 시작됨을 표시 (2) only: 미디어 쿼리 구문을 해석하라는 명령어(생략 가능) (3) all: 미디어 쿼리를 해석해야 할 대상을 나타냄(생략 가능) (4) and: 앞과 뒤의 조건을 나타낸다(생략 가능) (5) (조건문): 해당 조건을 설정, max-width: 이하, min-width: 이상 (6) {실행문}: 조건에 따라 실행할 스타일 설정 실습(position) 실습(publishing_미디어 쿼리 적용) MY SHOP SHOP 0 NEW ITEM 0 1위 나이키 10대,20대,30대 스포츠 전체상품 마이샵 1위
[Web_CSS] 06 ※ 폰트 - 구글 폰트 : https://fonts.google.com/?subset=korean - 네이버 폰트 : https://hangeul.naver.com/font ● font-size(폰트 크기, 글자 크기) 1. 절대적인 크기(px) - 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용 - 절대적 크기로 설정된 텍스트는 모든 브라우저에서 같은 크기로 표현된다. 2. 상대적인 크기(브라우저 기본 글자 크기 : 16px) - 텍스트를 둘러싸고 있는 HTML 요소들의 크기에 따라 텍스트의 크기도 같이 변하는 방식 - 사용자가 웹 브라우저를 통해 텍스트의 크기를 직접 변경할 수도 있다. (1) 백분율(%) - 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기 설정 (2) 배수(em) ..

티스토리툴바