본문 바로가기

전체 글

 (97)
반응형 웹페이지 실습 - 모바일 우선 - min-width를 이용하여 모바일 우선 웹페이지를 만들어 보았다. - Animal 영역에서 그림을 선택하면 영상이나 이미지가 나올 수 있게 fancybox jquery를 사용했다. - 이미지는 픽사베이의 무료이미지이며 fancybox에 있는 영상은 유튜브 영상이다.
nicescroll 실습 nicescroll Jquery 를 이용해 스크롤 시 오른쪽으로 화면이 이동하는 횡 웹페이지를 구현했다. - 5페이지로 간단하게 구현했고, 좌측의 메뉴를 누르면 각 페이지로 이동한다. - 3번째 화면에서는 bxslider를 이용해 이미지가 슬라이드 되며, 4번째 화면의 우측 하단의 보트 이미지에 애니메이션을 넣어 이동하게 만들었다. - 이미지 파일들은 픽사베이의 무료이미지이며 4번째 페이지의 유튜브는 출처를 표시했다.
ScrollTop - 페이지의 위치를 인식하여 어떠한 동작을 하게 하기 위해 사용한다. (1) 예시 - sctop라는 변수가 500이 넘으면 ani클래스에 on이라는 클래스를 추가하고 아니면 제거한다는 스크립트를 작성했다. - 위 코드를 입력해서 스크롤을 내리다가 어느 지점이 되면 ani라는 클래스가 5초동안 30배 확대된다. (2) 예제 - (1)의 조건과 동일한 스크립트를 작성했고, 위 코드를 실행하면 일정 위치가 되면 이미지들이 opacity가 0에서 1로 각각에 걸려있는 transition에 맞게 바뀐다. (3) AOS(Animate On Scroll Library) 사용 - 더욱 편리하게 사용하는 방법이다. (출처 : https://github.com/michalsnik/aos / https://michalsni..
side-menu - SideMenu 실습은 checkbox로 하는 방법과 script를 사용해서 하는 2가지 방법을 했다. (1) - checkbox가 체크 되면 사이드 메뉴가 나오고 체크가 해제되면 사이드 메뉴가 사라지는 방식이다. 이때, 메뉴 아이콘을 span 태그 3개로 만들어서 checkbox가 체크 되면 span 태그가 x 처럼 보이게 만들고 체크가 해제되면 다시 메뉴로 보이게 하기 위해서 transform 속성과 opacity 속성을 이용했다. (2) - script를 이용한 방식에서 메뉴 아이콘은 font-awesome에서 가져와 사용했다. https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set jus..
gnb 실습 웹페이지에서 메뉴 부분에 hover 하게되면 아래쪽에 소메뉴들이 나오게 하는 방법에 대한 실습이다. (1) - 소메뉴의 ul 부분이 display:none이었다가 대메뉴의 li 부분에 hover를 하게되면 display:block으로 해서 보이게 했고, 소메뉴는 position:absolute이기 때문에 아래쪽 내용부분의 크기에 간섭하지 않고 위에 표시되게 된다. (2) - nav 태그의 height가 40px이었다가 hover하게 되면 200px로 늘어나고, overflow:hidden이기 때문에 40px을 넘는 내용에 대해서는 보이지 않다가 나타나는 방법이다. - nav 태그에 position:absolute 속성을 주어 위로 올리게 되면 contents 영역을 침범하지 않고 메뉴가 열리고 닫히게 된다.
반응형 실습 - 웹사이트의 크기가 줄어들 때 (예를 들어 PC > 모바일 환경) 안에 배치 된 사진의 배치가 바뀌는 웹사이트를 만들었다. - 너비가 좁아질 때 사진도 줄어들게 하기 위해 inner 클래스의 너비를 max값으로 잡았다. - 너비가 900px 이하가 되면 왼쪽 하단에 배치되어 있던 사진의 position값을 초기화 하고 float 시켜 오른쪽으로 배치되게 하고 다른 사진은 left: auto를 주고 right:0을 주어 오른쪽에 배치되게 했다. - 너비가 700px 이하가 되면 남은 사진도 position을 초기화하고 위의 그림처럼 배치되게 했다.
반응형 웹페이지를 스크린 상에서 반응된 결과로 보여주기 위해서 사용하며, pc사이즈뿐만 아니라 모바일 사이즈에서도 기기의 해상도에 반응하게 처리하기 위한 선결 조건은 '뷰포트' 추가이다. 뷰포트추가 - 모바일 해상도에 맞게 HTML 문서를 조절해 주는 속성들 width=device-width : 문서 너비를 현재 기기의 너비에 맞춘다. initial-scale=1 : 문서를 불러와 화면에 표시할 때 기본 배율을 1로 지정한다. 기본 개념 나(요소의 너비) ÷ 부모(콘텐츠를 감싸는 요소의 너비) × 100 = 가변 값 * 디자인된 시안에서 지정한 고정 값을 가변 값으로 변환하기 * - 요소의 너비를 %로 지정할 때 소수점 이하 숫자가 많다면 소수점 이하 3~4자리까지 표시하는 것이 좋다. 예) 요소 | 고정 그리..
Tab Menu 실습 - 탭버튼 01은 체크된 상태로 시작하기 위해 첫번째 input에 checked를 표시했다. - checked된 것을 확인하기 위해 input[type="radio"]:checked와 연결된 label을 쉽게 찾기 위해 바로 뒤에 작성하고 css에서 + 동위선택자로 지정하고 색을 변경했다. - radio 타입은 안보이게 하고 글자를 누르면 선택이 되게 하려고 label의 for과 input의 id를 동일하게 했다. - input이 선택되면conbox가 보이고 안보이고를 설정하면 위의 그림처럼 된다.

티스토리툴바