gsap 홈페이지 바로가기

GSAP & ScrollTrigger CDN

<!-- gsap cdn -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

<!-- gsap ScrollTrigger -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

ScrollTigger 플러그인 등록

ScrollTrigger 사용하려면 js파일에 플러그인을 등록해줘야함.

// 스크롤트리거 플러그인 불러오기
gsap.registerPlugin(ScrollTrigger);

GSAP 기본 사용법

GASP 기본 사용법에는 gsap.to(), gsap.from(), gsap.fromTo() 메소드가 있다. 순서대로 애니메이션의 끝점, 시작점, 시작과 끝점을 정해주는 메소드이다.

gsap.to()

to 메소드는 요소를 기본 상태에서 -> to(끝점)값으로 변경시킨다.

gsap.to()(`타겟요소`, { 애니메이션 속성 : 속성 값, ... });

gsap.from()

from 메소드는 요소를 from(시작점)상태에서 -> 기본상태로 변경시킨다. (to랑 반대)

gsap.from()(`타겟요소`, { 애니메이션 속성 : 속성 값, ... });

gsap.fromTo()

fromTo 메소드는 요소의 첫 시작점(from)과 끝점(to)를 지정할 수 있다.

gsap.fromTo()(`타겟요소`, { from 값(애니메이션 시작점) }, { to 값(애니메이션 끝점)});

See the Pen gsap animation by So-An (@So-An) on CodePen.

gsap.timeline()

gsap.timeline() 메소드를 통해 애니메이션을 순차적으로 실행시킬 수 있다.

const tl = gsap.timeline();
tl.to(".element", { duration: 1, x: 200 });
tl.to(".element", { duration: 1, y: 200 });
tl.to(".element", { backgroundColor: 'pink' });

이렇게 작성하면 순서대로 .element요소가 x축으로 200px 이동한 후, y축으로 200px 이동을 하고 마지막으로 색상이 pink로 바뀌는 애니메이션이 실행된다.

See the Pen gsap timeline by So-An (@So-An) on CodePen.

GSAP 기본 속성

기본적으로 css 속성값은 거의 다 먹는다고 보면된다! 속성 여러개 사용할때 , 꼭 써주고(이거때문에 오류 자주남), px , %같은 단위를 사용하지 않음

gsap.to(`element`, {
    x: 100, //x축으로 100px 이동
      xPercent : 100, // x축으로 100% 이동
      y: 100, // y축으로 100px 이동
    yPercent: 100, // y축으로 100% 이동
    rotation: 360, // 360도 회전
      opacity: 1, // 불투명도
      duration: 5, // 5초동안 애니메이션 지속
      ease: none, // 애니메이션 가속도(?)값 링크 첨부해둘테니 참고요망
},5) //5초 딜레이

ease 속성 더 알아보기

ScrollTrigger 사용법

GSAP에서 좀 더 나아가면 ScrollTrigger을 통해 스크롤에 반응해서 애니메이션을 작동시킬 수 있다.

ScrollTrigger 기본 사용법

gsap.to('.element', {
    scrollTrigger: '.element', // .element가 뷰포트에 나타났을때 애니메이션 실행 
    x: 500 // x축으로 500px 이동
});

기본적인 사용법은 gsap 사용법과 같지만, scrollTrigger 속성이 추가됐다는게 다르다. 근데 저렇게 사용하면 애니메이션의 시작점과 끝점을 정확하게 잡을순 없다. 그래서 많이 사용하는게 다음과 같은 방법이다

 gsap.to(".element", {
      scrollTrigger: {
        trigger: ".element", // 트리거 대상
        start: "top 75%", // 요소가 뷰포트의 75% 지점에 도달할 때 애니메이션 시작
        end: "top 25%",   // 요소가 뷰포트의 25% 지점에 도달할 때 애니메이션 종료
        scrub: true,      // 스크롤에 따라 애니메이션의 진행이 조절됨
        markers: true     // 시작 및 종료 지점을 표시하는 마커를 보여줌
      },
      x: 500,
      rotation: 360
    });

이번에는 위에 사용했던것과는 다르게 scrollTrigger안에 속성값이 많이 있다. 대충 설명해보자면 .element가 뷰포트의 75%에 도달했을때 애니메이션이 실행되며, .element가 뷰포트의 25%지점에 도달하면 애니메이션이 종료된다. scrub을 주어 스크롤이 되는동안 애니메이션이 서서히 진행되는 듯한 효과를 주었다.

See the Pen scrollTrigger by So-An (@So-An) on CodePen.

start, end 기준

scrollTrigger 속성중 markers: true 로 주면 저렇게 스크롤바 옆에 start, end가 써있는걸 볼 수 있다. start와 end는 애니메이션의 시작점과 끝점을 정해준다. 마커를 켜놓고 start와 end를 보면서 정해주면 더 쉽게 애니메이션의 시작과 끝을 조절할 수 있음

start: { 트리거대상기준 }, { 스크롤바(뷰포트) 기준 } 으로 작성해주면 된다

 gsap.to(".element", {
      scrollTrigger: {
        trigger: ".element", // 트리거 대상
        start: "top 75%", //트리거대상(.element)의 0%(top)부분과 스크롤바의 75%부분이 만나면 애니메이션이 실행됨
        end: "top 25%", //트리거대상(.element)의 0%(top)부분과 스크롤바의 25%부분이 만나면 애니메이션이 종료됨
      }
    });

tmi) 0% 과 top은 같은 의미이고, 100%과 bottom은 같은 의미이다. + 50%와 center도 같다.

scrub, pin 속성

scrub 속성

• scrub은 스크롤에 따라 애니메이션의 진행을 조절한다.
• true 또는 숫자 값을 사용할 수 있음(숫자가 커질수록 부드럽게 작동)
• 애니메이션의 재사용이 가능하다( 스크롤 벗어났다가 돌아와도 애니메이션이 작동함)

scrub은 위에 예시에 적용되어있으니 생략!

pin 속성

• pin은 요소를 화면에 고정시키는 속성이다( position: sticky 같은 느낌 )
• 가로스크롤 같은거 만들때 사용하면 좋다

See the Pen scrollTrigger pin by So-An (@So-An) on CodePen.

일단 이정도로 정리하고 추후에 더 필요한 내용이있으면 조금조금씩 수정해야겠당 :D

나 보려고 정리한 Swiper 사용법! 자꾸 한번씩 찾아보게 돼서 아예 정리를 해놔야겠다.

Swiper란?

슬라이더 구현을 쉽게 할 수 있는 터치 슬라이더 라이브러리이다. 슬라이더를 직접 만들어서 쓰는것보다 훨씬 편하고 빠르게 만들 수 있다. swiper 페이지 바로가기

Swiper 사용법

Swiper 설치하기

Swiper 설치 방법에는 크게 2가지가 있는데, 나는 CDN쓸거지롱 + 직접 다운받아서 추가하는 방법도 있다!

1. NPM을 통해 설치해주기

2. CDN 사용하기

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
   <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiperbundle.min.js"></script>

Swiper 기본 사용법

HTML

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- pagination 필요시 추가 -->
  <div class="swiper-pagination"></div>

  <!-- navigation buttons 필요시 추가-->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- scrollbar 필요시 추가 -->
  <div class="swiper-scrollbar"></div>
</div>

pagination 추가시

