4 :: y축 중앙 정렬, jQuery 플러그인, form, 이미지 슬라이드 ...

4 :: y축 중앙 정렬, jQuery 플러그인, form, 이미지 슬라이드 ...

엘리스 SW 엔지니어 트랙에서 배운것

김인권 선생님

모바일 웹 페이지

오늘 중요한 내용은 position이라고 하신다.

2차원과 3차원 성격을 가진 속성값들이 있다.

2차원: statics

2 & 3차원: relative

3차원: fixed, absolute

relative 포함 3차원 속성을 가진 녀석들에,

z-index로 3차원 세계에서 우선순위를 정할 수 있다고 한다.

absolute, relative 등 position 속성을 가지고 놀아보는 시간을 가졌다.

background-size

배경 이미지 크기를 정하는 속성

contain

cover

를 많이 사용한다.

background-attachment

배경 이미지를 position의 fixed처럼 사용한다

y축 중앙 정렬

선생님이 보통 사용하는 방법

여기서 translateY의 역할은,

본인 크기의 반(50%) 만큼 올라간다(- 부호)

{ top: 50%; transform: translateY(-50%); }

top을 사용해서, 3차원 position 속성값에 가능하다

Full Clip 플러그인

오 플러그인 사용해보네~ 좋다

배경이미지 자동 롤링해주는 플러그인

jQuery로 사용해서

jQuery와 fullclip 다 가져와야 한다.

전체 화면으로 보여주기 위해 다음 스타일을 추가했다.

.fullBackground { background-position: center center; background-attachment: fixed; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

$(".fullBackground").fullClip({ images: ['img/1.png', 'img/2.png', 'img/3.png'], transitionTime: 1000, wait: 3000 })

box-shadow

상자 그림자(Divi 용어) 많이 썼지~

워드프레스에서는 그냥 마우스 클릭, 수치만 입력했지만

{ box-shadow: 10px 10px 10px 10xp red; }

*cssmatic box-shadow 링크 => https://www.cssmatic.com/box-shadow

곁다리 border-radius

왼쪽 네비게이션

jQuery 사용하네

선택학습 jQuery 들어야지

와~~~~ 왼쪽 네비게이션 만들고

좌표를 -200px 이렇게 줘서 화면 왼쪽 저멀리에 나두는 거구나

필요할 때 transition으로 데려오면 되겠네

jQuery 사용 예시

(function() { $('.left').click(function() { $('#side_nav').animate({ left: "0"}); }) $('.close_btn').click(function() { $('#side_nav').animate({ left: "-200px"}); }) })();

웹폰트

이렇게 사용했다.

@import url(//spoqa.github.io//spoqa-han-sans/css/SpoqaHanSans-kr.css);

엘리스에서 사용하는 폰트라고 한다.

구글 폰트 사이트 링크 => https://fonts.google.com/

이미지 슬라이드

'Owl Carousel 2' 라는 외부 라이브러리를 사용

PC, 모바일에서 전부 사용 가능하다

Owl Carousel 2 링크 => https://owlcarousel2.github.io/OwlCarousel2/

Owl Carousel 깃헙 들어가봤더니 죽었다네?

그리고 tiny slider로 바꿨다고 한다.

tiny slider 깃헢 => https://github.com/ganlanyuan/tiny-slider

패럴랙스 Parallax

스크롤할 때 뭐가 바뀌는

퀴즈 받았다

패럴랙스 효과를 만들기 위한

외부 라이브러리 찾아보자

이런게 있네 링크 => https://pixelcog.github.io/parallax.js/

CSS만으로 다음 코드처럼 실습했다

{ width: 100%; background: url(../img/main_details/parallax.png) no-repeat; background-size: cover; background-attachment: fixed; }

태그

사용자의 입력을 받는 태그

과 는 붙어다닌다네

label의 for

그리고

input의 id, name 같은 값을 주자

*name은 서버에 데이터 보낼 때 사용한다고 하신다

종류

checkbox name에 들어가는 속성값이 다르다

radio name에 들어가는 속성값이 같다

코드 예시

사과 바나나 남자 여자

[미션] 받았다

간단 회원가입 양식

아이디 비밀번호 비밀번호 재확인 이름 휴대전화

Validation

텍스트 쳌

이메일 쳌

등등

잘 입력되었는지 확인

JavaScript로 새로 만들기 복잡해서,

Validation은 외부 jQuery 플러그인 사용했다.

jQuery Validation 플러그인 링크 => https://jqueryvalidation.org/

예시 코드

$("#question_form").validate(); $.extend($.validator.messages, { required: "필수 항목입니다.", email: "유효하지 않은 E-Mail 주소입니다.", minlength: $.validator.format("{0}자 이상 입력하세요.") })

위에 녀석들을 이용해서 페이지 만들기를 따라했다.

간단한 페이지를 직접 만들어서 퍼블리싱 해봐야겠다.

페이지는

메인 페이지 헤더 네비게이션(햄버거 메뉴)

상세 페이지 웹폰트 적용 상단 네비게이션 이미지 슬라이드 본문 영역 CSS로 Parallax

Q&A; 페이지 form

로 구성하자

mobile by Rodion Kutsaev #unsplash

from http://forgottenknowledge.tistory.com/168 by ccl(A) rewrite - 2021-10-29 14:59:06