HTML, CSS, JS 활용 - 1 ~6강

관련 링크

cdnjs

구글폰트

눈누폰트

webgradients

이미지가 필요할 때 - Lorem picsum

이미지 다운로드 - Image Downloader

이미지 호스팅 - imgur

img가 안 뜨면 url뒤에 .png 붙이기

애니메이션 속도 조절 - cubic-bezier

다각형 - bennettfeely

라이브러리

부트스트랩 - 공식문서

데이지UI 컴포넌트 - 공식문서

테일윈드 - 공식문서

테일윈드 - 치트시트

테일윈드 - 치트시트

테일윈드, 데이지UI - 코드펜

폰트어썸 - 아이콘

폰트어썸 - 아이콘, 모든 카테고리

폰트어썸 - 아이콘, 모든 무료아이콘

폰트어썸 - 코드펜

swiperjs

AOS

gsap

gsap - codepen

animate css

1강

문제

MDN CSS - @keyframes

문제 - 애니메이션을 통해 엘리먼트가 움직이게 해주세요 1

정답 예시

정답

[HTML]

<div></div>

[CSS]

div{
  width:100px;
  height:100px;
  background-color:red;
  animation-name: around;
  animation-duration: 1s;
  animation-delay: 3s;
  animation-play-state: running;
  animation-iteration-count: infinite;

}

@keyframes around {
  0% {
    margin-left:0;
  }

  50% {
    margin-left:100px;
  }

  100% {
    margin-left:200px;
  }
}

[JS]

 

동영상

2603, HTML, CSS, JS 활용, keyframes, 애니메이션을 통해 엘리먼트가 움직이게 해주세요 1

2강

animation-timing-function 종류

• ease(가장 많이 쓰이는 기본 자연스러운 움직임)
  • 시작 : 느림
  • 중간 : 빠름
  • 끝 : 느림
  • ex) 버튼 hover, 카드 등장
• ease-in(점점 가속되는 느낌)
  • 시작 : 매우 느림
  • 끝 : 빠름
  • ex) 물체가 출발하는 느낌, 아래에서 위로 튀어 오르는 요소
• ease-out(멈추는 느낌 강조)
  • 시작 : 빠름
  • 끝 : 느림
  • ex) 모달, 팝업 닫힐 때, 요소가 제자리 안에 안착하는 모션
• ease-in-out(가장 부드러운 곡선)
  • 시작 : 느림
  • 중간 : 빠름
  • 끝 : 느림
  • ex) 고급스러운 UI 모션, 페이지 전환 효과
• linear(기계적인 느낌)
  • 처음부터끝까지 같은 속도
  • ex) 로딩 스피너, 무한 회전 애니메이션
• cubic-bezier(고급)
  • cubic-bezier : https://cubic-bezier.com/
  • 사용자 임의로 정할 수 있음
  • ex) 디자인 시스템이나 포트폴리오에서 자주 사용

문제

MDN CSS - animation

문제 - 애니메이션을 통해 엘리먼트가 움직이게 해주세요 2

정답 예시

정답

[HTML]

<div>
  
</div>

[CSS]

body {
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

div {
  width:100px;
  height:100px;
  background-color:red;
  animation-name: floating;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  position:relative;
}

@keyframes floating {
  0% {
    top:0px;
  }
  
  50% {
    top:30px;
  }
  
  100% {
    top:0px;
  }
}

[JS]

 

동영상

2603, HTML, CSS, JS 활용, keyframes, 애니메이션을 통해 엘리먼트가 움직이게 해주세요 2

3강

currentcolor - CODEPEN

[HTML]

<section>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tempore illo ullam beatae animi. Aut nisi necessitatibus laboriosam perspiciatis pariatur consequatur enim excepturi distinctio, iure illum beatae et sint incidunt.
</section>

<div>
    안녕
</div>

[CSS]

body {
    color: green;
}

div {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 10px solid currentcolor;
}

[JS]

동영상

2603, HTML, CSS, JS 활용, currentcolor

 

4강

커스텀 체크박스 - CODEPEN

[HTML]

<div class="input_type">
    <label>
        문자 입력 :
        <input type="text">
    </label>
    <br>
    <label>
        숫자 입력 :
        <input type="number">
    </label>
    <br>
    <label>
        email 입력 :
        <input type="email">
    </label>
    <br>
    <!-- 폼 태그 -->
    <form action="" onSubmit="return false;">
        <label>
            email 입력 :
            <input type="email">
        </label>
        <!-- 아래 두 태그는 똑같음 -->
        <input type="submit" value="전송">
        <button type="submit">전송</button>
    </form>
</div>

<div class="custom_checkbox_1">
    <input type="checkbox">
    <span></span>
</div>

[CSS]

.custom_checkbox_1 {
    display: inline-block;
    border: 3px solid black;
    border-radius: 5px;
    width: 20px;
    height: 20px;
    position: relative;
}

.custom_checkbox_1 > input[type="checkbox"] {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    border-radius: 0;
    opacity: 0;
}

.custom_checkbox_1 > input[type="checkbox"] + span::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-sizing: border-box;
}

.custom_checkbox_1 > input[type="checkbox"]:checked + span::after {
    content: "v";
}

