웨일의 블로그 웨일의 블로그

3.4 Making a todo list 1 할일을 입력한 후 엔터를 치면 타이핑 했던 것들이 지워지고 할일이 출력되고 옆에 지우는 버튼이 생성되어야 한다. 다시 할일을 입력하면 새로운 할일이 이전 할일 밑에 생성되어야 한다. 지우고 싶은 할일의 지우기 버튼을 누르면 해당 할일이 지워져야 한다. 3.5 Making a todo list 2 local storage에는 자바스크립트 데이터 저장이 불가능하고 스트링만 저장 가능하다. 저장되는 값은 모두 스트링으로 변환된다. 따라서 local storage에 저장할 때는 스트링 형태로 변환 후 저장하고 불러올 때는 객체 형태로 변환 후 사용한다. 어떤 삭제 버튼이 눌렸는지는 event.path[1].id으로 알 수 있는데 target으로 더 쉽게 알 수 있다...

3.0 JS clock part 1 document: html 전체를 가리킴, document.querySelector로 하나의 변수에 집어넣었으면 그 변수(태그) 안의 자식태그는 변수.querySelector로 접근할 수 있다. 날짜에 대한 정보를 받으려면 const date = new Date(); 로 구조체 만들어서 date변수에 넣고 사용한다. 시간을 출력할 때 10미만 숫자에 0을 붙이기 위해 삼항 조건 연산자 사용 3.1 JS clock part 2 시간이 1초마다 갱신되야 해서 setInterval(fn,밀리초)이라는 함수를 사용한다. 1초마다 시간이 갱신되게 하려면 1초마다 시간을 출력하는 함수를 실행해야 한다. setInterval(fn,ms)함수를 사용하고 따라서 setInterval(..

하기 전 내 생각들 날씨,위치,시간,투두리스트,이름 갱신되게 해야함 위치: api써서 받아오기 갱신되게 해야함 투두리스트: 텍스트 적는 칸 만들고 그거 보여주기 계속 적을수 있어야 함 버튼 누르면 새로운 투두리스트 적는 칸 떠야함 버튼 만들기 버튼에 투두리스트 생성 코드 넣기 생성 위치 잡기 삭제 누르면 투두리스트 삭제되야함 삭제버튼 button타입 삭제방법 알아야함 이름: 텍스트 적는 칸 만들고 그거 보여주기 시간: 현재시간 보여주는 메소드쓰기 날씨: api써서 받아오기 크롬 새페이지 만들면 보이는 화면 만들기 실습 전 이론 파트 공부 2.3 function basic 어떤 변수가 함수를 받았을 때 이 변수가 받는 값은 그 함수의 리턴값이다. 리턴값이 정의되지 않았다면 undefined를 받는다. 2...

문자열을 다룰 때 유용한 프로퍼티와 메소드를 제공하는 레퍼(wrapper)객체이다. 원시타입인 문자열이 wrapper객체 메소드 사용할수 있는 이유는 문자열이 프로퍼티,메소드 호출시 wrapper객체로 일시적으로 변환되서다. 1. String Constructor 생성방법: let strOjb = new String('Lee'); 이때 어떤 타입의 인자가 와도 문자열로 변환된다. 2. String property 2.1 String.length String의 길이를 구할 때 사용한다. 3. String Method 3.1 charAt(number) 인덱스에 해당하는 위치의 문자를 반환한다. const str = 'Hello; str.charAt(0):'H' 3.2 concat(string) 인수로 전달한..

10강 - 객체 1. 객체: 키와 값으로 구성된 프로퍼티들의 집합 객체 내 프로퍼티: 함수를 포함하여 모든 값을 사용 가능. 이때 함수는 메소드라 불림 데이터(프로퍼티)와 동작(메소드)를 모두 포함할 수 있어서 구조화에 유용하다. 프로토타입: 객체지향의 상속을 구현하기 위한것 1.1 프로퍼티 프로퍼티 키(이름)과 프로퍼티 값으로 구성됨 프로퍼티는 프로퍼티 키로 유일하게 식별 가능(식별자,identifier) 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 symbol값, 의외의 값은 타입 변환되어 문자열이 된다. 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티만 적용된다. 프로퍼티 값: 모든 값 객체는 순서를 보장하지 않는다. 2. 객체 생성 방법 프로토타입 기반 객체 지향 언어로..

로고, 검색창, 하단부 마무리 창을 줄일 때 어느 너비까지만 검색창이 줄어들게 하고 싶었는데 min-width를 몰라서 한참 헤맸다. 클론 코딩을 진행하면서 float 기능 숙달과 요소간 배치 조절에 대해 배웠다. 로그인 이미지 Gmail 대한민국 Google정보 광고 비즈니스 검색의 원리 설정 약관 개인정보처리방침 출력 결과

9강 - Float float 프로퍼티는 블록 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. flexbox으로 대체할 수 있지만 지원하지 않는 브라우저(IE)가 있기 때문에 알아야 한다. float을 사용하지 않은 블록 요소들은 수직으로 정렬된다 float:left 가 사용된 블록 요소들은 왼쪽부터 가로 정렬된다 float:right 가 사용되면 오른쪽부터 가로 정렬된다. 1 2 출력 결과 : 왼쪽부터 가로정렬, padding과 margin을 이용해서 띄우기 float 프로퍼티 관련 문제 해결 방법 1. float 선언된 요소와 선언되지 않은 요소간 margin이 사라지는 경우 - float이 선언되지 않은 요소에 overflow:hidden 추가 2. 부모 요소가 float 선언된 자식을 포함할..

어트리뷰트 셀렉터 (Attribute Selector) ~= : 공백으로 분리되고 지정된 어트리뷰트 값을 포함하는 요소를 선택한다. |= : 지정된 어트리뷰트 값과 일치하거나 값 뒤에 -으로 시작하는 요소를 선택한다. ^= : 지정된 어트리뷰트 값으로 시작하는 요소를 선택한다. $= " 지정된 어트리뷰트 값으로 끝나는 요소를 선택한다. Heading first Heading-first Heading second Heading second- 네이버 구글 출력 결과 3강 - 프로퍼티 값의 단위 크기단위 px 픽셀은 모니터 화소 1개의 크기를 의미한다. 따라서 해상도에 따라 px 크기가 달라진다. 그래서 대부분의 브라우저는 1px을 1/96인의 절대단위로 인식한다. % 백분률 단위의 상대 단위로, 요소에 지정..