navigation buttons 추가시

scrollbar 추가시

swiper 기본 css 변경하기

css변경하고 싶으면 개발자모드를 켜서 어디에 어떻게 스타일이 적용되었는지 확인하고 수정해 주도록 하자!

script

const swiper = new Swiper('.swiper', {
        // Optional parameters
       direction: 'horizontal', // 슬라이드방향 vertical 수직, horizontal 수평 
        loop: true, //반복 여부
        loopFillGroupWithBlank: true, //슬라이드 갯수 채우기(빈칸으로 채워줌)
        slidesPerView: '1', // 한 슬라이드당 보여줄 갯수
        spaceBetween: 10, // 슬라이드 간격
          slidesPerGroup : 3, // 슬라이드 그룹으로 묶을 갯수
        autoplay: {
            delay: 2500, //시간설정
        },
        // 반응형
        breakPoints: {
          1280: {
            slidesPerView: '3',
            spaceBetween: 10,
          },
          768: {
            slidesPerView: '2', 
            spaceBetween: 10,
            },
        },      

        // If we need pagination
        pagination: {
          el: '.swiper-pagination',
        },

        // Navigation arrows
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },

        // And if we need scrollbar
        scrollbar: {
          el: '.swiper-scrollbar',
        },
    });

오늘의 사이트 / 원본

오늘의 사이트는 바로 삼성전자

레이아웃 퍼블리싱 완성본

퍼블리싱 과정

section1. 특별기획전

원본 사이트 코드를보면 html+css로 레이아웃 잡은게 아니라 이미지로 넣었더라. 나는 일단 레이아웃 연습을 위해 하는거라 이 부분도 html+css로 작성했다. 평소에는 flex를 많이 쓰는데, 이런 배치는 grid가 편하기 때문에 grid를 사용했다.

<!--html 마크업-->
<section class="special">
        <div class="wrap">
            <h2 class="hide">특별기획전</h2>
            <ul>
                <li>삼성닷컴 특별기획전</li>
                <li>삼성닷컴 특별기획전</li>
                <li>삼성닷컴 특별기획전</li>
                <li>삼성닷컴 특별기획전</li>
                <li>삼성닷컴 특별기획전</li>
            </ul>
            <div class="item-wrap">
                <div class="item-box left">
                    <div class="item">아이템</div>
                    <div class="item">아이템</div>
                    <div class="item">아이템</div>
                    <div class="item">아이템</div>
                </div>
                <div class="item-box right">
                    <div class="item">아이템</div>
                    <div class="item">아이템</div>
                    <div class="item">아이템</div>
                    <div class="item">아이템</div>
                </div>
            </div>
        </div>
    </section>

/* css 코드 */
.item {
    min-height: 100px; /* 최소 높이값 */
}

/* special */
.special ul {
    display: flex;
    justify-content: center;
}

.special ul li {
    padding: 0 5px;
    margin-bottom: 50px;
}

.special .item-wrap {
    display: flex;
    justify-content: space-between;
}

/* ==== 유심히 볼 부분! ==== */
.special .item-box {
    position: relative;
    display: grid;  
    grid-template-columns: 1fr 1fr;
    gap: 10px;  
    width: 48%;
}

.special .item-box.left .item:nth-child(1) {
    grid-row: 1 /  3;
}

.special .item-box.left .item:last-child {
    grid-column: 1 /  3;
}
/* ===================== */
.special .item {
    background-color: #c4c4c4;
}

여기서 유심히 볼 부분은 따로 체크해놨다! gird를 이용해서 아래 그림(그림판주의)과 같이 배치한다음에 빨간색 영역과 파란색 영역을 합치면된다.

.special .item-box.left .item:nth-child(1) {
    grid-row: 1 /  3;
}

.special .item-box.left .item:last-child {
    grid-column: 1 /  3;
}

grid설명은 1분코딩님이 잘 정리해놨으니 참고해도 좋을듯하다 https://studiomeal.com/archives/533

section2. 스토리 영역 li에 counter 넣기

원본 사이트에 보면 li앞에 숫자로 넘버링이 되어있는데 물론 span같은걸로 직접 입력해줄수도 있겠지만 나는 css counter함수(?)를 이용해서 작성해보았다.

html마크업은 아래와 같고..

<section class="story">
        <div class="wrap">
            <div class="left">
                <h2>스토리<br>#DoWhatYouCant</h2>
            </div>
            <div class="content">
                이미지
            </div>
            <div class="right">
                <ul>
                    <li>
                        리스트
                        <a href="#none">더 알아보기</a>
                    </li>
                    <li>리스트</li>
                    <li>리스트</li>
                    <li>리스트</li>
                </ul>
            </div>
        </div>
    </section>

css는 counter부분만 가져왔다!

.story .right ul {
    width: 100%;
    counter-reset: numbering;
}

.story .right li {
    position: relative;
    padding: 22px 0 22px 45px;
    border-top: 1px solid #c4c4c4;
}

.story .right li::before {
    position: absolute;
    top: 22px;
    left: 20px;
    counter-increment : numbering; 
    content : '0' counter(numbering);
}

Css counter사용법

일단 counter란.. 말그대로 카운팅을 해주는 속성이다. 자동으로 넘버링이 된다! 애초에 순서가 있는 목록을 작성하려면 ol을 쓰면 되지 않을까? 싶기도 한데.. counter을 사용해서 순서를 주는게 좀더 자유롭게 작성할 수 있는것같다. counter 사용법은 부모요소에 counter-reset을 주어 초기화 시켜주고, 자식요소에 counter-increment을 주어 값을 증가시켜주면 된다.

.parenet {
    counter-reset: numbering 0;
    /* counter의 이름 : numbering, 초기값 0*/
}

.child::before {
    counter-increment : numbering;
    /* numbering의 카운터를 1씩 증가,
      counter-increment : numbering -1;으로 쓰면 -1씩 감소,
      counter-increment : numbering 2;면 2씩 증가
    */
    content : counter(numbering); /* counter의 값을 표시*/
}

이런식으로 사용할 수 있고, 나는 01 02 03 이렇게 0 + 카운트 값으로 나타내고 싶어서 counter(numberig)앞에 0을 붙여줬다.

.story .right li::before {
    counter-increment : numbering; 
    content : '0' counter(numbering);
}

나머지는 특별한게 없어서.. 정리안할거지롱! 레이아웃 잡은김에 그냥 마저 퍼블리싱해야겠다. 그럼 20000

현재 포트폴리오 사이트 작업까지 끝내고.. 이력서 넣으면서 추가적으로 레이아웃 연습이나 좀 하려고 냅다 삼성전자 사이트에 들어가서 레이아웃을 잡고 있었다. 앞에는 다 잡았고 이제 footer만 잡으면 됐는데

문제가 발생!

삼성전자 홈페이지에 들어가면 푸터가 요렇게 생겼는데

대충 빨간색으로 감싼 영역에 border top bottom주고, 보라색영역엔 전체적으로 border-left를 주고, 첫번째 요소만 border-right를 줘서 표현을 하려고 했다.

수정 전 HTML & CSS

   <div class="footer-nav">
        <div class="inner">
            <h2 class="hide">하단메뉴</h2>
            <div class="content-item">
                <h3>제품</h3>
                <ul>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                </ul>
            </div>
           <!-- 생략 -->
            <div class="content-item">
                <h3>제품</h3>
                <ul>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                </ul>
            </div>
        </div>
    </div>