.custom_checkbox_1 > input[type="checkbox"]:focus + span::after {
    border: 1px dotted red;
}

[JS]

 

동영상

2603, HTML, CSS, JS 활용, input, 커스텀 체크박스

5강

prop vs attr 비교

• attr (attribute) : 정보
  • HTML에 적힌 초기값
    • $('input').attr('checked'); // "checked"
  • id, class, href, src
    • $('a').attr('href', 'google.com');
• prop (property) : 상태
  • 현재 DOM의 실제 상태
    • $('input').prop('checked'); // true or false
  • checked, disabled, selected
    • $('input').prop('disabled', true);

체크박스 전체선택 및 해제

CODEPEN - 1부

CODEPEN - 2부

CODEPEN - 3부

CODEPEN - 4부

 

[HTML]

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

<div>
    <input type="checkbox" class="form-1__checkbox-all">
</div>
<hr>
<section>
    <!-- div*10>input[type=checkbox].form-1__checkbox-item -->
    <div><input type="checkbox" class="form-1__checkbox-item"></div>
    <div><input type="checkbox" class="form-1__checkbox-item"></div>
    <div><input type="checkbox" class="form-1__checkbox-item"></div>
    <div><input type="checkbox" class="form-1__checkbox-item"></div>
    <div><input type="checkbox" class="form-1__checkbox-item"></div>
    <div><input type="checkbox" class="form-1__checkbox-item"></div>
    <div><input type="checkbox" class="form-1__checkbox-item"></div>
    <div><input type="checkbox" class="form-1__checkbox-item"></div>
    <div><input type="checkbox" class="form-1__checkbox-item"></div>
    <div><input type="checkbox" class="form-1__checkbox-item"></div>
</section>

[CSS]

 

[JS]

console.clear();

$('.form-1__checkbox-all').change(function() {
    if ( this.checked ) {
        $('.form-1__checkbox-item:not(:checked)').prop('checked', true);
    } else {
        $('.form-1__checkbox-item').prop('checked', false);
    }
});


$('.form-1__checkbox-item').change(function() {
    let allChecked = $('.form-1__checkbox-item:not(:checked)').length == 0;
    // console.log(allChecked);
    $('.form-1__checkbox-all').prop('checked', allChecked);
});

동영상

2603, HTML, CSS, JS 활용, 체크박스, 전체선택 및 해제

6강

Masonry 사용법 - CODEPEN

 

[HTML]

<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- imagesloaded -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
<!-- lodash -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>

<!-- lodash -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>

<!-- tailwind -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">


<div class="section-1-loading"></div>

<section class="section-1">
    <div class="container mx-auto masonry-grid">
        <div class="grid-item">
            <a href="#">
                <img src="https://picsum.photos/id/237/200/300" alt="">
            </a>
            <a href="#">
                제목1
            </a>
        </div>
        <div class="grid-item">
            <a href="#">
                <img src="https://picsum.photos/id/238/400/300" alt="">
            </a>
            <a href="#">
                제목2
            </a>
        </div>
        <div class="grid-item">
            <a href="#">
                <img src="https://picsum.photos/id/227/500/300" alt="">
            </a>
            <a href="#">
                제목3
            </a>
        </div>
        <div class="grid-item">
            <a href="#">
                <img src="https://picsum.photos/id/240/500/800" alt="">
            </a>
            <a href="#">
                제목4
            </a>
        </div>
        <div class="grid-item">
            <a href="#">
                <img src="https://picsum.photos/id/251/400/700" alt="">
            </a>
            <a href="#">
                제목5
            </a>
        </div>
    </div>
</section>

[CSS]

/* 커스텀 */
.section-1-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-1-loading::after {
  content: "로딩중...";
}

.section-1 .grid-item {
  padding:10px;
}

.section-1 .grid-item > a {
  display:block;
}

.section-1 .grid-item > a > img {
  display:block;
  width:100%;
}

@media ( min-width:1600px ) {
  .section-1 .grid-item {
    width: calc(100% / 5);
  }
}

@media ( max-width:1599px ) and ( min-width:1200px ) {
  .section-1 .grid-item {
      width: calc(100% / 4);
  }
}

@media ( max-width:1199px ) and ( min-width:800px ) {
  .section-1 .grid-item {
    width: calc(100% / 3);
  }
}

@media ( max-width:799px ) and ( min-width:600px ) {
  .section-1 .grid-item {
    width: calc(100% / 2);
  }
}

@media ( max-width:599px ) {
  .section-1 .grid-item {
    width: calc(100% / 1);
  }
}

[JS]

console.clear();

var $window = $(window);
var $html = $('html');

var PageLayout__ani1Delay = 500;

function PageLayout__init() {
  $('.section-1').imagesLoaded(function() {
    setTimeout(function() {
      $('.section-1-loading').remove();
    }, PageLayout__ani1Delay + 300);

    $('.section-1 .masonry-grid').masonry({
      itemSelector: '.grid-item'
    });
    
    $window.resize(_.debounce(function() {
        console.log('hi');
      $('.section-1 .masonry-grid').masonry('layout');
    }, PageLayout__ani1Delay + 200));
  });
}

$(function() {  
  PageLayout__init();
});

동영상

2603, HTML, CSS, JS 활용, Masonry 사용법