ES5 Seminar 정리! #양재동 코드랩


1.

Javascript의 기능 (Control)

- DOM : HTML, CSS 컨트롤

- HTML5 API : File, IndexedDB

- 그래픽 : SVG, Canvas, WebGL

- 통신 : XMLHttpRequest, Socket


책 추천 - 몰입 자바스크립트!, EcmaScript6



2.

함수 형태


빌트인(Built-in) function 오브젝트 

 - 내장 함수

 - Array.isArray()

 - Array.prototype.forEach()


function 오브젝트

 - function book () {}

 - var book = function() {...}


function 인스턴스

 - new Book(), new 사용 ( 대문자 사용 )

 - Book.prototype의 프로퍼티 사용 (이걸 이해하지 못하면 ES6의 많은 부분을 포기하는 것과 같다!)



▶ 오브젝트와 인스턴스의 차이

 - function 오브젝트는 단일 수행이지만 function 인스턴스는 동일한 메소드를 가진 인스턴스를 생성하고 그 값들을 조작하여 수행할 수 있다.



3.

function 오브젝트


호출 형태

 - function sports() {...};

 - sports();


 함수가 오브젝트여야 호출이 가능하다


엔진이 function 타입 키워드를 만나면

- 빌트인 function 오브젝트의 prototype에 연결된 프로퍼티(call, bind 등)를 결합해 function 오브젝트를 알맞게 생성한다.

- 이렇게 생성한 오브젝트를 sports 변수에 할당한다.


 function 오브젝트 저장 형태

- function 명령어로 생성한 function 오브젝트를 { name : value } 형태로 저장한다. 

ex) { sports : function 오브젝트 } 


- 함수를 호출하면 함수 이름으로 저장된 오브젝트를 탐색하고 value 값을 구한 뒤 value 타입이 function 오브젝트이면 호출한다.


- javascript에선 타입을 컴파일할 때 결정하기 때문에 밑에서 얼마든지 key 값의 타입을 바꿀 수 있다. java나 c++ 같은 경우엔 타입을 프리 컴파일 과정에서 미리 결정을 해서 이런 오류가 발생할 가능성이 적지만 javascript의 자료형은 가변적이기 때문에 조심해야 한다.


▶ 함수가 호출되면 엔진은 { name : {{ name: value }, {..}} } 형태의 프로퍼티를 조합하여 실행 환경을 설정하고 함수 코드를 실행한다.

따라서 { name : value } 형태에 맞추어 생각을 전환할 필요가 있다.


▶ 어찌보면 HTML이나 CSS도 { name : value } 구조라고 볼 수 있다.

div = name

element = value

class = class

id = id 



4.

객체지향언어


javscript는 EcmaScript 스펙에 나와있듯이 객체지향언어이다. 

그래서 function 오브젝트를 객체로 인식하고 접근할 필요가 있다.

OOP의 개념을 이해해야 한다. 

ES6는 OOP의 개념을 정확히 구현할 수 있도록 환경을 조성했다. 

그렇기에 더더욱 OOP 개념에 따라 코드를 작성해야 한다.



5.

아키텍처, 메커니즘


아키텍처 : Architecture

 - 목적을 가진 구조

 - 자바스크립트 목적을 달성하기 위한 구조


메커니즘 : Mechanism

 - 목적을 달성하기 위한 방법

 - 목적에 따라 방법, 기준이 달라질 수 있음


아키텍처와 메커니즘 이해 필요



6. 

javascript 목적


javascript는 프로그래밍 언어다. 언어의 목적은 소통이다.

프로그램을 통해 javscript 엔진과 소통하자. 

문법을 지켜야 소통이 가능하다.



7.

function 오브젝트 예제



(1) function 오브젝트 생성

- 코드 : function sports(){};


(2) sports 오브젝트에 prototype 오브젝트 ㅊㅁ부

