본문 바로가기

전체 글234

(2)JavaScript중급_2_DOM객체_개념부분(이론요약)[작성중..] #알아야 할 개념 :● 개념1 : Window 객체란?○ 정의 : 웹 브라우저 창에 대한 기능, 설정값 등등을 다룰 수 있도록 하는 JavaScript의 가장 상위 객체이다.- Ex1_ Window 객체의 프로퍼티 :window.innerWidth : 현재 출력되는 웹 브라우저의 창의 너비window.innerHeight : 현재 출력되는 웹 브라우저의 창의 높이- Ex2_ Window 객체의 프로퍼티 메소드 :window.open() : 현재 웹 브라우저에서 새로운 창을 생성 명령 메소드window.close() : 현재 웹 브라우저에서 창을 닫으라는 명령 메소드- Ex3_ Window 객체의 프로퍼티 객체 : (window.은 생략이 가능하다.)window.document..... window.con.. 2024. 11. 11.
(1)JavaScript중급_1_태그를 JS에 호출하는 방법, 이벤트핸들링,핸들러 #Default 상황 :Html 코드의 내 마지막 부분에 태그가 존재의 src 속성으로 외부js파일명값 대입내 일반 태그, id속성의 태그 , class명의 태그가 존재#알아야 할 개념 :● 개념1 : Html 코드내 태그 => JavaScript로 호출 방법순서0_ Default 상황처럼, 먼저 내 마지막에 의 속성값에 js파일명 대입순서1_ const 변수 = document.get...() || querySelector() 로 태그를 js변수에 저장 순서2_ console.log || onclick프로퍼티 등등으로 출력, 구현 ... 한다.● 개념2 : document객체  + getElement...메소드의 종류○ 분류 방법(2가지)방법1_ Html에서 js 호출 vs CSS에서 js 호출①... 2024. 11. 11.
(15)CSS_레이아웃_3_Grid-3-4-뮤직 매거진 프로젝트 ※연습문제 : 음악 플레이어 - CSS 레이아웃 | 코드잇 ● 문제 조건 :○ 조건1_ 스크롤했을 때 사이드 바 영역(”Codeit Music” 부분)이 화면 왼쪽에 고정되어 보이도록 배치했다. ○  조건2_ 스크롤했을 때 플레이어 영역(” After Sunset” 부분)이 화면 하단에 고정되어 보이도록 배치했다.  ○  조건3_ 플레이어 영역의 컨트롤 요소들을 디자인과 같이 배치했다 ● 해결과정 :○ 조건1,2 과정1_ ★main Box의 margin-bottom , margin-left에 각각 footer.Box의 height, sidebar.Box의 width만큼 준다.body의 구조파악을 해보면, 크게 3가지의 Box로 각각 사이드바 (Div sidebar Box), main Box , foote.. 2024. 11. 5.
(14)CSS_레이아웃_3_Grid-3-3-음악 사이트 프로젝트 ※ 연습문제  :  ● 해결 방법 (핵심만) :내가 약했던 부분 : 1_ 맨 위 상단 로고 고정바 (header.Box)● 순서 1 : 상단 로고는 스크롤을 해도,맨 위에 계속 고정 출력=> position : fixed + top , left , right : 0 ● 순서 2 : 스크롤 하면서, 다른 Box들과 겹칠 때, 더 위에 출력 되어야함=> z-index : 1 // 0보다 큰값(default 값)2_ 비디오 + 광고 텍스트 (hero.Box)  //궁금한 점은 이렇게 많이 되어있던데, 다른방법안사용하고 이 기법을 자주 사용하나??● 순서 1 : 비디오(bg.Box) , 광고 텍스트 (hero-heading.Box)를 모두 감싸는 부모 Box를 position : relative를 걸고, pos.. 2024. 11. 5.