대충 html 마크업은 .inner안에 .content-item이 들어있게 해주었고, 숨김제목으로 h2.hide를 하나 만들어주었다(이게 문제가 된거지)

.footer-nav{
    border-top: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
}

.footer-nav .inner {
    display: flex;
    width: 90%;
    margin: 0 auto;
}

.footer-nav .content-item {
    flex-grow: 1;
    border-right: 1px solid #c4c4c4;
}

.footer-nav .content-item:nth-child(1) {
    border-left: 1px solid #c4c4c4;
}

css는 위와 같이 간단하게 줬는데 nth-child(1)이 안먹는것이다!! first-child로도 바꿔도 안먹더라..

수정전 결과물

맨첫번째 요소 왼쪽에도 border가 들어가야하는데.. 왜 안되는건지 몰랐는데 내가 여태껏 nth-child랑 first-child를 쓸때 ul > li 요소에서만 써서 진짜 기초적인걸 간과하고 만것이다..

본론

본론으로 들어가자면 .footer-nav에 .content-item은 첫번째 요소가 아니다. h2.hide이친구가 첫번째 요소고, .content-item은 두번째 부터 시작하는것이다.!

여기서 알아야할 css지식!

first-child와 first-of-type의 차이

first-child 는 자식요소중 제일 첫번째 자식을 선택하는 가상선택자이고, first-of-type은 해당하는 타입의 첫번째 요소를 선택하는 가상선택자이다.

첫번째를 선택한다는것에선 같을 수 있지만 약간은 다르다는점!

위에서 내가 작성한 코드를 예시로 들면, first-child는 h2이고, div중에 첫번째를 잡고 싶은거면 first-of-type을 선택해야 한다!

수정후 css

.footer-nav .content-item:first-of-type {
     /* div 요소(타입)중 첫번째 요소를 선택한다. */
    border-left: 1px solid #c4c4c4;
}

느낀점

평상시에는 ul > li로 만 작성해서 li의 nth-child나 first-child이런식으로 선택했기 때문에 first-of-type을 써본적이 없었기에 생긴 문제였다. 아직도 배워야할게 많다는걸 느끼는 하루였당 :D 지금이라도 알았으니 다행인건가(?)

• display: none : HTML 구조는 남고, 화면에서 영역이 사라진다.

• visibility: hidden : 화면에서 사라지지만 영역은 가지고있다.

• opacity: 0 : 불투명도를 조절하는거라 영역은 그대로 있다. 애니메이션 적용가능

• transfrom : scale(0) : 요소의 크기를 축소시켜 안보이게함. 애니메이션 적용가능

  • 다른사람들은 영역도 사라진다는데..? 실제로 작성해서 보면 영역은 그대로있다.

• position: absolute : top, left 를 함께 사용해 요소를 다른곳으로 보내버린다. 영역도 사라짐.

• width: 0; height: 0; : 화면에서 영역이 사라진다. 단, 텍스트는 남을 수 있는데 overflow: hidden을 추가해주면 텍스트도 사라짐

각 속성들이 어떻게 숨겨지는지 궁금하다면 아래 코드펜을 확인해보자!

See the Pen Untitled by So-An (@So-An) on CodePen.

그렇다면 모두 웹 접근성을 준수한 방법일까?

웹 접근성 (Web Accessibility)

웹 접근성이란 고령자, 장애인, 비 장애인 등 웹을 이용하려는 사용자 모두에게 동등한 정보를 제공해야 하는것을 말한다.

예시로 네이버 사이트에 접속을 했다고치자. 대부분의 사람들은 아이콘을 봤을때 아 저게 메뉴구나, 페이구나를 알아볼 수 있다. 하지만 시각장애인이 접속했을때 저런 아이콘 하나로 이게 무슨 버튼인지, 무슨아이콘인지 알 수 없다. 웹 접근성을 위해서는 스크린 리더가 읽을 수 있도록 보조로 설명하는 글이 필요하다.

실제로 개발자 도구를 켜서 네이버 사이트를 보다보면 blind 클래스를 가진 요소들을 찾아볼 수 있다. 이 클래스를 가진 요소들은 화면상에서 보여지진 않지만, 스크린리더가 읽을 수 있는 요소들이다.

웹 접근성을 위한 요소 숨기기

앞서 다양한 CSS 속성을 사용해서 요소 숨기는법을 알려줬다. 하지만 대표적으로 display: none같은 경우는 스크린리더기에서 읽히지 않는다. 웹 접근성을 위해서는 화면에서만 보이지 않으면서 스크린 리더가 읽을수 있게 작성을 해줘야한다.

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* 줄바꿈 금지 */
}

.hide {
    display: block;
    position: absolute;
    border: 0;
    width: 1px;
    height: 1px;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
}

