recoding;

객체 접근Product['제품명'] -> '7D 건조 망고'Product['유형'] -> '당절임'Product['성분'] -> '망고, 설탕, 메타중아황산나트륨, 치자황색소'Product['원산지'] -> '필리핀' Product.제품명 -> '7D 건조 망고'Product.유형 -> '당절임'Product.성분 -> '망고, 설탕, 메타중아황산나트륨, 치자황색소'Product.원산지 -> '필리핀' 객체 생성 객체와 반복문for in 반복문을 사용해 객체에 반복문을 적용name: 바나나price: 1200 속성과 메소드요소 -> 배열 내부에 있는 값 하나하나속성 -> 객체 내부에 있는 값 하나하나메소드 -> 객체의 속성 중 자료형이 함수인 속성*객체라는 것을 사용할 때는 this를 사용  생성자 함수..

if문if~else문if~if else~else문  생략 switch 조건문let input = 32;switch (input % 2) { case 0: console.log("짝수입니다."); break; case 1: console.log("홀수입니다."); break;} * break 키워드를 사용하지 않는 switch조건문let date = new Date();switch (date.getMonth()+1){ //getMonth()는 0부터 가져오기 때문에 +1 해준다. case 12: case 1: case 2: console.log("겨울입니다."); break; case 3: case 4: ca..

HTML과 XML페이지를 위한 프로그래밍 인터페이스(API)로 문서의 구조도와 함께 문서에 포함된 요소를 읽고 조작할 수 있는 메서드를 제공한다. DOM을 이용해서 요소를 이름이나 속성으로 찾고 요소나 요소의 콘텐츠를 추가, 수정, 삭제할 수 있다. 1.1 노드 트리DOM은 노드 컬렉션이다* 요소 노드* 속성 노드* 텍스트 노드페이지 내의 각 요소를 노드라고 부른다. DOM을 나무로 본다면 각 노드는 더 멀리 있는 나뭇가지를 포함할 수 있는 개별 나뭇가지이다. DOM의 노드트리에서는 요소, 요소의 속성, 요소의 콘텐츠 모두가 노드이다. 1.2 DOM 노드에 접근하기document 객체에는 문서의 정보를 포함하는 기본 제공 속성들이 있다. 속성과 메서드를 함꼐 연결하고 . 으로 구분해서 필요한 요소를 찾아..

비교 연산자== 같다.=== 일치한다(값이 같고 데이터 형식도 같다). 같다 vs 일치하다alert("5" == 5); //'true', 둘 다 '5'이다.alert("5" === 5); //'false', 둘 다 '5'이지만, 같은 데이터 형식은 아니다.alert("5" != 5); //'false', 둘 다 '5'니까alert("5" !== 5); //'true', 같은 데이터 형식이 아니다. 내장 함수* alert(), confirm(), prompt() : 브라우저 단계의 대화 상자를 표시한다.* Date() : 현재의 날짜와 시간을 반환한다.* parseInt("123") : 숫자를 포함한 문자열 데이터 형식을 인수로 받아서 숫자 데이터 형식으로 바꾼다. 문자열은 인수로 함수에 전달된다.* se..

각 기기용 레이아웃 만들기 모바일용 레이아웃 구조 만들기 카페 소개 오시는 길 이 달의 추천 카페 소개 영업 시간 : 오전 9시 ~ 밤 10시 휴무 : 매주 수요일 (수요일이 공휴일일 경우 수요일 영업, 다음날 휴무) ..

웹 사이트의 레이아웃을 정할 때 자주 사용하는 기준 = '그리드 시스템'그리드 시스템: 화면을 몇개의 칼럼으로 나누어 요소들을 배치하는 것그리드 시스템은 화면 너비를 특정 값으로 고정해놓고 그 안에 표시할 요소들의 너비 값을 지정하면 너비가 항상 일정하게 표시되기 때문에 원하는 레이아웃을 쉽게 만들 수 있다.= pc용 사이트만 만들때는 이 방법이 편리반면어떤 기기에서도 동일한 레이아웃을 가지면서 기기의 특성에 맞게 웹 문서가 표현되려면 문서 안의 각 요소의 너비를 픽셀과 같은 고정 값이 아니라 백분율과 같은 가변 값으로 지정하면 됨.-> 가변 그리드 레이아웃  애완견 종류 ..

문제 보기더보기한 개 이상의 항의 합으로 이루어진 식을 다항식이라고 합니다. 다항식을 계산할 때는 동류항끼리 계산해 정리합니다. 덧셈으로 이루어진 다항식 polynomial이 매개변수로 주어질 때, 동류항끼리 더한 결괏값을 문자열로 return 하도록 solution 함수를 완성해보세요. 같은 식이라면 가장 짧은 수식을 return 합니다.제한사항0  polynomial에 있는 수 polynomial에 변수는 'x'만 존재합니다.polynomial은 양의 정수, 공백, ‘x’, ‘+'로 이루어져 있습니다.항과 연산기호 사이에는 항상 공백이 존재합니다.공백은 연속되지 않으며 시작이나 끝에는 공백이 없습니다.하나의 항에서 변수가 숫자 앞에 오는 경우는 없습니다." + 3xx + + x7 + "와 같은 잘못된..

반응형 웹 디자인데스크톱 PC용 브라우저를 기본으로 만들어진 웹 사이트를 스마트폰에서 접속하면 매우 작은 글씨고 표시되는 문제가 발생 -> 모바일 기기의 특성을 활용할 수 있도록 모바일 사이트를 별도로 제작하기 시작함. -> 기존의 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시할 수 있는 방법 ??=> 반응형 웹 디자인 여러 기기에 맞는 사이트를 별도로 제작하지 않고 앞의 사이트처럼 화면 크기에 '반응'해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것 = 반응형 웹 디자인 반응형 웹의 장단점1. 모든 스마트 기기에서 접속 가능2. 가로 모드에 맞추어 레이아웃 변경 가능3. 사이트 유지,관리 용이 => 사이트가 하나뿐이기 때문에 유지, 관리가 쉬움. 뷰포트스마트폰 화..

사용자 동작에 반응하는 가상 클래스사용자가 웹 요소를 클릭하거나 마우스 커서를 올려놓는 등의 동작을 할 때 스타일이 바뀌도록 만들려면 -> 가상 클래스 선택자 사용. 1. :link 가상 클래스 선택자 - 방문하지 않은 링크에 스타일 적용2. :visited 가상 클래스 선택자 - 방문한 링크에 스타일 적용3. :hover 가상 클래스 선택자 - 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용4. :active 가상 클래스 선택자 - 웹 요소를 활성화했을 때의 스타일 적용5. :focus 가상 클래스 선택자 - 웹 요소에 초점이 맞추어졌을 때의 스타일 적용 UI 요소 상태에 따른 가상 클래스사용자의 동작뿐만 아니라 웹 요소의 상태에 따라 스타일을 지정할 때도 가상 클래스 선택자 사용UI(User In..

HTML4 vs HTML5HTML4에서는 화면 구성하는 역할을 대부분 태그가 맡았고 수많은 태그가 다시 id 속성으로 구분됨.그런데 그 태그들의 이름에 제약이 없었기 때문에 개발자 개인의 생각에 따라 지정되었음.id="header"나 id="content"를 보고 '이 부분에는 헤더가 있겠구나', '이 부분에는 사이트 내용이 있겠구나' 라고 추측 가능=> 헤더나 사이트 내용, 메뉴 등 반드시 필요한 요소에 맞는 태그를 미리 약속해 놓는다면?--------> HTML5에서는 웹 문서 레이아웃을 표준화하는 태그들이 새롭게 추가됨. 이것이 "시맨틱 태그" 왜 시맨틱 태그로 레이아웃을 만들어야 할까?-시맨틱 태그로 작성한 소스를 보면 태그만 보고도 어느 부분이 제목이고 메뉴이고 실제 내용인지 쉽게 알 수 있음...