'분류 전체보기' 카테고리의 글 목록 (15 Page)

분류 전체보기

javascript - 콜백함수,함수의 선언,클로저

2019. 3. 3. 02:52

◎ 함수의 선언

▼ 내용

함수 선언식 - Function Declarations

일반적인 프로그래밍 언어에서의 함수선언과 비슷한 형식이다.

// 예시
function funcDeclarations() {
  return 'A function declaration';
}
funcDeclarations(); // 'A function declaration'

함수 표현식 - Function Expressions

일반적인 프로그래밍 언어에서의 함수선언과 비슷한 형식이다.

var funcExpression = function () {
    return 'A function expression';
}
funcExpression(); // 'A function expression'

◎ 함수의 구분 (객체 안에 함수)

▼ 내용

객체안에 함수가 들어있으면 메소드 입니다.

var a = {
    b : function (){
        return '3';
    }
}
// a.b()   = 3
// function 의 익명함수는 메소드

function ag(){
    return '3';
}

// 위의 함수는 함수

◎ 콜백함수 (변수 = 전부 객체)

▼ 내용

함수 , 변수들은 전부 객체 입니다.

그렇기 때문에 함수는 값으로도 사용할수있습니다.

function ab(){
 return 3;
}
var abcd = 3+ab();
console.log(abcd);
//abcd = 6

이렇게 ab()함수는 값으로 사용할수 있습니다. 이거와 비슷하게 함수는 값이기 때문에

인자로 전달 받을수도 있습니다.

function cal(func,num){
    return func(num);
}
function increase(num){
    return num+1;
}
console.log(cal(increase,2));
//3

위 처럼 cal 안에 또다른 함수를 넣는것을 콜백함수라 부릅니다.

또한 함수는() 이렇게 쓰면 실행이되지만 그냥 함수의 이름만 넣어줄경우엔

함수의 글자들만 넘어가서 마더함수가 실행될경우 로직에따라 콜백함수를 실행합니다.

또한 함수도 값이기 때문에 콜백함수도 값으로 취급하여 계산식등을 사용할수 있습니다.

함수는 이처럼 변수 , 매게변수 , 리턴값에 사용할수있는데 이러한 것들을

프로그래밍에서는 first-class citizen 또는 first-class object 등 뭐 이렇게 부릅니다.

◎ 클로저

▼ 내용

클로저는 (closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.

내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. 이러한 메커니즘을 클로저라한다.

'프로그래밍 > JavaScript' 카테고리의 다른 글

javascript 구동방법이해하기 (0)	2019.03.03
javascript - 콜백함수 확장판 (콜백함수 이해하기) (0)	2019.03.03
자바스크립트 기본 (0)	2019.02.27
자바스크립트 공부내용 정리 (0)	2019.02.27
자바스크립트 공부내용정리(2) (0)	2019.02.27

CSS - 우선순위 cascading(캐스캐이딩)

2019. 3. 2. 01:35

CSS 의 약자는

Cascadin Style Sheet (종속형 시트)

cascading : 폭포같은 , 계속되는 , 연속적인

이다.

우선순위는

1. 태그의 인라인 Style 속성

<div style="color : red;"> 테스트 </div>

2. id 선택자

#id{ color : "red"; }

3. class 선택자

.class{ color : "red"; }

4. 태그 선택자

div{ color : "red"; }

순으로 CSS의 우선순위가 적용된다. 하지만 이것들을 다 무시하고

젤 우선시로 적용하는 CSS 가있다. !important 다

div{ color : "red" !important; }

'디자인 > CSS' 카테고리의 다른 글

CSS - multi-column (다단) (0)	2019.03.03
CSS - margin 겹침 (0)	2019.03.03
CSS - 가상클래스(pseudo) (0)	2019.03.02
CSS - display 속성 (0)	2019.03.02
CSS - 선택자(selector) (0)	2019.03.02

CSS - 가상클래스(pseudo)

2019. 3. 2. 01:33

a 태그의 링크중 선택안되었던것은 파란색 선택된것은 보라색 으로 된걸 본적있을것이다.

이렇게 마우스의 기능에 따라 css가 바뀌는걸 가상클래스 수도클래스 라고한다

a:active{
     color : green; //마우스 클릭시 css 적용
}

a:hover{ //롤오버 마우스 올려놨을시 css 적용
     color : red;
}

마우스로 클릭시 green 으로 바뀜

마우스를 올려놨을때 red로 바뀜

만약 이경우에 a태그에 마우스를 올려놓고 클릭하였을경우

green 으로 바뀌지 않음 , 이유는 클릭과 롤오버의 이벤트가 둘다 발생하였지만

css 는 나중에 설정한 값이 우선순위가 높기때문임 그래서

hover를 위로 배치 active를 아래로 배치해야한다

hover 기능은 여러가지 다른태그에도 사용 가능

a:visited{ //방문한 링크 css 적용
     color : orange;
}

방문한 링크는 orange 적용

visited는 보안상 문제때문에 안에 적용하는 속성값이 상당히 제한적이다

a:link{
     color : black;
}

a태그의 링크의 색깔은 black 으로 적용

a:focus{
     color : white;
}

a태그가 tab키 등으로 인하여 포커싱이 잡혓을경우 css가 적용된다.

focus css 같은경우엔 여러가지 이유로 인해서 css의 가장 말단에 넣는것이 좋다.

input:focus 도 같은효과

'디자인 > CSS' 카테고리의 다른 글

CSS - margin 겹침 (0)	2019.03.03
CSS - 우선순위 cascading(캐스캐이딩) (0)	2019.03.02
CSS - display 속성 (0)	2019.03.02
CSS - 선택자(selector) (0)	2019.03.02
CSS - @media 쿼리 (0)	2019.03.02

CSS - display 속성

2019. 3. 2. 01:32

display 속성

1. block

Element 를 block 로 설정하면 그 줄에는 그 Element 말곤 존재할수없다

2. inline-block

높이 위치등을 설정하였을경우 그 속성의 값을 가지고 차례대로 나열된다

3. inline

높이 위치등이 설정된것을 다 무시하고 오로지 컨텐츠 내용 (텍스트) 로만 크기가 할당된다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
    display: inline;
    }</style>
