죽이죽이

Date 객체 ※ 정의 - 날짜와 시간을 다루기 위한 내장 객체이다. ※ Date 객체를 사용한 Timer 구현 - HTML 코드 00 : 00 ​ - Javascript 코드 // 시작 시간 (형식 : Wed Jan 24 2024 14:54:06 GMT+0900) const startDate = new Date(); // 타이머 구현 function timer() { let timerElement = document.querySelector("#timer"); const nowDate = new Date(); // new Date 로 감싸주지 않을 경우 ms 단위로 결과값 계산 const difference = new Date(nowDate - startDate); // 1. getMinutes(), ..

WebAPI란? ※ 정의 - DOM, ajax, setTimeout, setInterval 등을 포함하고 있는 Web에서 제공하는 API 이다. - 비동기적인 처리를 주로 담당한다. setInterval ※ 사용하는 이유 - 특정 함수나 코드 블록을 일정한 시간 간격으로 반복 실행할 때 필요하다. ※ 예시 // 1초마다 "setInterval" 출력 setInterval(function() { console.log('setInterval'); }, 1000);​ setTimeout ※ 사용하는 이유 - 특정 함수나 코드 블록을 일정 시간 후에 한 번 실행할 때 필요하다. ※ 예시 // 1초 후에 "setTimeout" 출력 setTimeout(function() { console.log('setTimeo..

DOM 조작하기 ※ DOM이란? - HTML 문서를 파싱하여 자료를 구조화하고, 자바스크립트를 통해 HTML 문서를 동적으로 조작할 수 있도록 해주는 문서 객체 모델이다. ※ DOM 요소에 접근하는 방법 document.getElementById("id"); 주어진 아이디에 해당하는 단일 요소 반환 document.getElementsByClassName("class"); 주어진 클래스 이름과 일치하는 모든 요소 반환 (HTMLCollection으로 반환받기 때문에 배열처럼 반복 가능) document.getElementsByTagName("tag"); 주어진 태그 이름과 일치하는 모든 요소 반환 (HTMLCollection으로 반환받기 때문에 배열처럼 반복 가능) document.getElementsB..

변수 ※ 사용하는 이유 - 데이터를 보다 효율적으로 관리하고 재사용성을 높이기 위해서 사용한다. ※ 종류 - var, let, const ※ 사용 방법 - var (ES6 이전) : 재선언, 재할당 모두 가능한 변수타입 // 호이스팅 시 undefined로 초기화가 되기때문에 별도의 TDZ 구간이 발생하지 않는다. // 개발자가 예상하지 못한 방식으로 개발이 진행될수도 있기때문에 요즘들어서는 잘 사용하지 않는 방식이다. console.log(message); // undefined // message 변수 선언 var message = "Hello JavaScript"; console.log(message); // Hello Javascript // message 변수 재선언 var message = "..

의사 클래스 (pseudo-class) ※ 정의 - HTML 요소의 특정 상태에 따라 스타일을 동적으로 적용하기 위한 선택자이다. ※ 동적 의사 클래스 :hover 마우스가 요소 위에 올라갔을 때의 상태를 정의 :focus 입력 요소가 포커스를 받았을 때의 상태를 정의 :active 요소가 활성화되었을 때의 상태를 정의 :link 방문하지 않은 링크의 기본 스타일을 정의 :visited 이미 방문한 링크의 스타일을 정의 ※ 상태 의사 클래스 :checked 주로 라디오 버튼이나 체크 박스와 같은 입력 요소의 체크 상태를 나타내기 위해 사용 :enabled 활성화된 상태의 입력 요소를 선택하는 데에 사용 :disabled 비활성화된 상태의 입력 요소를 선택하는 데에 사용 ※ 구조 의사 클래스 :first-..

Position ※ 설명 - 문서 상에 요소를 배치하는 방법을 지정한다. - top, left, right, bottom 값을 통해 오프셋을 결정한다. ※ 기본 사용법 속성 설명 static (기본값) 문서의 흐름에 맞게 배치한다. relative 문서의 흐름에 맞게 배치하지만, 오프셋을 top, left, right, bottom 값을 통해 정한다. absolute 문서의 흐름에서 제외하고, 가장 가까운 부모 요소(relative)를 찾아 상대적인 위치에 배치한다. 부모 요소중 relative가 없을 경우 초기 컨테이닝 블록을 기준으로 배치한다. fixed 문서의 흐름에서 제외하고, 초기 컨테이닝 블록을 기준으로 고정된 위치에 배치한다. (주로 header에 많이 사용) sticky static + f..

Flex ※ 설명 - inline-block 또는 float로 마크업을 했을때의 불편함을 개선하기 위해 나온 속성이다. - 1차원적으로 수평, 수직 영역 중 하나의 방향으로 정렬이 필요할때 사용한다. - 유동적인 레이아웃 변화를 구성하기 적합하다. - 부모요소인 Flex Container와 자식요소인 Flex Item으로 구성되어있다. ※ 기본 사용법 속성 속성 설명 설정값 설정값 설명 display Flexbox 적용 flex Flexbox 적용 flex-direction 정렬 방향 지정 row (기본값) Item을 가로로 정렬 row-reverse Item을 가로 역순으로 정렬 column Item을 세로로 정렬 column-reverse Item을 세로 역순으로 정렬 align-items Cross..

Box Model ※ 정의 - 박스 모델은 웹 페이지의 레이아웃을 구성하는 데 사용되는 개념 중 하나이다. - 웹 페이지의 모든 HTML 요소는 사각형의 "박스"로 간주되며, 각각의 박스는 여러 영역으로 나누어진다. ※ 영역 구분 - contents : 실제 내용이 표시되는 영역 - padding : 내부 여백 - border : 테두리 - margin : 외부 여백 ※ 참고 사이트 - border : https://developer.mozilla.org/ko/docs/Web/CSS/border - padding : https://developer.mozilla.org/ko/docs/Web/CSS/padding - margin : https://developer.mozilla.org/ko/docs/Web..