91일차 - 웹 기능사 실기 복습 (1)

웹디자인 기능사 실기 시험 예제 소스 https://webstudybasic.pe.kr/landing/index.html

• 상대 경로로 쓰기 ./
• HTML 태그에 style 삽입 말고 필히 외부 연동
• 모든 파일명은 영어로!
• 이미지는 jpg로 제작하기 (사이즈 똑같이)

복습

• 헤더
  https://velog.io/@la_sta/5%EC%9D%BC%EC%B0%A8-%ED%97%A4%EB%8D%94-%EC%84%B8%ED%8C%85-%EB%B3%B5%EC%8A%B5%EB%A7%88%EB%AC%B4%EB%A6%AC
• 스와이퍼 애니메이션
  https://velog.io/@la_sta/28%EC%9D%BC%EC%B0%A8-js-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EC%9B%B9%EA%B8%B0%EB%8A%A5%EC%8B%9C%ED%97%98%EC%9A%A9
  fade 처리
  https://velog.io/@la_sta/29%EC%9D%BC%EC%B0%A8-js-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-2
• 탭
  https://velog.io/@la_sta/29%EC%9D%BC%EC%B0%A8-js-%ED%83%AD-%EC%9B%B9%EA%B8%B0%EB%8A%A5%EC%82%AC%EC%8B%9C%ED%97%98%EC%9A%A9

1. 에밋 짜기

<A형> https://webstudybasic.pe.kr/landing/source/A-2/index.html
.container>#hd+#swiper+#three+#ft

<!-- 컨테이너 .container{width:1200px; margin:0 auto} -->
.container

  <!-- 헤더 -->
  header#hd>h1>a>img^^ul#gnb>li*4>a{대분류}+ul>li*5>a{소분류}
  <!-- 스와이퍼 -->
  #swiper>.swiper-wapper>.swiper-slide*3>img
  <!-- 3단구조 -->
  #three>#notice>h4+ul>li*4^^#gallery>h4+ul>li*3^^#imgBanner>a>img
  <!-- 푸터 -->
  footer#ft>h2>a>img^^span+select>option*3

---

<A형> https://webstudybasic.pe.kr/landing/source/A-3/index.html

<!-- 컨테이너 -->
.container

  <!-- 헤더 -->
  header#hd>h1>a>img^^ul#gnb>li*4>a{대분류}+ul>li*5>a{소분류}
  <!-- 스와이퍼 -->
  #swiper>.swiper-wapper>.swiper-slide*3>img
  <!-- 3단구조 -->
  div#three>.tabs>#notice>h4+ul>li*4^^#gallery>h4+ul>li*3
      		.banner0>a>img
      		.banner1>a>img
  <!-- 푸터 -->
  footer#ft>.logo>h2>img>a^^text>ul>li*3>a^^p

---

<C형> https://webstudybasic.pe.kr/landing/source/C-1/index.html

<!-- 컨테이너 -->
.container

  <!-- 헤더 -->
  header#hd.d-flex>h1>a>img^^ul#gnb>li*4>a{대분류}+ul>li*5>a{소분류}
  <!-- 컨텐트 -->
  .content
  	  <!-- 스와이퍼 -->
      #swiper>.swiper-wapper>.swiper-slide*3>img
  	  <!-- 3단구조 -->
      #three>.tabs>#notice>h4+ul>li*4^^#gallery>h4+ul>li*3
             .banner0>a>img
             .banner1>a>img
  	  <!-- 푸터 -->
      footer#ft>h2>a>img^^div>ul>li*3^^p{copyright All rights reserved 해운대 빛축제}

---

2. 실습

2-1. 기본 세팅

+) 시험장에서 제공하는 제이쿼리 저장해두기 (인터넷 NO)

2-2. 공통클래스 삽입

*{ margin: 0; padding: 0; }
a{ color: black; text-decoration: none; }
ul, li{ list-style: none; }
a:hover{color: red;}

.red{background-color: red;} <!-- 여기까지구나? 확인 차원 -->

.container{width:1200px; margin:0 auto} <!-- A형 -->
<!-- .container{width:1000px;} // C형 -->
.w30{width:33.333%}

.d-block{display:block}
.d-flex{display:flex}
.justify-content-between{justify-content: space-between;}
.align-items-center{align-items:center}

.abs{position:absolute}
.rel{position:relative}
.zup{z-index: 100000;}
.ofh{overflow: hidden;}

.h100{height:100px}
.h200{height:200px}
.h350{height:350px}

2-3. 에밋 짜기

2-3-1) 헤더

href alt 비워두지 말것

<a href="#none"><img src="" alt="열심히"></a>

2-3-2) 스와이퍼

• 에밋

#swiper.ofh>.swiper-wapper.100000.d-flex>.swiper-slide.w1200.h350*3>img

• CSS

.w100000{width: 100000px;}
.w1200{ width: 1200px;}

• 제이쿼리 (setInterval로 애니메이션 처리)

<script>

$(document).ready(function(){
    // $('body').css('background', 'red');
    
    setInterval(function(){
        $('.swiper-wapper').animate({"marginLeft":-1200}, 400, function(){
            $(this).find('.swiper-slide').eq(0).appendTo( $(this) );
            $(this).css({"marginLeft":0})
        })
    }, 3000)
})
    
</script>

+) 28일차 - js 애니메이션 (웹기능시험용)
https://velog.io/@la_sta/28%EC%9D%BC%EC%B0%A8-js-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EC%9B%B9%EA%B8%B0%EB%8A%A5%EC%8B%9C%ED%97%98%EC%9A%A9