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 다 가져와야 한다.

  <script src="js/jquery-3.3.1.js"></script>
  <script src="js/fullclip.js"></script>

 

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

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

 

<script>는 이렇게 사용했다.

$(".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;
}

 

 

<form> 태그

사용자의 입력을 받는 태그

<label>과 <input>는 붙어다닌다네

 

label의 for

그리고

input의 id, name 같은 값을 주자

<label for"yohoho"></label>
<input type="text" id="yohoho" name="yohoho">

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

 

 

<input> 종류

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

 

코드 예시

<label for="apple">
	<input type="checkbox" id="apple" name="apple">사과
</label>
<label for="banana">
	<input type="checkbox" id="banana" name="banana">바나나
</label>

<label for="male">
	<input type="radio" id="male" name="gender">남자
</label>
<label for="female">
	<input type="radio" id="female" name="gender">여자
</label>

 

[미션] 받았다

간단 회원가입 양식

<form>
  <label for="userId"><strong>아이디</strong></label><br>
  <input type="text" id="userId" name="userId"><br>

  <label for="pw"><strong>비밀번호</strong></label><br>
  <input type="password" id="pw" name="pw"><br>

  <label for="pwre"><strong>비밀번호 재확인</strong></label><br>
  <input type="password" id="pwre" name="pwre"><br>

  <label for="userName"><strong>이름</strong></label><br>
  <input type="text" id="userName" name="userName"><br>

  <label for="phone"><strong>휴대전화</strong></label><br>
  <input type="number" id="phone" name="phone"><br>
</form>

 

 

Validation

텍스트 쳌

이메일 쳌

등등

잘 입력되었는지 확인

 

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

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

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

 

예시 코드

<script src="js/jquery.validate.js"></script>

<script>
  $("#question_form").validate();

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

 

 

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

 

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

페이지는

• 메인 페이지
  • 헤더
  • 네비게이션(햄버거 메뉴)
• 상세 페이지
  • 웹폰트 적용
  • 상단 네비게이션
  • 이미지 슬라이드
  • 본문 영역
  • CSS로 Parallax
• Q&A 페이지
  • form

로 구성하자

 

 

mobile by Rodion Kutsaev #unsplash