.blind {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

작성자마다 사용하는 속성이 약간씩 다르지만 핵심은 이거인듯하다

• position: absolute를 이용해 본문의 흐름에서 떼어놓고
• width: 1px hight: 1px을 주어 최소 크기로 만들고
• margin: -1px 요소에 역마진을 부여함으로써 요소가 차지하는 공간을 제거한다.
• clip: rect(0, 0, 0, 0) : 요소를 클리핑하여 표시되지않게 한다
• overflow: hidden 속성으로 요소를 넘치지 않게 만들어준다.

See the Pen CSS 요소 숨기기2 by So-An (@So-An) on CodePen.

인터넷의 시작, ARPANET

최초의 인터넷은 군사적인 목적으로 만들어졌다. 소련이 인류 최초의 인공위성을 발사한 후, 미국은 위협을 느끼고 핵 전쟁 등의 상황에 대비하기 위해 전체 통신 시스템에서 데이터를 안전하게 보관하고 전송할 수 있는 시스템을 개발하기 시작했습니다. 그것이 바로 ARPANET이었다.

ARPANET은 인터넷의 초기 형태로, 1969년에 미국 국방부의 주도 아래 개발되었습니다. 통신망 일부가 파괴되어도 네트워크가 계속해서 작동할 수 있는 분산형 아키텍처를 갖추고자 했던 것이 이 네트워크의 주요 목표 중 하나였다. 이렇게 ARPANET은 군사적인 필요성에서 출발하였으나, 이후에는 인터넷의 발전과 함께 학계와 산업에 큰 영향을 미치게 되었다.

TCP/IP 프로토콜의 개발

TCP/IP 프로토콜은 현재 인터넷에서 가장 널리 사용되는 통신 프로토콜 중 하나다. 이는 데이터의 안정적인 전송을 보장하기 위해 개발된 프로토콜로, ARPANET을 위성 및 무선 네트워크와 연결할 수 있는 네트워킹 프로토콜을 발전시키는 과정에서 ‘TCP/IP’ 통신 프로토콜이 개발되었다.

1. TCP(Transmission Control Protocol)

• 데이터를 안정적으로 전송하기 위한 프로토콜이다
• 데이터의 신뢰성과 흐름제어를 담당한다
• 데이터를 여러개의 패킷으로 분할하여 전송하고, 수신자가 다시 재조립하여 원본 데이터를 복원한다
• 데이터가 손실되지 않고 순서대로 도착할 수 있도록 보장한다

2. IP(Internet Protocol)

• 컴퓨터간에 데이터를 주고 받기 위한 주소체계와 라우팅을 담당하는 프로토콜이다
• 각 컴퓨터와 네트워크 장치에는 IP주소가 할당되어 있으며, IP주소를 통해 데이터가 목적지까지 안전하게 전송된다
• IP는 패킷의 출발지와 목적지를 정하고 최적의 경로를 선택하여 데이터를 전송한다.

  라우팅 : 네트워크상의 여러 경로중 최적의 경로로 데이터를 보내주는것

웹(Web)

WWW의 등장

1989년, 팀 버너스리가 인터넷 공간 안에서 문서가 서로 이동할수 있는 개념인 '하이퍼링크'를 제안하게 되고, 이 아이디어를 바탕으로 현재 오늘날 널리 쓰이는 World Wide Web이 나타나게 됩니다. 최초의 웹사이트 보러가기

1. WWW 주요 구성요소

• HTTP : 웹 서버와 클라이언트 간에 데이터를 전송하는데 사용되는 프로토콜
• URL : 하이퍼링크가 가르키는 주소
• HTML : 웹 페이지 작성을 위한 마크업언어
• 웹브라우저 : 페이지를 표시하고 사용자가 웹을 탐색할 수 있도록 해주는 응용 프로그램

당시 W3C는 HTML 표준을 제정하지만 표준을 강제하지는 않았다.

1차 웹 브라우저 전쟁

• 최초의 GUI( Graphical User Interface)를 갖춘 모자이크가 등장하게 됐다.
• 추후 모자이크는 넷스케이프로 이름을바꾸고 1994년 정식 배포를 시작했다
• 이 시기에 마이크로소프트에서 인터넷 익스플로러를 발표했다.
• 넷스케이프와 인터넷 익스플로러는 둘 다 초기에는 W3C의 표준을 완전히 준수하지 않고 자체적으로 다양한 기능을 추가하여 경쟁을 벌였다.
• 하지만 이미 대부분의 사람들은 넷스케이프를 사용하고 있었기에 마이크로소프트는 인터넷 익스플로러를 윈도우 운영체제에 강제로 설치하게 된다.
• 뿐만아니라 애플과 계약을 통해 5년간 매킨토시의 기본 브라우저를 인터넷 익스플로러로 설정하게 된다.(당시 모든 컴퓨터의 브라우저를 인터넷 익스플로러로 설정해놓은것이다.)
• 이러한 행동으로 인해 인터넷 익스플로러의 점유율이 높아지고, 넷스케이프의 점유율이 하락하는 추세를 보이게된다.

플러그인의 등장

• 웹 브라우저 전쟁동안 웹은 엄청난 속도로 발전하기 시작했다
• 빠른 성장세에 정작 웹 표준을 지정하는 W3C는 대응을 하지 못했고, 이에 불만을 느낀 기업들이 플러그인을 제작하기 시작했다.
• 이때 어도비 플래시(Adobe Flash)와 액티브 엑스(ActiveX) 등 여러 플러그인이 제작되었고 웹을 점점 풍부한 공간으로 만들어주게 되었다.

웹 2.0

• 플래시와 같은 플러그인의 발전으로 웹 어플리케이션 개발이 쉬워졌다.
• 기술의 발전으로 웹에서도 다양한 기능들을 구현할 수 있게 되었고, 이는 웹을 더욱 인터랙티브하고 다양한 경험을 제공할 수 있는 공간으로 만들어주었다.
• 이 시대에는 블로그, 소셜 미디어, 위키 등의 플랫폼이 대중화되면서 사용자들이 쉽게 콘텐츠를 발행할 수 있게 되었다.

웹 1.0 (읽기)

• 1990년대부터 ~ 2004대까지의 구간
• 이 시기에는 정적인 컨텐츠를 제공하는 웹사이트가 주를 이루었습니다.
• 사용자들은 주로 정보를 소비하는 역할에 그쳤으며, 대부분의 웹사이트는 단방향 통신이었습니다.

  웹 2.0 (읽기, 쓰기)

• 2004 전후로 페이스북과 유튜브같은 플랫폼들이 등장하기 시작했다.
• 읽기와 쓰기가 동시에 가능하는 양방향 소통이 가능하게 되었다.(참여와 공유가 가능한 형태)

  웹 3.0 (읽기, 쓰기, 소유)

• 인공지능과 블록체인을 기반으로 맞춤형 정보를 제공하고 데이터 소유를 개인화하는 3세대 인터넷
• 블록체인 기술을 사용하여 탈중앙화된 데이터 관리와 보안을 실현함으로써, 사용자들의 개인 정보와 데이터를 더욱 안전하게 보호하고 소유권을 강화
• • 탈 중앙화 : 중앙 집권을 벗어나 네트워크 참여자가 동등하게 권한을 가지고 자원을 관리함

WHATWG의 등장

• 인터넷 익스플로러의 점유율 상승으로 인해 대부분의 웹 사이트에 액티브 엑스가 사용되면서 웹의 무게가 증가하기 시작함.
• 이를막고자 2004년, 모질라 재단과 오페라 소프트웨어가 W3C에 새로운 HTML 표준 제안서를 제출했지만 거부당했다.
• 이에 따라 인터넷 익스플로러를 제외한 웹 브라우저 기업들은 WHATWG를 설립하여 새로운 웹 표준을 제안했습니다.(Web Application 1.0)
• 비슷한 시기에 W3C도 XHTML 2.0 표준을작성하지만, 기존의 표준과 너무 동떨어져있는 바람에 개발자들은 XHTML 2.0을 사용하지 않게 되었다.
• 결국 W3C는 Web Application 1.0을 HTML5표준으로 변경하고 WHATWG와 함께 HTML5 표준을 작성하게 되었다.

2차 웹 브라우저 전쟁

• 마이크로소프트와 W3C가 함께한 XHTML 2.0 표준이 붕괴되고 인터넷 익스플로러의 기능 문제가 대두되었다.
• 다른 웹 브라우저들은 모두 최신 표준을 준수하는 반면, 익스플로러만 표준을 지원하지 못하는 상황이 발생하게 된것이다.
• 이러한 기회를 놓치지 않기 위해 모든 웹 브라우저들이 빠른 속도로 업데이트를 시작했고, 자체 마케팅을 다양한 방법으로 진행하였다.
• 일부 경우에는 특정 브라우저를 사용하지 않으면 서비스에 접근할 수 없도록 만들어서 사용을 강제하기도 했다.
• 결론적으로 제 2차 웹 브라우저 전쟁은 거의 구글의 크롬의 승리로 볼 수 있다.

마이크로소프트, 인터넷 익스플로러 지원 중단

• 새로운 것이 등장한다고 해서 모든 사용자가 새로운 것을 쓰는 것은 아니다.
• 컴퓨터에 관심이 있는 사람들은 인터넷 익스플로러가 보안 측면에서 위험하고 성능도 좋지 않다는 것을 알고 최신 웹 브라우저를 설치하여 사용했지만, 대부분의 사람들은 컴퓨터에 기본으로 설치된 웹 브라우저를 계속 사용했다.
• 그러나 2016년 마이크로소프트는 인터넷 익스플로러 10 이하의 버전을 더 이상 지원하지 않기로 결정하고, 자동 업데이트를 통해 인터넷 익스플로러 11로 강제로 업데이트 했다.( 최종적으로 2022년 6월 15일 인터넷 익스플로러에 대한 지원이 종료되었고, 현재는 Edge가 되었다.)
• 이로 인해 HTML5를 본격적으로 사용할 수 있는 환경이 조성되었다.

주인장의 생각 끄적이기

생각보다 웹의 역사는 짧은것같다. 역사가 짧은것에 비해 단기간에 엄청나게 발전을 한게 참 신기하다. 대충 본인은 웹 2.0시대에 태어난 사람인데, 생각해 보면 어렸을때 플래시 게임같은걸 많이 했었다. 그리고 은행사이트 하나를 접속하더라도 액티브 엑스를 깔라고하고.. 이게 정말 킹받았던것 같다. 어느순간부터 자연스럽게 익스플로러를 쓰지 않게되고 크롬을 쓰고있었는데 지금 와서 돌이켜보니 그때가 제 2차 브라우저 전쟁의 시기였던것같다. 이제는 익스플로러는 고사하고 엣지도 쳐다도안본다.. 크롬에 너무 익숙해져버렸다. -끝- 아, 전체적인 내용은 모던웹을 위한 HTML5+CSS3 바이블 3판을 참고하였습니다.

SEO(Search Engine Optimization)란?

SEO는 검색 엔진 최적화를 말하는것으로, 구글이나 네이버 같은 검색 엔진이 웹사이트를 이해하고 인덱싱하여 사용자가 검색할 때 해당 사이트를 노출시키도록 도와주는 프로세스를 말한다. 이를 통해 사용자가 웹사이트를 찾고 방문할 수 있도록 도와줍니다. (대충 검색엔진이 내 사이트를 잘 찾을 수 있도록 하는것이다!)

Google 크롤러 작동단계

대표적으로 구글의 크롤러 작동 단계는 다음과같다. 근데 다른 검색엔진들도 비슷하게 작동한다.

• 1단계 크롤링 : 크롤러가 인터넷에서 발견한 페이지의 내용을 모두 다운로드한다
• 2단계 색인 생성 : 크롤러가 수집한 데이터를 분석하여 관련된 내용으로 인덱싱을 한다.
• 3단계 검색결과 게재 : 사용자가 google검색을 하면 검색어와 관련된 정보를 반환한다. 자세히 알아보기

검색엔진 최적화를 위한 방법

1. <meta>태그 활용하기

   <!--  검색 엔진을 위한 키워드 -->
   <meta name="keyword" content="고양이, 네모, 네모빔">
   

2. 문법에 맞는 HTML 작성 - 시맨틱 마크업
3. `<img>`에 `alt`속성 기재하기
4. 모바일 친화적인 사이트 구축 - 모바일 사용자의 경험 개선
5. 사이트 속도 최적화
3. https 사용 권장 - 동일한 사이트라면 http보다 https가 가산점이 있음

이외에도 SEO를 위한 방법은 다양하게 있다.

---
## 그 외 검색 최적화 방법
>### 링크 미리보기, OG(Open Graph)

카카오톡으로 링크를 공유하면 썸네일 이미지와 함께, 게시물의 제목, 내용등이 간략하게 나온다.
Oepn Graph 프로토콜을 사용하면 원하는 제목과 설명, 이미지등을 지정할 수 있다.
![](https://velog.velcdn.com/images/nemo-cat/post/d74cd1a0-4b02-4f5c-8f10-788a6a2cf6d2/image.png)

```html
<!-- 기본 사용법 -->
<meta property="속성 이름" content="속성 값">

Oepn Graph의 기본 속성은 og:title og:url og:imgae og:type이 있다.

<!-- 사용 예시 -->
<head>
    <meta property="og:url" content="이동할 url">
      <meta property="og:title" content="제목">
      <meta property="og:type" content="website">
      <meta property="og:image" content="썸네일 경로">
      <meta property="og:description" content="설명">
</heade>

네이버 SearchAdvisor

국내 사람들은 구글도 많이 이용하지만 국내 포털인 네이버, 다음 등도 많이 사용한다. 네이버에도 네이버만의 검색엔진최적화를 위한 SearchAdvisor가 있다. 노출시키고 싶은 홈페이지를 SearchAdvisor에 등록하여 사용하면 된다. > 네이버 검색기초 보러가기

robots.txt

robots.txt는 본인의 웹사이트에 크롤러 같은 로봇들의 접근을 제어하는 파일이다. 웹사이트의 어떤 부분을 크롤링하거나 색인화(인덱싱)해야하는지에 대해 작성이 가능하며 특정 로봇의 방문을 막을 수 있다.

대표적인 로봇

- Google : Googlebot
- Google image : Googlebot-image
- Naver : Yeti
- Bing : BingBot
- Daum: Daumoa

기본 형식

User-agent: [로봇 이름 or '*'(모든 로봇)]
Disallow: [크롤링을 허용하지 않을 디렉토리 또는 페이지 경로]
Allow: [특정 로봇에 대해 허용하는 디렉토리 또는 페이지 경로]

모든 로봇에게 모든 페이지 접근 허가

User-agent: *
Allow: /

모든 로봇의 접근 거부

User-agent: *
Disallow: /

특정 로봇에게 특정 디렉토리의 접근 거부

User-agent: Googlebot
Disallow: /private/

기존코드1

let todoList = [];
let key = 0;

function addTodo()
{
    let text = $("#todo").val(); //input에 입력된 값 저장
    let currentDate = new Date(); //현재 날짜 생성

    //새로운 투두 생성
    let newTodo = {
        index: key,
        text: text,
        checked: false,
        date: writeDate
    }

    todoList.push(newTodo);
    key++;
}

그래서 뭐가 문제인가하고 슬쩍봤는데.. 음..? 도대체 어디서 에러가 난건지 감이 안잡힌다 ㅠㅠ 중간중간에 console.log를 찍어보았는데, 어느순간 todoList가 null로 바뀌어있더라..?

그래서 이 부분이 문제가 아닌듯하여 다른 코드를 살펴보기 시작했다.

기존코드2

// 이전에 작성한 투두리스트를 불러오는 함수
function loadTodoList()
{
    let checking = window.localStorage.getItem("todoList"); //로컬스토리지의 todoList를 가져옴
    let changeData = JSON.parse(checking); //가져온 todoList를 object형태로 변경;
    todoList = changeData; //todoList를 changeData로 변경 <-얘가 문제

    //로컬스토리지에 데이터 있으면 추가
    if(checking)
    {
        //html에 todoList추가
        for(let i = 0; i < todoList.length; i++)
        {
            $("#todoList").append(appendTodoList(todoList[i].index, todoList[i].text, todoList[i].checked));
        }
    }
}

투두 리스트 페이지가 열리면 loadTodoList()가 실행되게 해놨는데, 초기에는 로컬스토리지에 데이터가 없으니 todoList에 null값이 저장되는것이였다. 단순 실수!

수정코드

function loadTodoList()
{
    let checking = window.localStorage.getItem("todoList"); //로컬스토리지의 todoList를 가져옴
    let changeData = JSON.parse(checking); //가져온 todoList를 object형태로 변경;

    //로컬스토리지에 데이터 있으면 추가
    if(checking)
    {
        todoList = changeData; //todoList를 changeData로 변경
        //html에 todoList추가
        for(let i = 0; i < todoList.length; i++)
        {
            $("#todoList").append(appendTodoList(todoList[i].index, todoList[i].text, todoList[i].checked));
        }
    }
}

요렇게 todoList = changeData위치를 if(checking)안으로 바꿔줬더니 오류가 해결됐다.

사실 이렇게 수정하고나니 별거아닌것같은데.. 오류가 나고 수정까지의 시간은 고통의 시간이었다 ㅠ

어쩌다가 지나가던 백엔드 개발자한테 붙들려서 서버와 통신하는 법을 배우게 되었다. http, udp, tcp등에 대해서 알려주더니 냅다 ajax와 json란걸 보여주더니 냅다 todo-list를 만들어보란다(예?) 약간 abcd 알려줘놓고 토익시험을 치라는것같은 느낌이었다.

그래도 하라하면 또 하는 성격인지라.. 군말없이 일단 하기는 했다. 하다보니 아래와 같은 todo-list를 만들게 되었다.(완성작이다.)

자 사실 퍼블리싱 자체는 문제가 되지 않는다. 어떻게든 하니까.. 근데 이제 평소에 퍼블리싱 공부를 할때에는 저런 할일 리스트 목록이면 html에 ul > li로 직접 쳐서 바로 브라우저에 보여질 수 있게만 했다.

근데 이제는 input[type='text']에 내용 입력하면 -> 내용을 데이터 형식에 맞게끔 담아 서버에 보낸다 -> 서버에서 다시 데이터를 보내준다 -> 서버에서 받은 데이터로 li 요소를 생성한다. 이런식으로 서버와 통신을 하며 데이터를 보내고, 화면에 뿌리는(?) 걸 해보게 되었다.

자, 다 좋은데 문제가 발생했다!!

문제

todo list의 핵심 기능은 완료한 항목은 체크표가 되어야한다는 것이다. 처음에는 디자인을 딱히 정하지 않고 냅다 html로만 만들어놨어서, 냅다 input[type='checkbox']를 클릭하면 체크된 상태를 서버로 보내게 만들었는데, 막상 디자인을 하고 나니까 input[type='checkbox']를 누를 수 없는 상태가 되었다! (체크박스는 css로 디자인이 안된다.)

맨 처음 코드(label 사용 x) 체크박스를 직접 클릭하여 함수를 실행시켰기 때문에 문제가 안됐었음

<ul>
    <li>
        <input id="checkList##" type="checkbox" onclick(todoChekced(this, index))>
        일어나서 밥먹기
        <button>삭제</button>                                      
      </li>
</ul>

<script>
  function todoChecked(e, index) {
      /* 체크 박스가 checked 되어있는지 확인 */
      let checkbox = e.checked;
      /* 서버로 보낼 체크박스 상태 0이면 체크안됨, 1이면 체크됨으로 정했음 */
      let checkedStatus = "";
      /* 체크박스 상태와 함께 할일 리스트 인덱스번호도 같이 보냄 */
      let deleteIdx = inedx;

      if (checkbox == false) {
          checkedStatus = 0;
      } else {
          checkedStatus = 1;
      }

      $.ajax({
          생략..
      });
 </script>

그래도 이때까진 큰 문제라 생각하지 않아서 label요소를 추가해서 label과 checkbox를 연결하게된다. 그래서 결국 label을 누르면 checkbox가 checked가 되니까? 서버에는 똑같이 체크여부가 넘어갈것이라 생각하게 된다.

이렇게 아름답게 끝나면 얼마나 좋을까..

• 내가 생각한것 : label을 누른다 -> checkbox가 checked상태가 된다 -> 서버에 checkbox 상태를 보낸다.
• 실제로 동작된것 : label을 누른다 -> 서버에 checkbox 상태를 보낸다 -> checkbox가 checked상태가 된다.

처음에는 실제 작동된 순서를 알아채는데도 오래걸렸다. 자꾸 마음처럼 안되서 함수안에서 alert으로 찍어보니까 그제서야 서버에 check되기 전 상태가 먼저 간다는걸 깨닫게 된것이다.

수정1

자, 이제 동작의 순서가 잘못된걸 깨닫게 되었으니 수정을 해야한다. 하지만 아무리 생각해도 좋은 방법이 떠오르지 않았다. 그러다가 문득 생각난게 바로 setTimeout이다. setTimeout을 이용해서 함수 실행을 늦춘다면, checkbox가 checked로 바뀌는 시간을 벌 수 있을것 같다는 생각이 들었다.

수정1) setTimeout을 이용하여 인위적으로 함수를 늦게 실행시킴

<ul>
    <li>
        <input id="checkList##" type="checkbox">
        <label for="checkList##" onclick(todoChekced(this, index))>일어나서 밥먹기</label>
        <button>삭제</button>                                      
      </li>
</ul>


<script>
  function todoChecked(e, index) {
        setTimeout(function () {
          /* this가 label이 되었기때문에 label의 앞 형제(checkbox)의 체크여부 확인 */
          let checkbox = e.previousSibling.checked;

          let checkedStatus = "";
          let deleteIdx = inedx;

          if (checkbox == false) {
              checkedStatus = 0;
          } else {
              checkedStatus = 1;
          }

          $.ajax({
              생략..
          });
      }, 500);
 </script>

그리하여 수정된 코드가 이것이다. 일단 원하는대로 작동은 되니까 기분은 좋았다. 수정을 해놓고 서버를 만들어준 개발자에게 문제가 생겼고, 이렇게 해결했다라고 자진신고를 했다. 내 얘기를 듣더니 delay를 주는건 그닥 좋은 방법은 아니라고 하더라. 그러면서 다른 방법을 살짝 귀띔해주었다.

수정2

수정2) checkbox의 index를 통해서 n번째 checkbox의 상태를 반대로 바꿔주기

<ul>
    <li>
        <input id="checkList##" type="checkbox">
        <label onclick(todoChekced(index))>일어나서 밥먹기</label>
        <button>삭제</button>                                      
      </li>
</ul>


<script>
  function todoChecked(index) {
        /* 체크표시하고 싶은 체크리스트를 변수에 저장 */
      let chkIdx = $('#checkList'+index);

        /* 체크리스트의 checked 상태를 반대로 설정 */
        chkIdx.prop('checked',!chkIdx.is(':checked');

      /* 현재 checked상태 확인해서 서버에 보내주기 */
      let checkbox = chkIdx.is(':checked');
      let checkedStatus = "";      let deleteIdx = index;

      if (checkbox == false) {
          checkedStatus = 0;
      } else {
        checkedStatus = 1;
      }

      $.ajax({
          생략..
});
 </script>

두번째로 수정한것은 checkbox의 상태를 반대로 저장해버리는 것이다.

체크박스는 1. 체크 됨 2. 체크안됨 둘중하나니까.. 현 상태의 반대로 저장하면 원하는 대로 되는것이더라. 간단한건데 왜 이런 생각은 못했을까?

그래서 label을 누르면 NOT 연산자(!)를 통해서 체크상태를 반대로 바꿀 수 있게 해주었다. 그러면서 원래는 매개변수값으로 e, index 두개를 받았는데 굳이 e는 필요없을것 같아 삭제해주었고 index만으로 원하는 할일리스트 index의 상태를 바꿀 수 있게 했다.

그런데 사실 저 코드에서 더 정리가 될 것같기도 한데 현 상황에선 잘 모르겠다. 나중에 조금더 레벨업을 한 다음에 다시 수정을 해봐야겠다.

마치며

어쨌든 checked 상태때문에 생각보다 시간이 오래걸렸다. 이게 해결하고 나서 보니까 진짜 별거 아닌것같은데 괜히 혼자 시간버려가며 삽질했나 싶었는데 개발자 친구는 삽질하면서 배워 나가는거니 너무 크게 마음쓰지 말라고 하더라. ㄴr 이렇게 성장해 나가는 걸ㄲr... todo list 다만들었다고 개발자한테 자랑하니까 대충 잘했다며 갑자기 이번엔 게시판을 만들어보잰다 서버는 나중에 만들어줄테니 퍼블리싱 먼저 하란다(이게맞나) 하라니까 또 하러 갑니다.

원래 만들고 싶은 메뉴는 위의 그림과 같은 메뉴이다. 평상시 웹 사이트에서 많이 볼 수 있는 디자인이다.

처음 작성한 CSS

얼핏보면 맞게 만든것 같다. 하지만 자세히 보면 문제가 있는데, li.active가 됐을때 메뉴1의 오른쪽 선이 보이면 안되는데 그대로 있는것이다 :-(

이런식으로 선이 겹쳐져서 보인다. 내가 원하던 디자인이 안나왔다.

/* css 코드 */

.tab_menu li {
    background: #fafafa;
    border: 1px solid #e4e8eb;
}

.tab_menu li ~ li {
    border-left: none;
}

.tab_menu li.active {
    position: relative;
    background: #fff;
    border: 1px solid #000;
}

여기서 TMI) 일반형제선택자 " ~ "

요소들의 부모가 같을때(형제일때) A ~ 다음 형제를 모두 선택한다. 말로 설명하기엔 어려운데, 예시로 p ~ span 이면 p의 형제인 span을 모두 선택하는 선택자이다. 위 코드를 보면, 나는 li ~ li으로 사용했기 때문에, li의 형제인 li을 선택하는 것이라, 맨 첫번째 li를 제외한 다른 li의 border-left를 none으로 처리한것이다.

보완한 CSS

/* css 코드 */

.tab_menu2 li {
  margin-left: -1px;
  background: #fafafa;
  border: 1px solid #e4e8eb;
}

.tab_menu2 li.active {
  position:relative;
  background: #fff;
  border: 1px solid #000;
} 

이번에는 li에 margin값을 마이너스로 줘서 선이 겹치게끔 만들었다. 이렇게 하니까 li.active가 됐을때 position: relative의 영향을 받아 본인 자리를 유지하면서 z축으로 올라오게 되어 원하는 디자인을 만들 수 있게 되었다.

결과

!codepen[So-An/embed/BabQoKV?default-tab=css%2Cresult]

여기서 TMI2) inline, inline-block의 여백

display 속성값이 inline이나 inline-block인 요소들은 각 요소 사이에 여백이 생긴다. 제일 쉽고 간단한 방법은 부모 요소에 font-size: 0;을 주면된다. 그 뒤에 자식한테 다시 font-size를 줘야 텍스트가 보이니 주의하자.

웹디자인기능사 실기 후기

시험신청후기

큐넷에서 실기시험은 처음 신청해보는거라 시험 신청이 이렇게 빡셀줄은 꿈에도 몰랐다.. 첫날에 시험 신청에 실패하고 울면서 4회차 시험을 봐야하나 하다가 후기를 보니 다른날에도 조금씩 풀린대서 틈틈히 들어가다가 겨우 한자리 얻었다!

시험장소는 휘경동에 있는 한국산업인력공단 서울지역본부였다. 휘경동이 집에서 먼건 아니지만 교통편이 애매해서 7시 30분에 출발해서 8시 10분쯤 도착했다. ( 버스에서 내려서 10분~ 15분정도 걸어갔다 ) 수험자 대기실에 앉아있는데 입실 마감시간이 다가오도록 사람이 별로 오지 않았다. 최종적으로 8명? 정도 온것같다. 시험자리 잡기가 힘들었기 때문에 안보러올거면 애초에 신청을 하지 말지라는 생각도 들었다..

시험 후기

8시 30분에 감독관님의 지시에 따라 전자기기를 모두 종료하고 시험 장소로 이동했다. 시험장소에 들어가니까 에코백(?)같은곳에 비번호를 넣어두고 하나 뽑아달라 하셨다. 첫번째 순서로 뽑았는데 비번호 1번이 뽑혔다. 그 후 본인 확인과 함께 자리에 앉았다.

8시 30분부터 9시까지 감독관님이 수험자 유의사항, 답안 제출은 어떤식으로 하는지 등등 시험에 관한 모든걸 친절하게 알려주셨고, 9시부터 시험을 보기 시작했다.

이번에 받은 시험은 A-1 JUST 쇼핑몰이 나왔다. A유형은 정말 베이직하다고 생각하는 유형이기에 쉽게 느껴졌다.

시험 시작하자마자 html 마크업을 끝내고, css 작업하면서 중간중간 이미지가 필요하면 그때그때 포토샵으로 이미지 작업을 해줬다. 마지막으로 제이쿼리를 이용해서 기능들을 구현해주었다. 다 만들고 크롬과 엣지에서 동일하게 작동하는지, 표현되는지 확인 했고 한번더 시험지를 훑어 본 후 첫번째로 제출하고 나왔다. 소요시간은 1시간 40분정도 걸렸다

다 만든 후 자리에서 손을 들면 감독관님이 오셔서 답안 폴더를 감독관 컴퓨터로 전송해주신다. 나가기 전에 감독관 컴퓨터에서 제대로 작동하는지 확인하고 나오면 된당 :-D

합격발표는 9월 13일에 나온다고 하니, 혹시 합격하면 따로 합격한거 첨부해놔야겠다

합격 인증

A유형 연습

A유형-1

A-1 와이어프레임

A-1 완성이미지

A-1 코드

!codepen[So-An/embed/zYMLYBW?default-tab=js%2Cresult&theme-id=dark]

A유형-2

A-2 와이어프레임

A-2 완성이미지

A-2 코드

!codepen[So-An/embed/VwVovZB?default-tab=html%2Cresult]

A유형-3

A-3 와이어프레임

A-3 완성이미지

A-3 코드

!codepen[So-An/embed/wvRwqVP?default-tab=html%2Cresult]

A유형-4

A-4 와이어프레임

A-4 완성이미지

A-4 코드

!codepen[So-An/embed/bGObxog?default-tab=html%2Cresult]

B유형 연습

B유형-1

B-1 와이어프레임

B-1 완성이미지

B-1 완성코드

!codepen[So-An/embed/VwqLOBw?default-tab=html%2Cresult]

B유형-2

B-2 와이어프레임

B-2 완성이미지

B-2 코드

!codepen[So-An/embed/xxmGNoo?default-tab=html%2Cresult]

C유형 연습

C유형-1

C-1 와이어프레임

C-1 완성이미지

C-1 코드

!codepen[So-An/embed/eYbNeKY?default-tab=html%2Cresult]

D유형 연습

D유형-1

D-1 와이어프레임

D-1 완성이미지

D-1 코드

!codepen[So-An/embed/MWZYjvm?default-tab=html%2Cresult]

D유형-3

D-3 와이어프레임

D-3 완성이미지

D-3 코드

!codepen[So-An/embed/jOXPyad?default-tab=html%2Cresult]

E유형 연습

E유형-1

E-1 와이어프레임

E-1 완성이미지

E-1 코드

!codepen[So-An/embed/NWePvax?default-tab=html%2Cresult]

E유형-2

E-2 와이어프레임

E-2 완성이미지

E-2 코드

!codepen[So-An/embed/PoXwrrX?default-tab=html%2Cresult]

!codepen[So-An/embed/oNQyKVZ?default-tab=js%2Cresult&theme-id=dark]

탭메뉴 포인트

• 탭 메뉴는 크게 tab-nav와 tab-contents로 나누어 작성 ( 클래스명은 편한대로.. )
• 현재 클릭한 tab-nav li의 index를 이용하여, 알맞는 tab-content를 나타나게 한다.
• active라는 클래스를 가진 요소에 dispaly: block를 주어 나타나게 함

!codepen[So-An/embed/ZEmRNML?default-tab=js%2Cresult&theme-id=dark]

팝업레이어 포인트

.bg {
  display: none;
  position: absolute;
  z-index: 1;
  /* 생략 */
}

.popUp {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  /* 생략 */
}

• 뒷 배경과 팝업레이어에 z-index값을 주어 가장 앞에 위치하도록 해야함
• 뒷 배경보다 팝업레이어의 z-index값이 더 커야함
• 뒷 배경과 팝업레이어 모두 position: absolute 적용
• 팝업 레이어를 화면의 정중앙에 오게 하려면top: 50%, left: 50%, transfrom: translate(-50%, -50%)적용하면 됨

transfrom: translate(-50%, -50%)를 주는 이유

팝업 레이어에 top: 50%, left: 50% 만 주게 된다면 아래 그림처럼 팝업레이어의 왼쪽 상단 꼭지점이 top: 50%, left: 50% 위치에 위치하게된다.

이 상태에서 transfrom: translate(-50%, -50%)를 주게 된다면, 요소(팝업레이어)를 기준으로 z축에서 -50%, y축에서 -50%씩 이동하게 되어 정 중앙에 위치하게 된다.

• 좌/우 슬라이드
• 상/하 슬라이드
• fadeIn/fadeOut슬라이드

좌/우,상/하 슬라이드의 기본

좌/우, 상/하 슬라이드는 다음과 같이 구성된다.

• 실제 슬라이드가 보이는 영역
• 슬라이드를 나열할 수 있는 띠지
• 슬라이드

띠지가 좌/우, 상/하로 움직이면서 슬라이드 되는 효과를 나타내게 된다.

fadeIn/fadeOut 슬라이드의 기본

fadeIn/fadeOut 슬라이드는 position: absolute를 이용하여 슬라이드를 공중에 띄워 하나로 겹치게 한다. 이후 보여줄 슬라이드에 fadeIn()을 주고 나머지에는 fadeOut()을 주어 슬라이드 효과를 나타낸다.

좌/우 슬라이드

!codepen[So-An/embed/MWzXVLB?default-tab=js%2Cresult&theme-id=dark]

상/하 슬라이드

!codepen[So-An/embed/MWzXRqM?default-tab=js%2Cresult&theme-id=dark]

좌/우, 상/하 슬라이드의 기본 원리는 동일하다! 슬라이드 띠지의 방향과 animate 방향만 바꿔주면 원하는 슬라이드를 만들 수 있다. 결과 화면을 보면 슬라이드 1번과 3번은 마지막 슬라이드를 만나면 첫번째 슬라이드로 돌아가는 모션이 보이고, 2번과 4번은 자연스럽게 첫번째 슬라이드가 나오는것을 확인할 수 있다.

첫번째로 돌아가는 슬라이드

let slideCount1 = 0; //현재 슬라이드 순서를 카운트하는 변수
setInterval(slideLeft1, 3000); //3초 간격으로 slideLeft1 함수 실행

function slideLeft1() {
  slideCount1++; // 함수가 실행될때마다 1씩 증가
  if (slideCount1 == 3) {
    slideCount1 = 0; // 변수값이 3이 되면 0으로 초기화(슬라이드 첫번째로 이동)
  }
  /* 0.5초의 속도로 top값 이동 */
  $(".slide-inner01").animate({ top: slideCount1 * -250 + "px" }, 500);
}

자연스럽게 이어지는 슬라이드

let slideCount2 = 0;
setInterval(slideLeft2, 3000);
/* 첫번째 슬라이드를 복제하여 slide-inner의 마지막에 추가함
   슬라이드1(0px) -> 슬라이드2(-250px) -> 슬라이드3(-500px) -> 슬라이드1(-750px) 순서가 됨*/
$(".slide-inner02 .slide").eq(0).clone().appendTo(".slide-inner02");

function slideLeft2() {
  slideCount2++;
   /* slideCount가 3이되면 top이 -750px으로 이동한 후,
   if문을 만나면서 slideCount가 0으로 초기화됨 */
  $(".slide-inner02").animate({ top: slideCount2 * -250 + "px" }, 500);
  if (slideCount2 == 3) {
    slideCount2 = 0;
    /* 0초의 속도로 top을 0px으로 이동
       맨 마지막 요소와 맨 첫번째 요소가 자연스럽게 이어지게 됨 */
    setTimeout(function () {
      $(".slide-inner02").animate({ top: "0" }, 0);
    }, 500);
  }
}

fadeIn/fadeOut 슬라이드

!codepen[So-An/embed/XWyYQvX?default-tab=js%2Cresult&theme-id=dark]

<메뉴 모음>

가로메뉴

1. 가로메뉴 - 전체 드롭다운 메뉴

!codepen[So-An/embed/GRwGyjE?default-tab=js%2Cresult&theme-id=dark]

2. 가로메뉴 - 개별 드롭다운 메뉴

!codepen[So-An/embed/gOQKoGo?default-tab=js%2Cresult&theme-id=dark]

세로메뉴

3. 세로메뉴 - 개별 드롭다운 메뉴

!codepen[So-An/embed/vYQrpWZ?default-tab=js%2Cresult&theme-id=dark]

4. 세로메뉴 - 오른쪽 TOP

!codepen[So-An/embed/vYQrpdJ?default-tab=js%2Cresult&theme-id=dark]

5. 세로메뉴 - 오른쪽 개별

!codepen[So-An/embed/vYQrpRJ?default-tab=js%2Cresult&theme-id=dark]

6. 세로메뉴 - 오른쪽 전체

!codepen[So-An/embed/mdQKpLq?default-tab=js%2Cresult&theme-id=dark]

<메인메뉴 효과>

메인메뉴에 mouseover시 하이라이트가 되고, mouseout되면 하이라이트가 사라져야 한다. 나는 아래 두가지 방법을 이용하여 작성해 보았다.

• main menu > li:hover시 a에 하이라이트 효과 주기

  <!-- CSS -->
  <style>
  .main-menu01 li:hover > a {
   background-color: blue;
   color: #fff;
  }
  </style>
  

• menu1
  • sub1-1
  • sub1-2
  • sub1-3
  • sub1-4

• menu1
  • sub1-1
  • sub1-2
  • sub1-3
  • sub1-4

```