개발 계발
[CSS] Display, Position
레이아웃 Display 대부분의 엘리먼트에 대한 기본값은 보통 block이나 inline이다. block 기본적으로 width가 100%가 되게 하고 가로 한 줄을 다 차지하게 한다. div, h1, p, ul, ol, form 태그 등이 있다. inline 컨텐츠를 감쌀정도의 크기만 갖게 된다. 블락태그와 다르게 줄바꿈 X 크기를 변화시킬수 없다.(width, height 값 넣어도 적용되지 않음) span, a, img 태그 등이 있다. inline-block 기본적으로 inline 처럼 전후 줄바꿈 없이 한 줄에 다른 엘리멘트와 나란히 배치 inline에서 불가능하던 width, height, margin, padding 등의 속성 변경이 가능하다 button ,input, select 태그 등이 ..
시멘틱 웹과 시멘틱 태그
시멘틱 웹과 시멘틱 태그 시멘틱 웹 시맨틱 웹(Semantic Web)은 의미론적인 웹이란 뜻으로, 현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스 리가 1998년 제안했고 현재W3C에 의해 표준화 작업이 진행중이다. 쉽게 생각하자면 컨텐츠의 내용에 맞는 적절한 태그로 HTML을 작성하여 단순한 코드의 구성이 아닌 의미를 가진 사이트라는 것을 알려 주는 것이다. 시멘틱 태그 시멘틱 태그는 '의미를 가진' 태그를 말한다. 즉 태그 자체가 콘텐츠의 의..
![[자바스크립트] this](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fc0nxMH%2FbtrnUPIrJdP%2FAAAAAAAAAAAAAAAAAAAAAFnNSwkSHyFnvDw9FuRBN8OWjp3Usjw8pOW-2UaZnMBl%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DzijRzgOvt5smhIdZxh9Q%252FIcA0oY%253D)
[자바스크립트] this
this 1. this 키워드 객체 - 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조 가능하며, 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. this가 가리키는 값, 즉 this 바인딩(식별자와 값을 연결하는 과정)은 함수 호출 방식에 의해 동적으로 결정된다. // 객체 리터럴의 메서드 내부에서는의 th..
![[자바스크립트] 빌트인 객체](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fbi97Qd%2FbtrnOPodh6S%2FAAAAAAAAAAAAAAAAAAAAADROm7oxnsSxJqcD43OnLBQZ-gKBjVTjl3T1Z9Jz2Cgq%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3D1ER3%252Bm%252BomJihHhQWL4TVdYMcYXs%253D)
[자바스크립트] 빌트인 객체
빌트인 객체 1. 자바스크립트 객체의 분류 표준 빌트인 객체 - ECMAScript 사양에 정의된 객체, 애플리케잉션 전역의 공통 기능을 제공 호스트 객체 - ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행환경에서 추가로 제공하는 객체 사용자 정의 객체 - 사용자가 직접 정의한 객체 2. 표준 빌트인 객체 자바스크립트는 Object, String, Number, Boolean, Symbol, Math, Reflect, JSON, Proxy 등 40여 개의 표준 빌트인 객체를 제공한다. Math, Reflect, JSON을 제외한 표준 빌트인 객체는 모두 인스턴스를 생성할 수 있는 생성자 함수 객체다. 생성자 함수 객체인 표준 빌트인 객체는 프로토타입 메서드와 정적 메서드를 제공, 생성자..
![[자바스크립트] strict mode](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FCClYX%2FbtrnuX1dXZN%2FAAAAAAAAAAAAAAAAAAAAAK63cCCv9qqh-gIcNx4JcvIw4pbej9D1HFpjER6yETQN%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DOg9GueiaRwcodY7S6CGuViMFje8%253D)
[자바스크립트] strict mode
strict mode 1. strict mode란? strict mode는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. 'use strict'; // 하지 않으면 자바스크립트는 x 변수를 암묵적으로 전역 변수처럼 사용할 수 있기 때문에 콘솔에 10이 찍힌다 function foo(){ x = 10; } foo(); console.log(x); // x is not defined 2. strict mode의 적용 strict mode를 적용하려면 전역의 선두 또는 함수 몸체의 선두에 'use strict';를 추가한다. 'use stri..
![[자바스크립트] 프로토타입](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbNXJ8U%2FbtrnvwaWH4K%2FAAAAAAAAAAAAAAAAAAAAAMC14m2Du9OnqKlzM9bg3dtFtDjscZWEsNiXmAmwJqSh%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DKfvb8PG0epz68Dsf4slqyfOmoWk%253D)
[자바스크립트] 프로토타입
프로토타입 자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 "모든 것"이 객체다. 1. 객체지향 프로그래밍 객체지향 프로그래밍 - 여러 개의 독립적인 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 // 이름과 주소 속성을 갖는 객체 const person = { name : 'Lee', address : 'seoul' } 프로그래머(subject, 주체)는 이름과 주소 속성으로 표현된 객체(obejct)인 person을 다른 객체와 구별하여 인식할 수 있다. 객체 - 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조 객체지향 프로그래밍은 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그램이 패러다임이다...
![[자바스크립트] 함수와 일급 객체](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbxM9zI%2FbtrndGSyknU%2FAAAAAAAAAAAAAAAAAAAAAFdTlLR8S9tEnWQW8a4t1rdW7DfS7N8eMc-42tBqrtfk%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3Dy2iiotnzlujkicL5Pozw0lJZtSA%253D)
[자바스크립트] 함수와 일급 객체
함수와 일급 객체 일급 객체 일급 객체 - 다음과 같은 조건을 만족하는 객체 무명의 리터럴로 생성(런터임에 생성 가능) 변수나 자료구조(객체, 배열 등)에 저장 가능 함수의 매개변수에 전달 가능 함수의 반환값으로 사용 가능 // 1. 함수는 무명의 리터럴로 생성 // 2. 함수는 변수에 저장 가능 // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당 const increase = function(num){ return ++num; } const decrease = function(num){ return --num; } // 3. 함수는 객체에 저장 가능 const predicates = {increase, decrease}; predicates // {increase: ƒ,..
![[자바스크립트] 생성자 함수에 의한 객체 생성](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FnN67V%2FbtrmEY1IdUR%2FAAAAAAAAAAAAAAAAAAAAAFyCRQHLZoe2hSBf667W0zPg7b6l6jdit0gG49sb_vq5%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DGVWLqoAVuHzEwPbU1CsKnkaS8Ic%253D)
[자바스크립트] 생성자 함수에 의한 객체 생성
생성자 함수에 의한 객체 생성 1. Object 생성자 함수 생성자 함수(constructor) - new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수 생성자 함수에 의해 생성된 객체를 인스턴스(instance)라 한다. 자바스크립트는 String, Number, Boolean, Fucntion, Array, Date, RegExp, Promise 등의 생성자 함수 제공 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다. // 빈 객체 생성 const person = new Object(); // 프로퍼티 추가 person.name = 'Lee'; person.sayHe..
![[자바스크립트] 프로퍼티 어트리뷰트](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbGPAlJ%2FbtrmEilPmY4%2FAAAAAAAAAAAAAAAAAAAAAOWioJcQBh-4cCCVy8k_HsyYjUsN9tbF9cE3a0auE23F%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DyiDutG%252B1PFQmxTloerotS1opfKI%253D)
[자바스크립트] 프로퍼티 어트리뷰트
프로퍼티 어트리뷰트 1. 내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECAMScript 사양에서 사용하는 의사 프로퍼티(pseudo property)와 의사 메서드(pseudo method)다. ECMAScript 사양에 등장하는 이중 대괄호([[...]])로 감싼 이름들이 내부 슬롯과 내부 메서드다. https://262.ecma-international.org/11.0/#sec-object-type 자바스크립트는 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않지만 일부에 한하여 간접적으로 접근할 수 있는 수단을 제공한다. 2. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 프로퍼티 어트리뷰트 - 자바스크립트..