Peridott의 개발 블로그

객체 메소드 * 객체 메소드 속성 객체의 속성 중 함수 자료형인 속성을 메소드라고 부름 실행확인 * in과 with 키워드 in : 객체 내에 해당 속성이 있는지 확인해 주는 키워드(존재하면 true, 아니면 false) with : 객체의 속성에 접근시 객체명을 제시하는 걸 생략할 수 있음(코드를 줄여주는 키워드) 이름 : 국어점수 : 수학점수 : 영어점수 : 실행확인

객체 * 객체의 선언과 사용 객체는 중괄호 { }를 이용하여 생성하고, 중괄호 안에 이 객체에 필요한 속성들을 정의함 속성명:속성값의 형태로 정의(key:value) 속성값으로는 모든 자료형을 담을 수 있음 변수 = { 속성명:속성값, 속성명:속성값, 속성명:속성값, ... } 실행확인 * 객체 생성시 특이케이스(속성명 제시시 반드시 문자열 형태로 해야되는 경우) 실행확인 * 객체에서의 반복문 객체가 가지고 있는 모든 속성들에 순차적으로 접근하..

함수 함수 선언하는 방법 선언적 함수(Function Declaration) : function키워드, 함수명 익명 함수(Function Expression) : 변수에 익명함수를 대입하는 방식 화살표 함수(Arrow Function) : 익명함수를 간단히 작성하는 방법(ES6(ES2015)에 추가) 즉시 실행 함수 iife(Immediately Invoked Function Expression) 선언과 호출 변수를 캡슐화처리해서 유용하게 쓸 수 있음 1) 선언적 함수 function 함..

문자열과 숫자 문자열 관련 메소드 문자열 처리 메소드 * 문자열 관련 html메소드 문자열 Html 메소드 * 숫자(수학) 관련 메소드 수학관련 메소드 * 문자열과 숫자간의 산술연산/형변환 산술연산 정수 1 : 정수 2 : 결과 없음 덧셈  * 실습문제 사용자로부터 prompt로 입력받은 문자열 중 알파벳(소문자만)의 갯수 세기 실습문제

변수와 자료형 변수 선언시 var뿐만아니라 let, const를 이용하여 선언 가능 var, let, const의 차이점 1) 변수의 선언 방법 클릭 2) 스코프(사용가능 범위) 클릭 * 변수 선언 위치에 따른 전역변수/지역변수 * 자료형 Dynamic Type : 변수 선언시 자료형을 별도로 지정하지 않음(자료형의 개념이 없는건 아님) => 변수별로 타입이 지정되지 않고, 대입되는 값에 의해 타입이 결정 됨 자바스크립트의 자료형 string(문자열) number(숫자) boolean(논리값) object(객체) func..

HTML요소에 접근하기(해당 요소 객체 가져오기) 1) 아이디를 이용하여 요소 가져오기 아이디로 접근 range 0 클릭마다 색 변경 2) 태그명을 이용하여 요소 가져오기 목록1 목록2 목록3 목록4 목록5 태그명으로 접근 3) name속성을 이용하여 요소 가져오기 취미 게임 영화감상 ..

반응형 웹 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus voluptatem voluptatibus adipisci at sunt ullam aliquam officia nisi, earum enim illo in tempore harum, quidem architecto necessitatibus excepturi tempora laudantium! Eos culpa ullam quaerat cum pariatur inventore velit vel. Quaerat, sequi sunt nostrum, eveniet officia magni mollitia per..

flex 기본 축을 기준으로 정렬 * 부모요소 : flex-container - display: flex - flex-direction: row(기본값)|column|row-reverse|column-reverse - justify-content: 메인축 정렬(flex-direction: row이면 row, column이면 column) - align-items:크로스축 정렬(flex-direction: row이면 column) - flex-wrap: 줄바꿈여부 - align-content: 여러줄인 경우의 크로스축 설정 * 자식요소(정렬의 주체) : flex-item ..

semantic태그 의미가 있는 html4버전에서는 div태그의 id등을 통해 내용 구분 스크린리더는 영역별로 접근 불가 html5버전에서는 태그의 이름으로 태그의 내용을 유추 스크린리더는 영역별로 접근 가능 웹접근성 향상을 위한 태그 사용 태그 <header> 헤더부분 : 맨 상위에 위치하고, 회사 로고나 기타 헤더에 넣을 것들을 배치 </header> <nav> nav : 다른 페이지로 이동할 수 있는 네이게이션 정보. 위치가 자유롭다 </nav> <section> ..

배치 관련 스타일 position: 상대위치(relative)와 절대위치(absolute) 첫번째 자식 두번째 자식 세번째 자식 position: 고정위치(fixed) z-index : 요소들을 순서대로 위로 쌓는 속성 요소1 요소2 요소3 visibility: 특정요소를 보이거나 보이지 않게 하는 스타일 영역1 영역2 --> 영역2 영역3 visibility:hidden은 공간은 차지하고 있지만 display:none은 공간마저도 사라지게 함 float 페이지 내의 요소들을 화면..