반응형 풀스크린 영상

반응형 사이트에서 많이 볼 수 있는 풀스크린 영상 띄우기 CSS의 position과 transform, Javascript의 window width, height 를 이용해 표현할 수 있다. 풀스크린~태블릿 사이즈 까지는 영상을 띄우고, 그 이하 디바이스에서는 배경이미지로 교체하여 용량을 최적화한다. SCROLL DOWN 로고 menu01 menu02 menu03 menu04 내용 콘텐츠

2022.01.12

5장 표현식과 문, 값, 리터럴, 토큰

보호되어 있는 글입니다.

2022.01.11

반응형 네비게이션 2

반응형 네비게이션 2 해상도 별 다르게 표현되는 네비게이션 햄버거먹구잡다 조아란1 조아란2 조아란3 조아란4 조아란5 CSS /* 와이드 pc */ header{ height:60px; background:#F90; padding-top:20px} header .menuOpen{position:absolute; right:20px; top:20px; display:none} header .mainMenu{width: 450px; margin:0 auto; background:#FC3;} header .mainMenu ul{overflow:hidden;} header .mainMenu li{ float:left; margin-right:15px} header .mainMenu li a{display:blo..

2022.01.11

반응형 네비게이션 1

jQuery 반응형 네비게이션 1 해상도 별 다르게 표현되는 네비게이션 menu01 menu02 menu03 menu04 menu05 CSS /* CSS Document */ html,body{height: 100%;} *{margin:0; padding:0} a{ color:#333; text-decoration:none} ul{ list-style:none} #wrap{position:relative; width:1200px; height:100%; margin:0 auto; border:1px solid #ccc; overflow:hidden;} header{width:300px; height:100%; background:#ccc} .btn{ font-size:1.2rem; color:#333; ..

2022.01.11

jQuery 셀렉터, 요소 복사 및 잘라내기

아이템 순서대로 찾기 jQuery 셀렉터에 의해 리턴되는 각각의 아이템에는 인덱스 번호가 할당되며, 이 번호는 객체집합을 필터링할 때 사용할 수 있다. 인덱스 번호를 이용하여 요소 찾기 메소드, 셀렉터 설명 .eq() 인덱스 번호에 해당하는 요소를 리턴한다. :lt() 지정된 숫자보다 인덱스 번호가 작은 요소들을 리턴한다. :gt() 지정된 숫자보다 인덱스 번호가 큰 요소드를 리턴한다. 요소를 잘라내거나 복사하기 jQuery 객체집합을 얻게되면 이 페이지의 메소드들을 이용하여 해당 요소들을 제거하거나 복사할 수 있다. 잘라내기 메소드 설명 .remove() DOM 트리에서 조건에 일치하는 요소들을 제거한다. (하위요소 및 텍스트 노드들도 모두 제거) .detach() .remove() 메서드와 동일하지만..

2022.01.11

영역의 크기 메소드

영역의 크기 페이지 내의 모든 사각형 영역의 너비와 높이를 알아내거나 수정할 때 사용한다. 영역의 크기를 가져오거나 설정하는 메소드 메소드 설명 .height() 영역의 높이를 리턴한다. (바깥 여백, 테두리, 안쪽 여백 X) .width() 영역의 너비를 리턴한다. (바깥 여백, 테두리, 안쪽 여백 X) 메소드 설명 .innerHeight() 영역의 높이에 안쪽 여백을 더한 값을 리턴한다. .innerWidth() 영역의 너비에 안쪽 여백을 더한 값을 리턴한다. .outerHeight() 영역의 높이에 안쪽 여백과 테두리 두께를 더한 값을 리턴한다. .outerWidth() 영역의 너비에 안쪽 여백과 테두리 뚜께를 더한 값을 리턴한다. .outerHeight(true) 영역의 높이에 안쪽 여백과 테두리..

2022.01.11