- 코드 : { 

 sports : { 

prototype : { ... } 

}


(3) prototype에 constructor 프로퍼티 첨부

- 코드 : { 

 sports : { 

prototype : { ... }, 

constructor: sports 전체 참조 

}


(4) prototype에 _proto_ 오브젝트 첨부

- ES5 스펙에 _proto_를 기술하지 않음

- ES6 스펙엔 _proto_ 기술, 엔진 사용 정의

- ES5 기준에선 표준이 아님

- 코드 : { 

 sports : { 

prototype : { ... }, 

constructor: sports 전체 참조, __p 

__proto__ : { ... } 

// 엔진이 사용하는 key이기에 개발자는 건드리지 말 것!

}


(5) 빌트인 Object 오브젝트의 prototype에 연결된 프로퍼티를 결합해 Object 인스턴스를 생성한다. 생성한 Object 인스턴스를 prototype._proto_에 상속한다. (함수를 선언할 때마다 불필요하게 상속하기 때문에 설계 미스이다.) 마지막으로 sports 오브젝트에 _proto_ 오브젝트 첨부한다.


- 코드 : { 

 sports : { 

prototype : { ... }, 

constructor: sports 전체 참조, __p 

__proto__ : { 

Object.prototype.call : { ... },

Object.prototype.apply : { ... },

Object.prototype... : { ... }   

    } 

}


(6) 빌트인 function 오브젝트의 prototype에 연결된 프로퍼티로 function 인스턴스를 생성한 후 __proto__에 첨부한다.


- 코드 : { 

 sports : { 

prototype : { ... }, 

constructor: sports 전체 참조, __p 

__proto__ : { 

function() {

Object.prototype.call : { ... },

Object.prototype.apply : { ... },

Object.prototype... : { ... }

}    

    } 

}



(7) Math, JSON, Global Object를 제외한 모든 오브젝트는 prototype이 있다.



8. 내부 프로퍼티 분류

- 공통 프로퍼티, 선택적 프로퍼티


공통 프로퍼티 : 

모든 오브젝트에 공통으로 설정되는 프로퍼티

선택적 프로퍼티 : 

오브젝트에 따라 선택적으로 설정되는 프로퍼티, 해당되는 오브젝트에 설정



9. 함수 정의


함수 정의

 - 함수가 실행될 수 있도록 javascript 문법에 맞게 작성


함수 정의 형태

 - 함수 선언문 (function declaration)

 - 함수 표현식 (function expression)

 - new function(param1, param2, body)

 --- 문자열로 작성 -> 해킹 위험


▶ 함수 선언문

 - function [function] : function 키워드

 - 식별자 [String] : 함수 이름

 - 파라미터 [Any] : 파라미터 리스트

 - 함수 블록 [Object] : 실행 가능한 코드

 - 반환 [function] : 생성한 function 오브젝트


▶ 함수 표현식

- var name = function() {};

- function 오브젝트를 생성하여 변수에 할당



10. 엔진 해석


javascript는 script 언어이다. script 언어는 작성된 코드를 위에서부터 한 줄 씩 해석(컴파일, 실행)하지만 javascript는 조금 다르다.


함수 형태에 따라 해석 순서가 다르고 중간에 있는 코드가 먼저 해석될 수 있다.


먼저 전체 함수 선언문을 차례대로 해석한다. 

 - function sports(){};


이어서 차례대로 함수 표현식을 해석한다.

 - var sports = function(){};


ex) 


window.onload = function sports() {
debugger;
var player = 11;

function soccer() {
return player;
} // debugger 줄에서 이미 함수로 해석됨


baseball(); // undefined.

//함수 표현식은 변수에 undefined로 할당되기 때문


var baseball = function() {
console.log(player)
};
// debugger 줄에서 변수로 해석됨

soccer();
}

sports();


▶ 코드 해석 단계

(1) 함수 선언문 해석 : 한번 쭉 내려가면서 함수를 탐색한다.

- function sports(){};

- function soccer(){};


(2) 변수 초기화

- var player = undefined; 

- var baseball = undefined;


(3) 

var player = 11;

var baseball = function() {};



11. 함수 선언문 오버라이딩


▶ 오버라이딩(Overriding)

- 함수 이름이 같을 때 함수 코드 대체(replace)


▶ 자바스크립트는 파라미터, 수, 데이터 타입을 체크하지 않는다. 

모두 { name : value }로 저장하기 때문이다.


▶ 대체되는 상황

(1) 초기화 단계에서 위에서부터 함수 선언문을 function 오브젝트로 생성한다.

(2) 아래에 같은 이름의 함수 선언문이 있으면 아래의 함수 선언문이 호출된다.


ex)

window.onload = function sports() {
function soccer() {
console.log('축구1');
};
soccer();

function soccer() {
console.log('축구2');
}
}



12. 함수 파라미터


파라미터(Parameter) 상호 관계

- 매개 변수

- 호출하는 함수 : 값 전송

- 호출받는 함수 : 전송된 값을 받음


파라미터 작성

- 호출하는 함수의 파라미터에 값 작성

- 호출받는 함수의 파라미터에 이름 작성


파라미터 값 처리

- 호출한 함수에서 보낸 값을 호출 받는 함수의 순서에 따라 처리

(엔진은 파라미터 순서로 값을 mapping 한다.)


파라미터 수가 유동적이라면 arguments를 사용해도 된다.

arguments[0] : 파라미터의 첫번째 값

그러나 ES6부터 rest parameter 문법이 생겼고 arguments는 거의 쓰지 않는다.


▶  arguments 값 반환

호출한 함수의 파라미터 값 타입 - 문자열, 숫자, 배열, 오브젝트 등


매커니즘

- 파라미터 순서에서 0부터 인덱스를 부여하여 key로 사용하고

  파라미터로 받은 값을 value에 설정한다

- { 0 : value, 1 : value }


* 결론 : for()문 사용

- 파라미터가 배열일 때 for~in 문으로 읽으면 length 프로퍼티를 제외시키는 코드가 필요하기 때문이다.


Array-like

- key 값이 0부터 1씩 증가

- length 프로퍼티가 있어야 함

- 객체지만 인덱스값을 가지고 증가하기에 거의 배열 같은 친구


=> 이러한 연유로 ES6에선 for~of 문법이 나오게 된다.


▶ 엔진 처리

(1) 함수 호출

(2) 파라미터에 값 할당

(3) arguments 오브젝트 생성

(4) arguments 오브젝트에 파라미터 값 설정

(5) 함수 코드 실행



12. 스코프


Scope : 함수가 실행될 때 영향을 받는 범위. 


ex) indexOf()의 스코프

(1) indexOf()는 String 오브젝트에 존재

- String 오브젝트가 indexOf()의 스코프

- indexOf()는 문자열을 처리하는 String 오브젝트의 영향을 받음


(2) Number 오브젝트에서 indexOf()를 호출하면 에러

Number 오브젝트에 indexOf()가 없기 때문이다.

Number 오브젝트가 indexOf()의 스코프가 아니기 때문이다.


▶ 사용 목적

(1) 범위 제한

- 신속한 검색 및 접근

- 스코프 안에서 우선 검색

(2) 같은 프로퍼티 이름 사용 가능

- String 오브젝트의 indexOf()

- Array 오브젝트의 indexOf()

(3) 오브젝트로 보면 오브젝트가 다르지만 함수에서 보면 스코프가 다르다. 실행될 때 함수의 스코프에서 검색하며 함수 안에서 밖으로 나가는 개념이다.


▶ 스코프 구조

- function 오브젝트를 생성할 때.

- 함수를 호출할 때 설정하는 게 아니다. 이를 정적 스코프라고 함.

- function 안의 코드에 대해서는 구조를 만들지 않는다.


*참고 : 동적 스코프란 함수를 호출할 때 설정하는 스코프를 의미한다. ES5에서 유일하게 동적 스코프를 허용하는 함수가 eval()다. 함수를 호출할 때마다 스코프를 형성하기 때문에 부담스럽다.



13. 글로벌 프로젝트


프로그램의 시작점

 - 빌트인 오브젝트


글로벌 오브젝트 특성

(1) 전체 프로그램을 통해 하나만 존재

- 전체 프로그램 : 모든 <script>에 작성한 코드

(2) 오브젝트 이름을 작성하지 않고 함수를 호출하면 글로벌 오브젝트로 간주


글로벌 오브젝트 생성

(1) 첫 번째 <script>에서 한 번만 생성

- 자바스크립트 실행 환경 설정

(2) <script>의 프로그램 실행 전에 생성


new 사용 불가

 - 인스턴스 생성 불가


▶ 글로벌 스코프

- 전체를 통해 하나만 존재하므로 스코프도 하나

- 글로벌 오브젝트와 글로벌 스코프가 같음

- 스코프가 전체이므로 모든 코드에서 사용 가능


* 최상위 스코프

- 함수에서 보면 최종 검색 스코프

- 검색한 프로퍼티가 없으면 undefined 반환


▶ 지역/글로벌 함수

- 지역함수 : 함수 안에서 var 키워드를 사용한 함수와 함수 선언문 

- strict 모드일 때 -> var 키워드를 사용하지 않고 함수를 선언하면 에러 발생


* 글로벌에서 var 키워드를 사용하지 않으면 delete가 실행된다.

* 되도록 글로벌, 지역에 관계없이 var 키워드를 사용하자.


▶ 변수 사용(접근)

- 글로벌 변수 : 어느 위치에서도 변수 사용 가능

- 지역 변수 : 함수 안으로 들어가야 변수 접근 가능. 함수 외부에서 직접 사용 불가




14. 바인딩


바인딩(binding) 

 구조적으로 결속된 상태로 만드는 것

 대상 - 오브젝트와 프로퍼티 이름


var get = {

... qty : value,

... price: value

};


바인딩 목적

- 스코프 결정

- 스코프에서 이름 식별


바인딩 시점 분류

- 정적 바인딩(Lexical, Static Binding)

- 동적 바인딩(Dynamic Binding)


스코프 체인

- 스코프가 상하구조로 연결된 개념/구조

- 스코프 체인을 사용하여 근접한 스코프에서 프로퍼티(함수, 변수) 검색

- ES3에서 채용


ES5에서 scope chain 개념이 폐지되었다.

- 렉시컬 환경(Lexical Environment) 개념 사용



▶ 바인딩 시점


* 정적 바인딩

(1) 초기화 단계에서 바인딩

(2) 함수 선언문 이름으로 바인딩

(3) 변수, 함수 표현식 이름으로 바인딩


(4) 대부분 정적 바인딩


(5) 값은 바인딩 대상이 아님


* 동적 바인딩

- 실행 단계에서 바인딩

- eval() 함수, with 문



▶ 바인딩 시점의 중요성

- 바인딩할 때 스코프가 결정되기 때문이다.


* function 오브젝트 생성 시점에 스코프가 결정된다.

      - 인식한 스코프를 [[Scope]]에 설정하고

      - 정적 바인딩은 [[Scope]]를 스코프로 사용한다.

      - 스코프는 변경되지 않는다.


* 같은 단계의 모든 함수의 스코프가 같다.


▶ 프로퍼티 검색 방법

* [[Scope]] 프로퍼티에서 검색


엔진 해석 순서

-> 변수 생성 및 함수 생성 (key 값) -> 스코프 설정 -> (value) 값 할당 -> 함수 호출 -> 파라미터 값 할당 및 arguments 생성 -> 함수 실행 



16. 렉시컬 환경

(1) 함수가 사용할 함수, 변수를 렉시컬 환경에 설정한다.

- 오브젝트, 변수, 다른 함수 참조가 가능하다.

(2) 함수가 구조적 환경에서 독립적으로 실행하기 위한 매커니즘 제공


초기화 단계에서 해석한 모든 함수와 변수를 { key : value } 형태로 저장한다.


▶ 렉시컬 환경 생성 : function, with, try ~ catch 문에서 생성됨



▶ 렉시컬 환경 구성 형태

- 렉시컬 환경(LE) = { 

... 환경 레코드(ER: Environment Record) : {

sports: "농구",

member: "5명"

} ,

...외부 렉시컬 환경 참조

(OLER: Outer Lexical Environment Reference) : {

play: function() {},

values: [12, 34, 56]

}

}


▶ 외부 렉시컬 환경 참조


장점 

- 근접한 렉시컬 환경의 논리적 연결을 통해, 현재 렉시컬 환경에 영향을 미치지 않으면서, 1단계 밖 스코프로 이동하지 않고 프로퍼티 사용


▶ 검색 메커니즘

1. 프로퍼티 검색 순서 방법


▶ 글로벌 환경

- 글로벌 오브젝트를 위한 렉시컬 환경

- 렉시컬 환경과 형태가 같음


특징

- 동적으로 함수와 변수 바인딩

- 함수에서 var 키워드를 사용하지 않고 함수/변수를 사용



17. 실행 콘텍스트


생성 시점

 - 실행할 수 있는 코드를 만났을 때


실행할 수 있는 코드 유형

 - 함수 코드(function code)

 - 글로벌 코드(global code)

 - eval 코드(eval code)


코드 유형 분리 이유

 - 실행 컨텍스트에서 처리 방법과 환경이 다르기 때문이다.

 - 함수 코드 : 렉시컬 환경

 - 글로벌 코드 : 글로벌 환경

 - eval 코드 : 동적 환경



18. 환경 컴포넌트


환경 컴포넌트 구성

 - 렉시컬 환경 컴포넌트와 변수 환경 컴포넌트 지칭



19 . this 바인딩 컴포넌트


목적

 - this로, 호출한 함수가 속한 오브젝트의 프로퍼티에 접근


접근 메커니즘

 1. 호출한 함수가 속한 오브젝트를 참조할 수 있도록 this 바인딩 컴포넌트에 호출된 함수가 속한 오브젝트 참조 설정

 2. obj.sports() 형태에서 this로 obj 참조

 3. obj의 프로퍼티가 변경되면 동적으로 참조

 4. obj를 this 바인딩 컴포넌트에서 참조할 수 있도록 설정


▶ this와 strict 모드

1. 글로벌 오브젝트에서 오브젝트를 작성하지 않고 함수를 호출하면 

- this 바인딩 컴포넌트에는 undefined가 설정된다. 

- strict 모드가 아닐 경우에는 this가 글로벌 오브젝트인 window를 참조한다.


var sports = {
value: 123,

get: function() {
var value = 456;
console.log(this === window);
console.log(this.value);
}
};

var comp = sports.get;
sports.get();
comp(); // 이 경우 this 컴포넌트는 use strict 모드가 아니기
때문에 global oject에 바인딩된다.



20. Constructor


▶ Constructor 프로퍼티

- Function 오브젝트를 생성할 때 설정되며

- 생성하는 Function 오브젝트를 참조하도록 설정

- prototype에 연결되어 있음


개인 경험

- constructor가 없더라도 인스턴스가 생성됨

- 엔진에서 이를 고려하여 생성하는 것으로 생각됨

- 하지만 필요하지 않다는 의미는 아님


- ES6에서 constructor가 중요하므로 이해가 필요하다. 


▶ property

- 목적 : 

(1) 프로퍼티 연결을 통한 프로퍼티 확장

(2) 생성한 각 인스턴스에서 prototype의 프로퍼티 공유

(3) 상속 : 다른 function 인스턴스를 연결


- 프로퍼티 확장

(1) prototype에 프로퍼티 {key : value}를 연결하여 확장


- 프로퍼티 공유

(1) prototype에 연결된 프로퍼티로 인스턴스 생성

(2) 인스턴스에서 prototype에 연결된 프로퍼티 값 공유



21. 오브젝트 반환


new 연산자로 인스턴스를 생성할 때

 - 생성자 함수에 return 문을 작성하지 않으면 인스턴스를 반환한다.

 - 생성자 함수에 return 문을 작성하면 표현식 평가 결과에 따라 인스턴스가 반환되지 않을 수도 있다.



22. call()과 this


- 예제



var get = function(value) {
return this.base * this.rate + value;
}

var result = get.call({base: 20, rate: 30}, 50)
console.log(result);

/////////////////////////////////////////////////////////////////

var obj = {value: 100};

var values = [1,2,3].map(function(el, index) {
return el + this.value;
}, obj); // 두번째 파라미터는 this가 참조되는 주소를 의미한다.

console.log(values);




var sports = {
value: 123,
soccer: {
value: 456,
get: function() {
return this.value;
}
}
}

var result = sports.soccer.get.call(sports);
console.log(result); // 123

var result = sports.soccer.get.call(sports.soccer);
console.log(result); // 456




23. bind()와 this


- 예제



var el = document.getElementById('clickID');

var sports = {
value: 123
}

el.onclick = show.bind(sports, el);
// 두번째 파라미터는 해당 함수의 첫번째 파라미터로 간다.

function show(element, event) {
console.log(element.textContent);
console.log(event.target.id);
console.log(this.value);
}



24. 캡슐화


캡슐화

- 객체의 메서드와 프로퍼티를 외부에 숨김

- 처리 방법은 숨기고 사용할 수 있는 메서드와 파라미터를 외부에 공개


자바스크립트의 캡슐화

- 함수 안의 함수를 외부에서 호출 불가하게 하기

- 지역 변수 값을 외부에서 접근 불가하게 하기

- source가 오픈되는 것과 exe 파일의 차이가 있음



25. 다형성


자바스크립트의 다형성

- 파라미터 수와 데이터 타입에 영향을 받지 않음

- 메소드 이름이 같으면 나중에 작성한 것으로 대체됨



26. 상속(유전)


상속(유전)

- 상속의 목적은 객체의 재사용에 있다.

- 목적에 맞는 객체를 내 객체에 포함시키는 것

- 다중상속


자바스크립트의 상속(유전)

- 오브젝트{}와 오브젝틀르 병합

- 함수의 prototype에 인스턴스 연결

- 다중상속 불가

- 다수의 인스턴스가 연결된 형태: Prototype Chain



27. 검색 우선순위



/**
* 반복되는 오브젝트의 전개
*/
var sports = {
soccer: {member: 11, time: 90},
basketball: {member: 5, time: 48}
};

function showValues(sports) {
var type, obj;

for (type in sports) {
obj = sports[type];
typeof obj === 'object' ?
showValues(obj) :
console.log(type + ' : ' + sports[type]);
}
}

showValues(sports)




28. 함수 즉시 실행


함수 즉시 실행이란?

- 엔진이 함수 코드를 만나면 자동으로 함수를 실행하는 행태



(function() {
console.log('스포츠');
}());
var total = (1 + 2);
var value = function() {
return 123;
}
console.log('함수호출: ' + value());

value = function() {
return 456;
}();
console.log('자동실행: ' + value);

value = (function(){
return 789;
}());
console.log(value);
(function(){
console.log('ABC');
}());



29. 클로저


클로저 개요

- 자바스크립트의 특정 기능을 지칭

- function 오브젝트를 생성할 때 [[Scope]]에 렉시컬 환경을 설정하고

함수가 호출되었을 때 [[Scope]]의 프로퍼티를 사용하는 메커니즘

- function 오브젝트 생성 과정을 히해하면 클로저는 단지 논리적인 접근.



function sports() {
var value = 100;

function setValue(param) {
value = param;
};

var getValue = function(param) {
value = value + param;
return value;
};

return getValue;
};
var getObject = sports();

console.log(getObject(123));
console.log(getObject(77));
console.log(getObject.value);



블로그 이미지

필로그래머

,

블로그 관리를 안한지 몇 개월이 됐음에도 아직까지 방문해주시는 분들이 많이 있어 놀랐습니다. 초창기 Java와 서버 세팅에 대한 기초를 배울 때 스스로 정리해보자 했던 글들이 여러모로 검색이 되고 여전히 읽혀지는구나 싶어 신기하고 그렇군요.


사실 저는 현재 프론트엔드 개발을 주로 하고 있습니다. 실무에서 일을 하다보니 시간적인 여유 때문에 글을 쓰고 정리하는 것보단 그냥 저만의 사전에 추가하듯 필요한 내용이 있을 때 북마크에 추가하는 편입니다. 그런데 확실히 북마크에 추가해놓으면 다시 잘 확인해보질 않아서 곧 프론트엔드 개발 쪽으로 블로그 글들을 정리하는 게 좋겠다는 생각이 들더라구요. 앞으로 프로젝트를 진행하면서 기억해야 되는 부분이 있을 때 정리를 해보겠습니다. 


또한 기회가 된다면 신입으로 회사에 들어가서 겪게된 이야기들도 정리해보고 싶어요. 다른 사람들과는 조금 다른 루트를 밟으면서 성장하고 있기에 색다르게 공유할 부분들이 있을 것 같은데 이 부분도 곧 글을 써보겠습니다. 이렇게 적어놓아야 제 스스로 무언가를 더 하게될 것 같아서요 :D


1년간의 회고록을 잘 작성할 수 있도록 열심히 작업해보겠습니다!


블로그 이미지

필로그래머

,

 ReactJS: constructor()


Q. constructor() 사용 시에 super() 메서드를 사용해야 하는 이유 

- 'this' is not allowed before super() error 



A.  http://cheng.logdown.com/posts/2016/03/26/683329

블로그 이미지

필로그래머

,

✔︎ [CSS] float:left 속성의 이해


▶ float의 등장 배경


img 태그는 block 성질을 가지고 있습니다. 

그래서 이미지의 width 값이 작더라도 한 줄을 통째로 차지해버립니다.

이 경우엔 이미지 바로 옆 쪽에 문장을 배치할 수 없습니다.

이러한 문제를 해결하기 위해 등장한 것이 float 속성입니다.

float 속성은 이미지의 왼쪽/오른쪽에 문장을 배치할 수 있도록 도와줍니다.

(물론 이미지 뿐만 아니라 다른 요소도 float 속성을 가질 수 있습니다.)


(다음 그림 참고)


Example of Float in CSS


출처 : https://www.1keydata.com/css-tutorial/float.php



▶ float:left 예제


float:left는 해당 속성이 적용된 태그를 왼쪽으로 배열하도록 합니다.

다음은 Aside와 Section에 float:left 속성을 적용시킨 결과입니다.

예상했던 대로, Aside 옆에 Section이 차례대로 붙어있는 것을 알 수 있습니다.




 


but, 

<div id="wrap"></div> 안에 있는 Aside와 Section 태그는 잘 배치되었지만,

wrap 태그를 벗어난 footer 태그마저 '부유'하고 있는 것을 확인할 수 있습니다.

이러한 문제를 해결하려면 어떻게 해야 할까요?



▶ float:left 실무


float:left가 적용된 태그의 '부모 태그'에다가 overflow:hidden 속성을 주면

다음과 같이 float:left 속성이 적용되지 않은 다른 태그들이 부유하지

않고 있는 것을 확인할 수 있습니다. 이러한 방법을 One True Layout 방식이라고 부릅니다.





블로그 이미지

필로그래머

,

✔︎ [CSS] display와 visibility 

: none과 hidden의 차이


화면에서 태그를 보이지 않게 하기 위한 속성으로는 

display:none과 visibility:hidden이 있습니다.


두 스타일 모두 어떤 태그를 표시하지 않고 가릴 때 사용됩니다.

그러나 두 스타일에는 차이가 있습니다. 어떤 차이가 있을까요?


display:none


display:none 속성은 태그 자체를 html 상에서 제거시키는 힘이 있습니다.

때문에 inspect(요소 검사)를 해도 해당 태그를 검색할 수 없습니다.





visibility:hidden


visibility:hidden 속성은 태그 자체를 html 상에서 제거시키는 게 아니라

그저 사용자가 해당 태그를 볼 수 없도록 만들어줍니다. 도자기로 덮어놓은 것처럼 말이죠.

때문에 inspect(요소 검사)를 해도 해당 태그를 확인할 수 있습니다.




블로그 이미지

필로그래머

,

✔︎ [CSS] display 속성 

: inline과 inline-block의 차이 



css에서 display 속성 중 block은 'div 태그'나 'p 태그'에 

기본적으로 적용되는 속성입니다. 자체적인 block을 가져서 

해당되는 태그가 아예 한 줄을 차지해버리죠. 


그렇다면 inline과 inline-block은 무엇일까요?



▶ inline


inline 속성을 가진 태그는 한 줄을 차지하지 않고, 다른 태그 옆에 나란히 표시됩니다. 

width와 height 값이 적용되지 않습니다.





▶ inline-block


inline 속성을 가진 태그는 한 줄을 차지하지 않고, 다른 태그 옆에 나란히 표시됩니다. 

덧붙혀 width와 height 값이 적용될 수 있습니다.





블로그 이미지

필로그래머

,

✔︎ [CSS] input 태그에 placeholder 스타일 효과 주기 



예제 1.


https://codemyui.com/input-field-placeholder-to-label-transition/


예제 2.


https://jsfiddle.net/273ntk5s/2/


블로그 이미지

필로그래머

,

 Angular: 의미


AngularJS는 매우 강력한 JavaScript 프레임워크입니다.
주로 싱글 페이지 어플리케이션 프로젝트에서 사용됩니다. 
HTML DOM에서 추가적인 속성을 확장해 만들어졌으며 
사용자의 액션에 따라 페이지를 동적으로 바꿀 수 있도록 도와줍니다.


✎ ng-app 

ng-app 명령어는 AngularJS 어플리케이션을 시작하겠다는 의미입니다.
AngularJS를 HTML에 연결해주는 역할을 합니다.

✎ ng-model
 
ng-model 명령어는 AngularJS 어플리케이션 데이터의 벨류 값을 
HTML의 input 태그에 연결시켜 줍니다.
(ng-model의 벨류 값에 바인딩 된 태그에 input 데이터가 넘어갈 수 있도록 도와줍니다.)

✎ ng-bind

ng-bind 명령어는 AngularJS 어플리케이션 데이터를 HTML 태그와 연결시켜줍니다.



참고
*https://www.tutorialspoint.com/angularjs/angularjs_first_application.htm


블로그 이미지

필로그래머

,