the Rabbit_Sand, IT Blog 🍀

변수 : 변수는 var나 let, const를 사용하여 선언할 수 있다. var와 let, const의 차이점 1. var ① 변수의 선언: 중복 선언O, 재할당O → var는 중복된 변수가 생기거나 값이 변경될 수 있기 때문에 이를 보완한 타입이 let과 const이다. ② 변수의 사용 범위(스코프): 변수가 선언된 함수 영역 내에서 사용할 수 있다. 2. let ① 변수의 선언: 중복 선언X, 재할당O ② 변수의 사용 범위(스코프): 변수가 선언된 블록({}) 내에서만 사용할 수 있다. 3. const ① 변수의 선언: 중복 선언X, 재할당X → 상수의 개념과 같음 ② 변수의 사용 범위(스코프): 변수가 선언된 블록({}) 내에서만 사용할 수 있다. 변수의 선언 위치에 따른 전역변수/지역변수 특정한 ..

HTML 요소에 접근하기 : 해당 요소 객체를 가져온다. 1. 아이디로 접근하기 : 선택된 요소의 속성들에 접근하여 속성값을 가져오거나 변경할 수 있다. - 선택된 요소.접근할 속성명 접근 2. 태그명으로 접근하기 : 태그는 중복이 가능하여 배열에 담겨서 반환된다. - document.getElementByTagName("태그명"); 목록1 목록2 목록3 목록4 목록5 접근 3. name 속성값으로 접근하기 : document.hetElementsByName("name속성값"); 취미 노래 부르기 게임하기 운동하기 접근 4. 클래스명으로 접근하기 : document.getElementsByClassName("class속성값"); 접근

window : 자바스크립트에 내장된 객체이며, 웹 브라우저 내에 존재하는 모든 요소들의 최상위 객체이다. → 모든 곳에 적용되기 때문에 생략할 수 있다. ex) window.alert ⇒ alert document : 웹 문서마다 하나씩 만들어지는 객체이며, HTML 문서에 대한 정보들을 가지고 있다. 데이터를 출력하는 기본 구문 1. window.alert("출력할 문구"); : 알림창을 띄워 문구를 출력시킨다. 2. window.console.log("출력할 문구"); : 콘솔창에 문구를 출력시킨다. 3. document.write("출력할 문구"); : 화면에 문구를 출력시킨다. - 문자열에 html 태그가 포함돼있으면 태그로 읽어온다. 출력 4. 선택한 요소.innerHTML/innerText ..

* 웹의 3요소는 HTML과 CSS, JavaScript이다. - HTML: 웹 문서의 뼈대를 담당한다. - CSS: 웹 문서의 스타일(색상, 테두리 등)을 담당한다. - JavaScript: 웹 문서 상에서 이벤트가 발생했을 때에 실행할 동작들의 처리(동적 효과)를 담당한다. 자바스크립트(JavaScript)란, : 웹 브라우저에서 가장 많이 사용되며, 인터프리터(interpreter) 방식의 스크립트 언어(scripting language)이다. - 인터프리터: 프로그래밍 언어의 소스 코드를 컴파일을 거치지 않고 바로 실행하는 프로그램을 뜻한다. 웹 브라우저에서 HTML 문서가 로딩될 때 코드를 한 줄씩 읽어내려간다. 코드에 문법적 문제가 있는 경우에 바로 알려주는 것이 아니라 실행 시에 알려준다. ..

많은 사이트를 보면 메뉴에 마우스 커서를 갖다대면 해당 메뉴의 목록들이 뜬다. 목록을 작성할 땐 순서가 없는 목록 태그인 태그를 사용한다. 추천 오늘의 특가 국내숙소 모텔 호텔 펜션/풀빌라 리조트 교통/항공 고속버스 KTX 렌트카 항공권 해외여행 해외숙소 해외 항공권

form 태그를 사용하여 사용자가 검색창에 텍스트를 입력하고 검색 버튼을 눌렀을 때 해당 양식을 서버로 보낸다. - input:search : 검색할 텍스트 상자 - input:submit : 검색 버튼

로그인 양식 - form 태그 : 아이디와 패스워드를 입력받으면 서버로 넘겨야 하므로 form 태그를 사용한다. - input 태그 : 아이디와 패스워드를 입력받을 입력창과 로그인 버튼을 만들 때 사용한다. - a 태그 : 회원가입과 아이디/비밀번호 찾기를 할 때 a 태그를 사용하여 해당 문서로 이동시킨다. 회원가입 아이디/비밀번호 찾기

footer bar에는 보통 이용약관과 개인정보취급방침, 고객센터, Copyright 등이 들어간다. 이용약관| 개인정보취급방침| 인재채용| 고객센터 서울특별시 강남구 테헤란로 1234 (역삼동, YJ티스토리센터) 사업자 등록번호 : 123-45-678910 통신판매업신고 : 강남 12345호 업무집행자 : 홍길동 고객센터 : 1544-0000 (평일 09:00 ~ 18:00) Copyright © 2021-2022 YJ tistory All Right Reserved

웹 페이지는 크게 header(상단부)와 navigation bar(메뉴), content(내용), footer(하단부)로 나뉜다. - header: 홈페이지 로고, 검색창 - navigation bar: 메뉴 - content: 내용 - footer: 이용약관, 고객센터, 운영시간 등 크기를 지정할 때는 전체 틀에 대한 크기(px)를 제외하고는 %로 지정하는 것이 좋다. 새로운 틀이 추가되었을 때 px로 지정하면 일일이 다 변경해야 하므로 전체적으로 크기를 조절하기가 번거롭다. 그러나 %로 지정하면 알아서 크기 조절이 되어 편리하다.

애니메이션(animation) : 속성을 변화시켜 움직이게 하는 기법이다. - 트랜지션과 비교했을 때, 시작과 끝의 스타일을 부드럽게 이어주는 것은 같지만 애니메이션은 @keyframes를 이용하여 중간의 스타일을 지정할 수 있다. @keyframes : 애니메이션의 시작과 끝의 스타일을 지정하고 keyframes 이름도 지정한다. - 시작과 끝의 지점만 설정할 경우에는 from{} to{}로 설정한다. 애니메이션1 - 중간중간 다르게 적용할 스타일이 있으면 %로 구분하여 설정한다. 애니메이션2