HTML, CSS, javascript/실습 (14) 썸네일형 리스트형 반응형 웹페이지 실습 - 모바일 우선 - min-width를 이용하여 모바일 우선 웹페이지를 만들어 보았다. - Animal 영역에서 그림을 선택하면 영상이나 이미지가 나올 수 있게 fancybox jquery를 사용했다. - 이미지는 픽사베이의 무료이미지이며 fancybox에 있는 영상은 유튜브 영상이다. nicescroll 실습 nicescroll Jquery 를 이용해 스크롤 시 오른쪽으로 화면이 이동하는 횡 웹페이지를 구현했다. - 5페이지로 간단하게 구현했고, 좌측의 메뉴를 누르면 각 페이지로 이동한다. - 3번째 화면에서는 bxslider를 이용해 이미지가 슬라이드 되며, 4번째 화면의 우측 하단의 보트 이미지에 애니메이션을 넣어 이동하게 만들었다. - 이미지 파일들은 픽사베이의 무료이미지이며 4번째 페이지의 유튜브는 출처를 표시했다. 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을 초기화하고 위의 그림처럼 배치되게 했다. Tab Menu 실습 - 탭버튼 01은 체크된 상태로 시작하기 위해 첫번째 input에 checked를 표시했다. - checked된 것을 확인하기 위해 input[type="radio"]:checked와 연결된 label을 쉽게 찾기 위해 바로 뒤에 작성하고 css에서 + 동위선택자로 지정하고 색을 변경했다. - radio 타입은 안보이게 하고 글자를 누르면 선택이 되게 하려고 label의 for과 input의 id를 동일하게 했다. - input이 선택되면conbox가 보이고 안보이고를 설정하면 위의 그림처럼 된다. Modal 실습 - input 태그와 label 태그를 이용하면 간단하게 modal창을 만들 수 있다. - view를 누르면 창이 생성 되고, 화면 밖의 검정색 배경을 선택하거나, x버튼을 클릭하면 창이 닫히게 된다. 포트폴리오(싱글페이지) 제작 실습 - 코드 입력 - 웹 페이지 화면 - section 태그로 내용별로 구분하여 만들고 유튜브는 iframe 태그를 이용하여 붙여 넣었고, shadow 속성, float 속성, position 속성 등을 이용하여 배치를 했다. :hover 실습 - 3가지 상품이 있을 때, 이미지에 마우스를 hover하면 안보이던 글자가 나타나게 해야한다. - opacity 값을 0을 준다음, hover하게 되면 opacity 값을 1로 바뀌게 되면 아래 그림처럼 안보이다가 나타나게 된다. - transition을 이용하여 나타는 시간을 빠르게하거나 느리게 할 수 있다. 이전 1 2 다음 목록 더보기
