본문 바로가기

Dev.FrontEnd

 (51)
6. hover와 transition을 활용하자 6. hover와 transition을 활용하자.코드먼저 보겠다.html>123456789101112131415161718 JS Bin Colored by Color Scriptercs css>1234567891011121314.scroll-icon-down span{ border: solid #0F0 3px; padding: 5px 20px;; transition: all 0.5s; transition-timing-function: ease;}.scroll-icon-down span:hover{ transition: all 0.5s; transition-timing-function:ease; border: solid #CFCFCF 3px; border-radius: 50%; background-colo..
3-3. 자바스크립트의 함수 / Argument Chapter 3-3. 자바스크립트의 함수 / ArugumentArgument 함수 인자 Argument parameter : 함수를 정의하는 코드에서 괄호 안에 정의하고 있는 변수 ( = 매개변수 ) arguments : 함수를 호출하는 곳에서 함수에 전달하는 값 ( = 인자 ) argument는 배열과 비슷한 객체를 말한다. 자바스크립트에서는 함수에서 정의하는 매개변수 개수와 실제로 호출에 사용되는 인자의 개수가 반드시 같지 않아도 된다. 함수에서 정의한 매개변수의 수보다 많은 수의 인자값이 전달되면 자바스크립트는 Arguments 객체를 생성하고 ( Arguments 타입의 객체는 함수가 호출되면 자바스크립트가 자동으로 생성하는 객체이다.) 객체의 값을 앞에서부터 차례로 받아서 매개변수에 할당하고 ..
3-2. 자바스크립트 함수 / 정의, 종류 Chapter 3-2. 자바스크립트의 함수 / 정의, 종류함수 정의 3가지 방법 첫번째,123function add(x,y){ return x+y;}cs파싱하는 단계에서 함수 변수인 add가 정의되고, 함수를 호출하면 런타임에 x,y가 정의된다. 두번째,123var add = function(x,y) { return x+y;}cs실행코드블록을 갖는 함수를 정의해 add라는 변수에 할당하고 있다. 이렇게 정의된 함수는 이름이 없다. 이름 대신 변수로 호출할 수 있다. 실행코드로서 런타임에 함수가 정의된다. 세번째,1var add = new Function(“x”, “y”, “return x+y;”);csFunction이라는 생성자(객체)를 사용하여 함수를 정의하는 방법으로 new와 함께 사용해야 한다.이 ..
3-1. 자바스크립트의 함수(Function) / 함수의 역할과 함수 모델링 Chapter 3-1. 자바스크립트의 함수 / 역할, 모델링함수(Function)함수는 자바스크립트를 이해하는데 핵심이 되는 컴포넌트다. 자바스크립트의 함수와 메소드는 전혀 다른 개념이다. 자바스크립트 함수는 메소드 역할을 할 수 있지만 객체지향 프로그래밍의 메소드는 자바스크립트의 함수 역할을 할 수가 없다.code>1234function add(x, y) { var total = x + y; return total;}cs 함수의 역할 세 가지는 다음과 같다. 역할1. 호출 가능한 루틴으로서의 함수 실행코드를 갖고 있으면서도, 일반 객체처럼 멤버를 가질 수도 있다. 역할2. 값으로서의 함수(인자로 전달 가능, 변수에 할당 가능, 다른 함수의 반환값으로 사용가능) 함수를 변수에 담을 수 있다. 역할3. 다..
5. background 속성을 알아보자 / 그럴듯한 웹페이지 만들기 background image와 transparent만 잘 알아도 그럴듯한 웹 페이지를 구성할 수 있다. #image{ background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(/img/baby1.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; } background: linear-gradient 속성과 url 속성을 살펴보자. url을 통해 원하는 image를 로드한다. 그리고 linear-gradient를 통해서, 그라데이션을 주는데, 여기서 중점을 둬야할 곳은 ..
2. 자바스크립트 자료형 / 원시데이터형 Chapter 2. 자바스크립트의 자료형원시타입 리터럴(literal)표현이 있다. 소스 코드에서 고정된 값을 표현할 때 사용한다. 다른 언어의 원시 자료형과 비슷하지만, 자바스크립트는 모든 값을 객체처럼 다루므로 원시 자료형에도 프로퍼티와 메소드가 존재하는 것처럼 보인다. (null, undefined 제외) 숫자NumberNumber 객체를 이용하여 숫자를 나타낼 수 있다. Number 객체는 원시 타입의 숫자를 객체로 만들기 위한 래퍼(wrapper)다. (그리고 숫자 리터럴을 이용하여 나타낼 수 있다.) Infinity앞에서 본 최대 숫자를 벗어나는 숫자를 표현하기 위해 Infinity라는 값이 정의되어 있다. 0으로 나누면 Infinity가 반환된다. 최소값을 벗어나는 숫자를 표현하기 위해서 -..
1. 자바스크립트의 기본 개념, 프로그램 실행절차 / JavaScript as language Chapter 1. 자바스크립트의 기본 Concept, 프로그램 실행절차자바스크립트는 절차 지향적, 객체 지향적, 함수 지향적 특징을 모두 지원한다. 객체 지향 언어도 클래스 기반과 프로토타입 기반으로 나뉘게 되는데, 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원한다.(ECMA2016이 발표되면서 클래스라는 개념이 생겨났지만 기본적으로 프로토타입 기반이다.)객체의 원형(프로토타입)을 이용해 객체를 만들고 상속도 프로토타입으로 한다. 자바스크립트에서 프로토타입을 정의할 때는 함수를 이용한다. Data type?Primitive Data type은 5가지!원시데이터타입으로 숫자, 문자열, 불린 그리고 null, undefined 5가지를 정의하고 있다. 그리고 자바스크립트에서는 모든 종류의 숫자..
4. Pseudo Class 와 Pseudo Element 활용하기 Chapter 4. Pseudo Class와 Pseudo Element 활용하기가상 요소만 잘 알고 활용해도, 인터랙티브한 웹 페이지를 구성할 수 있다.Pseudo Class Pseudo Class는 단순한 선택자(simple selector)로는 표현할 수 없는 어떤 것을 select하는 선택자이다. 특정한 상태말고 규칙에 따라 상태가 바뀌는 요소를 선택할 때 사용하는 것이다. 종류 Dynamic pseudo-class :hover :visited :link :active :focus 위 네 개는 anchor tag(a태그)와 함께 자주 쓰인다. 그리고 focus tag는 input tag와 함께 쓰인다. UI element states pseudo-class :enabled :disabled :che..

티스토리툴바