목록html5 & css (3)
미안한남자의 일상
사이트를 돌아다니다 보면 이미지가 고정되어 있고 마우스를 스크롤 하면 이미지 위로 여백이나 메뉴등이 덮어지는 사이트를 볼 수 있는데 css를 이용하여 해당 스크롤 이미지를 구현해 보겠습니다.방법은 아주 간단합니다. 백그라운드로 사용할 이미지 하나만 있으면 됩니다.먼저 다음과 같이 html기본 구조를 만들어 주고 css를 이용하여 페이지 전체의 여백을 없애줍니다. 그리고 바디 태그에 div태그를 만들고 클래스값을 주고 css를 이용하여 클래스값에 이미지 크기와 이미지 경로를 설정, 배경 이미지를 고정처리 하고 마진값에 많은 값을 줘서 스크롤이 발생되도록 설정한 후 파일을 열면 jQuery 위와 같이 스크롤 이미지가 적용됩니다.해당 페이지에서 고정된 이미지 위에 플립을 활용하면 움직이는 이미지박스를 만들 수..
제이쿼리에 js파일을 이용하여 간단한 회원가입 페이지를 구현해 보려고 합니다. 먼저 오늘은 html5와 CSS를 이용하여 기본 골격을 구성해 보도록 하겠습니다.회원가입에 들어갈 양식은 form태그 안에 위치하게 구성하고 적당한 클래스값을 줍니다. 보통 회원가입 페이지에 들어가는 양식에 비슷하게 하기 위해 "아이디" "비밀번호" "비밀번호확인" "이름" "이메일" "연락처"로 만들겠습니다. 각 div태그를 만들고 안에 라벨을 이용하여 입력창을 만들어 줍니다. 그럼 어떻게 만들어 졌는지 확인해 보겠습니다.이제 기본 틀이 만들어 졌으니 안에 내용물 좀 넣어 보겠습니다.input으로 각 양식의 입력창에 맞는 값(비밀번호의 경우 input에 "password"값을 줘야 문자 입력시 ***으로 표시됩니다.)을 주고..
오늘은 간단한 방법으로 스크롤메뉴를 만들어 보려고 합니다. jquery plugin 웹페이지를 보다보면 특정위치에 메뉴가 고정되있고 마우스를 내리면 따라 내려가는 녀석을 본적이 있으실 텐데요자바스크립트나 제이쿼리를 사용하지 않고, css만 이용하여 간단하게 구현해 보려고 합니다. 먼저 스크롤 메뉴로 사용할 이미지를 준비하고,(저는 저작권 무료 아이콘 사이트에서 가져온 이미지로 만들어 보겠습니다.) html기본 구조를 구성합니다. body태그안에 아래와 같이 ul/li태그를 구성하고 아이디와 클래스 값을 줍니다.img src=안에는 메뉴로 사용할 이미지가 있는 폴더의 주소나 사이트 주소를 넣으면 됩니다. 위와 같이 적용하고 html파일을 열어보면위와 같이 구성됩니다. 그럼 이제 css를 이용하여 꾸며보겠습..