scope란, '변수'가 선언되고 사용될 수 있는 범위를 의미한다. JavaScript 코드를 작성하다보면, \*\*\* is not defined라는 에러 메시지와 만나게 되는 경우가 있다. 즉, 변수가 아직 선언되지 않았다는 뜻이다. 오잉, 나는 분명 let, co
Array안에 있는 값 중 최댓값과 최솟값을 여러 방법으로 구해보자👻변수를 선언할 때 기본값으로 const를 사용했으나, let min = arr\[0]의 경우 3줄 아래에서 재할당을 해줄 필요가 있으므로 let 을 사용했다. arr\[0]을 min의 기준값으로 잡아
객체의 특정 키의 값을 가져오는것도 가능하지만, 반대로 객체에 특정 키를 만들고 값을 할당하는것도 가능하다. information이라는 객체를 먼저 하나 만들고, 여기에 키와 값을 만들어주고,verb의 값을 키로, project의 값을 그 키의 값으로 할당해준다. A,
arrow function > arrow function은 es6에서 추가된 새로운 함수 표현방법이다. * 1) 이름없는 함수 표현 * 2) 이름이 있는 함수 표현 3) 호출은 두 함수 모두 동일한 방법으로 할 수 있다. 4) ES5 함수를 변수에 저장하기 E
Class 란? class는 함수다. 함수를 함수표현식과 함수 선언으로 정의할 수 있듯이, class도 class 표현식과 class 선언 두가지로 class는 몸체에 0개 이상의 메서드만 정의할 수 있다. class 몸체에서 정의 할 수 있는 메서드는 construc
다음 요구사항을 충족하는 객체를 만들어서 return 해주세요.objData가 갖고 있는 property는 3개 입니다.sumAmount: 총 판매량sumReview: 총 리뷰개수sumLike: 총 좋아요수 이번에는 인자로 받은 데이터를 조합해서, 구조를 바꿔서 리턴합
객체(Object)는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 Key(이름)와 Value(값)로 구성된다. 객체(Object)는 {}(중괄호)로 감싸져 있고,콜론으로 구분된 프로퍼티 이름/프로퍼티값의 쌍들이 쉼표로 분리된 목록의 형태이다.property 이
scope란, '변수'가 선언되고 사용될 수 있는 범위를 의미한다. JavaScript 코드를 작성하다보면, \*\*\* is not defined라는 에러 메시지와 만나게 되는 경우가 있다. 즉, 변수가 아직 선언되지 않았다는 뜻이다. 오잉, 나는 분명 let, co
sliceCityFromAddress 함수를 구현해 주세요.sliceCityFromAddress 함수는 address 인자를 받습니다.address 인자에는 주소를 나타내는 string이 주어집니다.주어진 주소가 어느 도시인지를 찾아내서, 해당 주소에서 도시 부분만 삭
divideArrayInHalf 함수를 다음과 같이 구현해주세요.divideArrayInHalf 함수의 인자인 array는 숫자 값으로만 구성되어 있으며 정확히 총 5개의 요소(element)로 구성되어 있습니다.array의 요소들 중 10과 같거나 작은 값의 elem
float 속성은 이미지를 띄워서 텍스트가 띄윈 이미지 주변에 배치되도록 만들어준다. 이미지와 텍스트 사이에 빈 공간이 생기게된다. float:left;를 사용해주면, 라이언 이미지가 왼쪽에 뜨게 되고 텍스트들이 그 주변을 감싸준다. float:right;를 사용해주
레이아웃을 컨트롤할 수 있는 Display 속성. 모든 요소들은 대부분 block 아니면 inline을 Display속성 값으로 가지고 있다. block block 요소는 브라우저의 한줄을 모두 사용하며, 위에서 아래로 차곡차곡 쌓인다. inline
알고보면 간단한 시맨틱 웹과 시맨틱 태그 한번에 이해하기 👻웹 기술의 발전에 따라 많은 수 많은 정보들이 웹상에 쌓이게 되었는데, 컴퓨터가 그 정보들을 보다 쉽게, 의미있는 해석할 수 있도록하기 위해 시맨틱 웹(Semantic Web)과 시맨틱 태그(Semantic
박스의 가로 사이즈를 모두 300px로 지정해 주었는데도, 아래와 같이 가로의 길이가 다르다면?
boder: 두께 선스타일 선색깔; 밑줄은text-decoration: underline; 로 만들 수 있지만, 실제로 대부분의 개발자는 커스터마이징하기 좋은 border-bottom: 2px solid; 이런식으로 구현한다.
flex-grow flex-shrink flex-basishtml 파일 css파일 flex-grow와 flex-shrink는 브라우저 창의 크기에 따라 요소의 크기를 변화 시켜준다. 이름에서 유추할 수 있듯, flex-grow는 창 크기가 커질때, flex-shrink
요소들을 축의 중심방향(justify-content) 혹은 축의 수직방향(align-content)을 중심으로 정렬하는 방법을 알아보자. 축의 방향으로 요소들을 정렬시켜준다. (기본값)justify-content: flex-first;justify-content: fl
flex box 모델의 모든것을 알아보자👻오늘은, flex box를 생성하고(display: flex;), 요소들을 다음줄로 넘겨주고 (flex-wrap), 요소들을 축의 중심방향(justify-content) 혹은 축의 수직방향(align-content)을 중심으로
css의 position 속성 중 relative와 absolute의 차이를 알아보자! 이 둘의 차이를 알려면, 먼저 position의 기본 속성인 static 을 알아야한다. static은 position속성의 기본값으로 모든 태그들은 이미 처음부터 static 상태
css 스타일 속성 중 unset이라는 아이가 있는데, 요 아이는 예를들어 버튼을 생성하면 브라우저마다 기본적으로 적용되어있는 버튼의 기본 스타일 값을 초기화 시켜주는 아이다. 예를들어, 아래와 같이 버튼을 생성했다면?이런 버튼이 생성된다. 여기서 all: unset;