HTML, CSS, JS 활용 - 7 ~ 10강

7강

smooth scrollbar 사용법 - CODEPEN

[HTML]

<!-- smooth-scrollbar -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.8.4/smooth-scrollbar.js"></script>

<section class="sec sec_1">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae voluptas ipsum sapiente voluptates ullam eligendi nulla, harum dolore, maxime aperiam iste sit unde fugit ipsam molestiae? Incidunt itaque ea ut.
.

.

.
    Quos dignissimos adipisci earum modi eaque! Dolore obcaecati illum ad! Illum, vero? Tempora accusamus natus nulla pariatur obcaecati voluptatem, distinctio aperiam autem eveniet cum doloribus ducimus enim nihil, earum eius!
</section>

 

[CSS]

body {
    height: 100vh;
}

body .sec {
    width: 1920px;
}

html > body .scrollbar-thumb {
    background-color: rgba(89, 97, 179, .5);
}

 

[JS]

Scrollbar.init(document.querySelector('body'));

동영상

2603, HTML, CSS, JS 활용, smooth scrollbar 사용법

 

8강 - 이메일 입력상자의 상태별 메세지 - CODEPEN

[HTML]

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="form-1" style="display: flex;">
  <span>이메일 : </span>
  <div>
    <input type="email" placeholder="이메일을 입력해주세요">
    <div class="need_input">이메일을 입력해주세요.</div>
    <div class="invalid">형식이 올바르지 않습니다.</div>
  </div>
</div>

 

[CSS]

.form-1 input[type="email"] ~ div {
  display: none;
}

.form-1 input[type="email"].focused:placeholder-shown ~ .need_input {
  display: block;
}

.form-1 input[type="email"].focused:invalid ~ .invalid {
  display: block;
}

.need_input, .invalid {
  color: red;
}

 

[JS]

console.clear();

function Form1__init() {
  $('.form-1 input[type="email"]').focus(function(){
    $(this).addClass('focused');
  })
}

 

동영상

2603, HTML, CSS, JS 활용, 이메일 입력상자의 상태별 메세지

9강- 패스워드 숨김, 보임 모드 변경 - CODEPEN

[HTML]

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="box_1">
    <input type="password">
    <span class="mode">
        <span>P</span>
        <span>T</span>
    </span>
</div>

 

[CSS]

.box_1 {
    display: inline-block;
    border: 10px solid red;
    position: relative;
}

.box_1 > .mode {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    border: 5px solid blue;
font-weight: bold;
}

.box_1 > .mode > span:last-child {
    display: none;
}

.box_1.text > .mode > span:last-child {
    display: block;
}

.box_1.text > .mode > span:first-child {
    display: none;
}

 

[JS]

$('.box_1 > .mode').click(function() {
    let $box1 = $(this).parent();
    let $input = $(this).prev();
    
    if ( $box1.hasClass('text') ) {
        $box1.removeClass('text');
        // $input.attr('type', 'password'); // 이것도 가능하긴 함
$input.prop('type', 'password');
    } else {
        $box1.addClass('text');
        $input.prop('type', 'text');
    }
});

동영상

2603, HTML, CSS, JS 활용, 패스워드 숨김, 보임 모드 변경

10강 -  스와이퍼 사용법, 응용법

스와이퍼 사용법, 응용법

• swiperjs
• swiperjs demos
• slick
  • slick demo

CODEPEN EXAM 1

CODEPEN EXAM 2

동영상

2603, HTML, CSS, JS 활용, 스와이퍼 사용법, 응용법