</head>
<body>
    <div style="width: 100px; height: 100px; background-color: red;">Display:inline width:100 height:100</div>
    <div style="width: 100px; height: 100px; background-color: green;">Display:inline width:100 height:100</div>
    <div style="width: 100px; height: 100px; background-color: blue;">Display:inline width:100 height:100</div>

    <!-- inline-inline width:100 height:100 --> // 이걸로 교체해가면서 테스트
    <!-- inline width:100 height:100 -->
</body>
</html>

'디자인 > CSS' 카테고리의 다른 글

CSS - 우선순위 cascading(캐스캐이딩) (0)	2019.03.02
CSS - 가상클래스(pseudo) (0)	2019.03.02
CSS - 선택자(selector) (0)	2019.03.02
CSS - @media 쿼리 (0)	2019.03.02
CSS - 애니메이션 @keyframes (0)	2019.03.02

CSS - 선택자(selector)

2019. 3. 2. 01:27

CSS 선택자

이건 JS 를 하는사람이라면 똑같아서

구지 안쓰려 햇지만 한번 써봅니다.

div { background-color : red; } // 태그 선택자  <div></div>
.class { background-color : red; } // 클래스 선택자 <div class = 'class'></div>
#id { background-color : red; } // ID 선택자 <div id = 'id'></div>

//전체 선택자 
*{background-color : red} // 모두 전체 선택

//하위선택 , 자식선택 , 다중선택
div,span { background-color : red; } // div , span 둘다 선택
div li { background-color : red; } // div 안에 있는 하위태그인 li 의 모든요소
div > li { background-color : red; } // div 안에 있는 바로 밑에있는 자식태그의 li만 선택 

//형제선택 , 인접형제선택
div ~ span { background-color : red; } // div 선택자의 형제요소중 span 선택
//div 초과 span 미만
div + span { background-color : red; } // div 선택자의 형제요소 중 첫번쨰 span 선택

//속성 선택자
[attribute] // 속성을 가진 태그 모두선택
[attribute="value"] // 속성값이 value 인 태그 모두 선택
[attribute~="value"] // 속성값이 value 를 포함한 태그를 선택
    //<h1 title="value xyz">Lorem</h1> (o)     <h1 title="valuexyz">Lorem</h1> (x)
[attribute|="value"] //속성의 값이 value이거나 value-로 시작하는 요소를 선택합니다.
    //<h1 title="value xyz">Lorem</h1> (x)     <h1 title="valuexyz">Lorem</h1> (o)
[attribute^="value"] //속성의 값이 value로 시작하는 모든요소를 선택합니다.
    //<h1 title="value xyz">Lorem</h1> (o)     <h1 title="valuexyz">Lorem</h1> (o)
[attribute$="value"] // 속성의 값이 value로 끝나는 요소를 선택합니다.
    //<h1 title="xyz value">Lorem</h1> (o)     <h1 title="xyzvalue">Lorem</h1> (o)
[attribute*="value"] //속성의 값이 value를 포함한 요소를 선택합니다.
   //<h1 title="xyz value xxx">Lorem</h1> (o)     <h1 title="xyzvaluexxx">Lorem</h1> (o)

// 원하는 자식 선택
div:nth-child(5) // div의 5번쨰 자식 선택 (괄호안에 숫자)
div:nth-child(5n) // div의 5의 배수들만 선택
div:nth-child(3n + 2) // 2번쨰 선택후 3의배수로 선택

//짝수, 홀수 선택
div:nth-child(odd) // 홀수 선택
div:nth-child(even) // 짝수 선택

//뒤에서부터 선택
div:nth-last-child(2) // 뒤에서 2번째자식 선택 나머진 동일

//nth-child 주의할것
nth-child는 엘리먼트의 자식들을 선택하는거다
예를들면 
<ul>
        <div></div> // nth-child(1)
	<li>1</li> // nth-child(2)
	<li>2</li> // nth-child(3)
	<li>3</li> // nth-child(4)
</ul>

요렇게 자식들이 태그의 상관없이 순서가 정해져있기 때문에
li태그중 젤 첫번쨰가아닌 각각의 노드들중의 숫자로 선택한다

CSS선택을 할수있는 재미난 게임

(움직이는 것들만 CSS로 셀렉터를 이용하여 선택해보자

http://flukeout.github.io/

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

저는 32탄까지 다꺳는데 재미있네요 제가 위에 써논걸로 전부꺨수 있으니 한번 해보세여

'디자인 > CSS' 카테고리의 다른 글

CSS - 가상클래스(pseudo) (0)	2019.03.02
CSS - display 속성 (0)	2019.03.02
CSS - @media 쿼리 (0)	2019.03.02
CSS - 애니메이션 @keyframes (0)	2019.03.02
CSS - 문서의 보이는 순서 (Z-INDEX , POSITION) (0)	2019.03.01

PREV 1 ···12 13 14 15 16 17 18 ···24 NEXT

아빠개발자의 노트