cloud_kim.log

Samsung semiconductor

Thu, 22 Jun 2023 13:52:04 GMT

Point

반응형 이미지 넣기
스크롤 상승 시 보이고 내릴 땐 안 보이는 헤더 3-1. swiper pagination에 글자 넣기 3-2. 디바이스 크기별로 swiper 효과 다르게 주고싶을 때
masonry.js
클릭한 value값 input에 넣기
데이터 바인딩

1. 반응형 이미지 넣기

처음엔 img srcset으로 해보려 했으나 새로고침 후 디바이스 크기 변동하니 적용이 되지 않는 오류가 있어 현 사이트(삼성반도체) 및 타 사이트 서치 결과, figure태그 > ficture태그 > source태그를 사용 한다는 것을 알게되었다. 아래와 같이 넣으면 개발자 모드에서 디바이스 크기를 수시로 변경해도 문제없이 적용되는 모습을 볼 수 있다.

2. 스크롤 상승 시 보이고 내릴 땐 안 보이는 헤더

let lastScroll = 0;
$(window).scroll(function () {
  curr = $(this).scrollTop();
  startOffset = $('.sc-info').offset().top; //선택자 요소 크기의 top부분

  if (!$('body').hasClass('hidden')) { //body에 hidden클레스를 가지고있지 않을 때 이면서
    if (curr >= startOffset) { //현재 스크롤 된 양이 startOffset보다 같거나 클 때
      $('.header').addClass('fix'); // 헤더를 fix 해버린다!

      if (curr > lastScroll) {  // 현재 스크롤 된 양이 lastScroll보다 클 때 => 즉 0이상 일 때
        $('.header').addClass('hide') //header를 숨겨라
      } else {
        $('.header').removeClass('hide') //그렇지 않다면 보여라
      }
      lastScroll = curr; //curr값에 lastScroll값을 대입하면 

    } else { //body에 .hidden있으면 .header에 .fix 제거
      $('.header').removeClass('fix');
    }
  }
})

3-1. swiper pagination에 글자 넣기

3-2. 디바이스 크기별로 swiper 효과 다르게 주고싶을 때

해당 부분은 breakpoints라는 swiper의 내장 기능을 활용하고자 하였으나 작동하지 않음, 반복 여부나 효과 등 세부 기능은 지원하지 않아(공식문서에 기재되어있음) 아래의 방법을 사용하게 되었다.

 var menu = ['SFF & SAFE™ Forum 2023', '희망별숲', '아이소셀 포토부스', '비전', 'PIM']

let width = window.innerWidth; //내현재 윈도우창위드
let swiper; //재할당가능한변수선언문
let mainswiper; //재할당가능한변수선언문

responsiveSwiper();

function initSwiper(effect, space, view, touch) {
  if (typeof (swiper) == 'object') swiper.destroy(); // window resize시 스와이퍼 새로 만들어야 함(충돌남), 기존 스와이퍼 죽임 후 밑에서 재실행


  return swiper = new Swiper(".sc-insight .swiper", {
    effect: effect,
    slidesPerView: view,
    centeredSlides: true,
    spaceBetween: space,
    pagination: {
      el: ".sc-insight .tab-list",
      clickable: true,
      renderBullet: function (index, className) {
        return '' + (tab[index]) + '';
      },
    },
    touchRatio: touch,
  });
}

//반응형 스와이퍼 부분 각각 파라미터 순서대로 넣어주면 된다.
// 순서대로 effect, slidePerview, spaceBetween, tuchRatio의 디바이스별 적용할 효과이다.
function responsiveSwiper() {
  if (width >= 1024) { 
    initSwiper('fade', 0, 'auto', 0);
  } else if (width < 768) {
    initSwiper('slide', 16, 1.03, 1);
  } else if (width < 1024) {
    initSwiper('slide', 16, 1.03, 1);
  }
}

window.addEventListener('resize', function () {
  width = window.innerWidth;
  responsiveSwiper();
}); //윈도우 리사이즈 될 때 let width에 실제 윈도우 width 대입하고  실행

window.addEventListener("orientationchange", ()=>
    width = window.innerWidth;
    responsiveSwiper();
});// 가로모드도 resize 똑같이 대응, pc는 가로모드 개념이 없어서 동작x, 태블릿 모바일에서만 작동

5. masonry.js

핀터레스트와 같은 레이아웃을 masonry 레이아웃이라고 한다고 한다. 나는 아래의 레이아웃을 구성해보았다.


    
        
 
        
            
                
                
                    뉴스
                    삼성전자, 업계 최선단 12나노급 D랩 양산
                
            
            
                DRAM
                DDR5
                12나노 D램


.news-list {
  &::after {
      display: block;
      clear: both;
      content: '';
  } /*부모에게 float 해제*/
 }

  .gutter-sizer {
      width: 20px; /*여백 사이즈*/
  }

  .news-item {
    float: left;
    width: calc((100% - 40px)/3); /*3단 레이아웃 */
    margin-bottom: 64px;
    padding: 0 32px;

    @include tablet{
        width: calc((100% - 20px)/2);/*2단 레이아웃 */
    }
    @include mobile{ /*1단 레이아웃*/
        width: 100%;
        padding: 0 16px;
        margin-bottom: 48px;
    }
}

window.onload = function () { //자바스크립트 문서가 준비된 이후에 실행
    $('.news-list').masonry({
        itemSelector: '.news-item', //적용대상 - 대상은 div로 감싸져있어야 한다.
        gutter: '.gutter-sizer', //여백값
    });
};

6. 클릭한 value값 input에 넣기

   $('.sc-search .tag-wrap a').click(function (e) {
        e.preventDefault(); 
        keyword = $(this).text(); //클릭한 대상의 텍스트를 keyword에 담는다.
        $('.sc-search input').val(keyword);  // keyword를 value값으로 input에 넣는다.
    })

7. 데이터 바인딩

let arr = [{ //array에 값을 담는다.
            name: '제품', //대제목
            sub: [{ //소제목들
                    name: "DRAM"
                },
                {
                    name: "SSD"
                },
                {
                    name: "eStorage"
                },
                {
                    name: "오토모티브 메모리"
                },
                {
                    name: "Consumer Storage"
                },
                {
                    name: "프로세서"
                },
                {
                    name: "이미지센서"
                },
                {
                    name: "디스플레이 IC"
                },
                {
                    name: "보안 솔루션"
                },
                {
                    name: "전력관리 IC"
                },
                {
                    name: "LED",
                    arrow: true //바로가기 화살표 아이콘 유무
                }
            ]
        },
        //이하 생략
    ]

    let footerHtml = '' 
    arr.forEach(el => {
        let innerTemplate = '';

        el.sub.forEach(e => {

            isArrow = (e.arrow) ? `` : ''; 
          // 바로가기 아이콘이 true이면 해당 태그 넣고 아니면 넣지않기

            innerTemplate += `
                
                    
                        ${e.name} ${isArrow} 
                    
                ` //소제목 넣기 부분
        })

        let template = '';

        template += `
                    
                      ${el.name} //대제목 넣기 부분
                      
                      ${innerTemplate} //소제목들 넣은것
                      
                     
                      `;

        footerHtml += template; //template에 footerHtml 넣기

    })
    $('.grid-inner').html(footerHtml) // footerHtml 넣기

Amondz

Thu, 22 Jun 2023 13:43:01 GMT

Point

a태그와 button태그가 같은 영역에 있을 때
탭 클릭시 스크롤 이동

1. a태그와 button태그가 같은 영역에 있을 때

아래와 같이 a태그 안에 button이 있을 때는 a태그로 영역만 잡고 버튼을 z-index를 높여 배치할 수 있다.


   
  
  
    
      가이거주얼리
      [아몬즈 단독] 14K 컷팅 하트 목걸이 GIAM14NN003
    
    
    
      30%
      198,450원

.prod-area {
    position: relative;
    width: calc(50% - 7.5px);
}

.prod-area a {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

prod-wrap .btn-like {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

2. 탭 클릭시 스크롤 이동

    $('.tab-item').click(function () {
        var offset = $(".tab-item").offset(); //해당 요소의 좌표
        $("html, body").animate({scrollTop: offset.top},200); //offset의 top으로 부드럽게 이동
    })

Lotte Eatz

Thu, 22 Jun 2023 11:42:37 GMT

Point

swiper
데이터 바인딩
quick top button

1. swiper

양 쪽 prev, next 버튼은 보이면서 내부 컨텐츠는 overflow:hidden을 해야한다. 처음에는 이 개념이 참 어려웠다. 어떻게 해도 안되어서 머리가 아팠는데 의외로 간단히 해결이 되었다. 방법은 아래와 같다.

swiper에 부모 div를 하나 더 감싸고 position:initial을 준다.
prev, next 버튼은 .swiper-wrapper와 같은 형제 요소로 둔다.

2. 데이터 바인딩

fetch()란? 자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다.
json란? 일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식. 클라이언트가 사용하는 언어에 관계 없이 통일된 데이터를 주고받을 수 있도록, 일정한 패턴을 지닌 문자열을 생성해 내보내면 클라이언트는 그를 해석해 데이터를 자기만의 방식으로 온전히 저장, 표시할 수 있게 된다.

// 데이터바인딩 

// 각 리스트명 클릭 시 on class 삽입 
$('.sc-best .list-item').click(function(e){
  e.preventDefault();
  $(this).addClass('on').siblings().removeClass('on');
  company = $(this).find('a').data('company');

  favList(company); // 데이터 불러오기
})

    function favList(company) {
        fetch(`./assets/data/${company}.json`) //api 주소(json파일 읽어오기)
        .then(res=>res.json()) //읽어온 데이터를 json으로 데이터 타입 변환
        .then(json=>{
              // data를 응답 받은 후의 로직

            allData = json.items;

            let html=``;
            let html2=``;

              allData.forEach(el => {//forEach배열의 갯수만큼 반복문 돌림

                isBest = (el.best)?`BEST`:''; //삼항연산자, el.best가 참일경우 바로 다음에있는 ``실행 거짓이면 :뒤의 ``실행
                isReorder = (el.reorder)?`재주문 1위`:'';
                isPriceFormat = (el.price)? `${priceFormat(el.price)}원`:'';
                html+=`
                            
                                
                                    
                                        
                                    
                                    
                                       ${isBest}
                                       ${isReorder}
                                    
                                
                                
                                    ${el.title}
                                    ${isPriceFormat}
                                
                            
                        `;
            });

            const colorObj = {
                'lotte': '#EF3D2E',
                'krispy': '#1CAC68',
                'plating': '#000',
                'angelinus': '#AA9481',
            } // 브랜드별 폰트 색상  

            html2 += `
                          
                            ${json.company}  메뉴 보러가기
                            
                              
                        
                      `;
              //(브랜드명) 바로가기 영역 

            $('#favList').html(html); //#favList에 넣기 -> 출력
            $('.more-wrap').html(html2); //.more-wrap에 넣기 -> 출력
        })
    }
    favList('lotte');

// 상품 가격 원 단위 ',' 넣기
function priceFormat(price){
  return result = price.toLocaleString('ko-KR');
}

json json에선 주석을 사용할 수 없다. 마지막으로 작성하는 객체는 ,를 작성하지 않으며 숫자, true, false가 아닌 값은 ""안에 작성해주어야 한다.

{ }: 속성명이 있는 객체를 의미
[ ]: 순서가 있는 배열

{
    "company":"롯데리아",
    "items":[
        {
            "thumb":"./assets/img/best-01.png",
            "title":"불고기 버거",
            "best":true,
            "reorder":false,
            "price":4700
        },
        {
            "thumb":"./assets/img/best-02.png",
            "title":"새우 버거",
            "best":true,
            "reorder":false,
            "price":4700
        },
        {
            "thumb":"./assets/img/best-03.png",
            "title":"치즈스틱",
            "best":false,
            "reorder":false,
            "price":2400
        },
        {
            "thumb":"./assets/img/best-04.png",
            "title":"모짜렐라 인 더 버거 베이컨",
            "best":false,
            "reorder":true,
            "price":7400
        }
    ]
}

유투브 데이터 바인딩

.json파일을 불러오는것 이외 fetch()로 실제 주소값을 받아와 출력해주는 화면을 만들어 보았다.

[결과화면]

code

3. quick top button

처음엔 보이지 않다가, 스크롤 다운 시 보이고 올라갈 때 또한 ease 효과가 들어간 모습이다.

통통튀는 up 화살표 transition

.floating-wrap .btn-top i {
    display: block;
    width: 16px;
    height: 16px;
    opacity: 0;
    transform: translateY(10px);
    transition: 0.3s 0.25s cubic-bezier(0.17, 0.67, 0.29, 1.32);
}

.floating-wrap .btn-top.on i {
    transform: translateY(0);
    opacity: 1;
}

ease scrolltop 효과

$('.btn-top').click(function (event) {
  event.preventDefault();
  $('html, body').animate({ scrollTop: 0 },600, 'easeInExpo');
});

easeInExpo를 사용하려면 별도의 js를 불러와야 한다.

> js파일 바로가기

Vikiki

Wed, 21 Jun 2023 10:15:38 GMT

Point

fixed content
GSAP
반응형 GSAP

1. fixed content

하단 콘텐츠가 스크롤이 된지 한참 뒤에 올라오는 효과

다음으로 올라올 영역에 margin-top:200vh;를 넣어준다

2. GSAP

GSAP중에서도 전체적으로 scrollTrigger를 사용하였다.
코드 작성 하기 앞서 제일 상단에
gsap.registerPlugin(ScrollTrigger);
위의 코드를 적어야 사용할 수 있다.

이미지가 스크롤에 따라 scale이 줄어드는 효과

html 여러 이미지를 data-scale에 각각 보여질 크기로 작성한다.

css 제일 첫번째 이미지는 고정

.sc-intro .img-wrap .img-item:not(:first-child) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

js 여러개의 이미지 이므로 img에 대해 each문 돌리고 index가 아닌 element에 대해 trigger 한다. dataset값을 변수에 담고 scale에 넣어준다. 부드러운 스크롤 효과를 위해 scrub:1을 넣어준다 ~~(부드럽지 않길 원하면 0)~~

 $('.sc-intro .img').each(function (idx, ele) {
   scaleVal = $(this).data('scale')
   gsap.to(ele, {
     scrollTrigger: {
       trigger: '.sc-intro .title-area',
       start: '0% 100%',
       end: '100% 0%',
       scrub: 1
     },
     scale: scaleVal
   })
 })

스크롤 시 고정된 content에서 이미지 scale 및 글자 효과

html


  
    
      
        7 years
        experience 
in digital 
design
        observing
crafting
 doing stuff
      
      
        
          
            
            
            
          
          
      
        RECENT
        WORKS

스크롤되면서 바뀔 이미지를 .img-box 안에 한거번에 담는다.


gsap.set('.sc-intro2 .headline2,.sc-intro2 .headline3', {
  visibility: 'hidden'
})
gsap.set('.sticky-trigger .scroll-img2, .sticky-trigger .scroll-img3 ', {
  visibility: 'hidden'
})

const intro2 = gsap.timeline({
  scrollTrigger: {
    trigger: '.sc-intro .sticky-trigger',
    start: '20% 100%',
    end: '100% 100%',
    scrub: 1
  },
})

intro2
  .to('.sc-intro2 .headline1', {
  scale: 1.3
})
  .addLabel('a')
  .set('.sc-intro2 .headline1', {
  visibility: 'hidden'
}, 'a')
  .set('.sc-intro2 .headline2', {
  visibility: 'visible'
}, 'a')

  .set('.sticky-trigger .scroll-img1', {
  visibility: 'hidden'
})
  .set('.sticky-trigger .scroll-img2', {
  visibility: 'visible'
})


  .to('.sc-intro2 .headline2', {
  scale: 1.3
})
  .set('.sc-intro2 .headline2', {
  visibility: 'hidden'
})
  .set('.sc-intro2 .headline3', {
  visibility: 'visible'
})

  .set('.sticky-trigger .scroll-img2', {
  visibility: 'hidden'
})
  .set('.sticky-trigger .scroll-img3', {
  visibility: 'visible'
})


  .to('.sc-intro2 .headline3', {
  scale: 1.3
})
  .to('.sticky-trigger .scroll-img3', {
  scale: 0
})

순차대로 일어나야하는 이벤트이므로 gsap.timeline을 사용하였다. trigger할 부분은 position:sticky 되어있는 .sticky-trigger(길게 스크롤되어야 하므로 height 300vw) 는 에 걸어주고 2,3번째 이미지와 텍스트는 숨겨둔다. 시작지점은 콘텐츠의 20% 지점 뷰포트의 100% 지점이다.
종료지점은 콘텐츠의 100% 지점 뷰포트의 100% 지점이다. 첫번째 텍스트의 scale 1.3으로 커지게 하고, 그에 이어서 다 커진 텍스트는 숨겨진 뒤, 숨겨준 두번째 텍스트를 보이게 한다. 그와 동시에 두번째 이미지가 보이고 세번째도 위와 동일하게 한 다음 마지막스크롤이 끝날때 마지막 이미지인 3번째 이미지의 scale을 0으로 해준다.

스크롤 시 고정된 content 위로 올라오는 contents

const slidePin = gsap.timeline({
  scrollTrigger: {
    trigger: '.sc-slide',
    start: '0% -100%',
    end: '100% 100%',
    scrub: 1
  },
})

slidePin
  .addLabel('a')
  .to('.sc-slide .slide-01 img', {
  scale: 1.3
}, 'a')
  .to('.sc-slide .slide-02', {
  top: '7vw'
}, 'a')

  .addLabel('b')
  .to('.sc-slide .slide-02 img', {
  scale: 1.3
}, 'b')
  .to('.sc-slide .slide-03', {
  top: '15vw'
}, 'b')

  .addLabel('c')
  .to('.sc-slide .slide-03 img', {
  scale: 1.3
}, 'c')
  .to('.sc-slide .slide-04', {
  top: '22.8vw'
}, 'c')

  .to('.sc-slide .slide-04 img', {
  scale: 1.3
})

이 효과도 순차적으로 일어나야 하므로 gsap.timeline을 사용하였다. 시작지점 콘텐츠의 0%, 뷰포트의 -100%인 이유는 이미 이전 콘텐츠가 보여지고 있어야 하므로 -100%이여야 한다. 순차적으로 일어나면서 같이 일어나야 하는것들은 .addlabel로 묶어주었다. scale이 기존보다 커지면서, 올라와서 고정되는 위치의 top값을 적어주었다.

스크롤 시 글자 가로로 나타나기

gsap.set('.sc-awards .em-list .em-box',{
  opacity:0,
  xPercent:10
})

gsap.to('.sc-awards .em-list .em-box', {
  scrollTrigger: {
    trigger: '.sc-awards .em-list',
    start: '0% 100%',
    end: '100% +=700px',
    scrub: 0
  },
  opacity:1,
  xPercent:0,
  stagger:0.2
})

문자들을 .set으로 opaticy와 xPercent를 설정해준다.(각각 0, 10) 이후 문자들을 감싼 .em-list에 trigger를 해준 뒤 opacity:1, xPercent:0을 해준다. stagger는 각 요소 시작 시간사이에 0.1초가 있게 하는 것이다.

스크롤 시 글자 세로로 슬라이드

gsap.to('.sc-awards .scroll-area .scroll-box .absolute-wrap',{ 
  scrollTrigger:{
    trigger:'.sc-awards .scroll-area',
    start:"0% 50%",
    end:"100% 50%",
    scrub:0,
  },
  top:'100%',
  yPercent:-100,
  ease:'none'
})

$('.sc-awards .scroll-wrap .scroll-list').each(function (idx,ele){

  fontClass = ['a1', 'a2', 'a3']
  fontText = ['key','special','crush']
  fontText2 = ['skils','expertise','things']

  ScrollTrigger.create({
    trigger: ele,
    start: '0% 50%',
    end: '100% 50%',
    scrub: 0,
    onEnter:function(){
      $('.sc-awards .absolute-wrap p').text(fontText[idx]).removeClass('a1 a2 a3').addClass(fontClass[idx]);
      $('.sc-awards .absolute-wrap.text2 p').text(fontText2[idx])
    },
    onEnterBack:function(){
      $('.sc-awards .absolute-wrap p').text(fontText[idx]).removeClass('a1 a2 a3').addClass(fontClass[idx]);
      $('.sc-awards .absolute-wrap.text2 p').text(fontText2[idx]);
    },
  })
})

제일 부모를 trigger한다. 스크롤되며 같이 내려갈 문자는 yPercent:-100해준다. ease를 none 해주어 부드러운 효과를 제거해준다.

각각의 문자들이 담겨있는 리스트의 부모인 .scroll-list를 each문으로 돌린다. 각각 스크롤 시 변경될 text를 array에 담는다. trigger는 각각의 element이다. 시작 지점은 콘텐츠의 0%, 뷰포트의 50% 종료 지점은 콘텐츠의 100%, 뷰포트의 50%이다. 이벤트 발생 위치에 도달했을 때 텍스트를 array에 들어 있는 text 대로 트리거 된다! fontClass는 font-family에 대한 부분이다.

toggleAction 구성

onEnter : 이벤트 발생 위치에 도달
onLeave : 이벤트 발생 위치를 떠남
onEnterBack: 스크롤을 다시 올려 이벤트 발생 위치에 도달
onLeaveBack: 스크롤을 다시 올려 이벤트 발생 위치를 떠남

스크롤 시 이미지 나타나기

gsap.set('.sc-awards .awards-item',{
  scale:0
})

$('.sc-awards .awards-item').each(function(idx,ele){
  const playMotion2 = gsap.timeline({
    scrollTrigger: {
      trigger: ele,
      start: '0% 100%',
      end: '100% 100%',
      scrub: 1,
    },
  })
  playMotion2
    .to(ele, {
    scale: 1,
  })
})

기존 이미지들은 scale:0으로 안보이게 한다. 각각의 element에 대해 each문을 돌린다. trigger는 element에 걸어준 다음 scale을 1로 키운다.

스크롤 시 텍스트 및 이미지 나타나기

const letTxt = new SplitType('.sc-contact .title-wrap h3', {type:'words, chars'})
// 글자 쪼개기

gsap.set(letTxt.chars,{
  opacity:0,
  xPercent:100
})
//쪼갠 글자들 오른쪽으로 보내버리고 투명도 0

$('.sc-contact .title-wrap h3').each(function(idx,ele){
  gsap.to($(this).find('.char'),{
    scrollTrigger: {
      trigger: '.sc-contact .title-wrap',
      start: '20% 50%',
      end: '100% 100%',
      scrub:1,
    },
    opacity:1,
    xPercent:0,
    stagger:0.01
  })
})
//쪼갠 글자들을 감싼 부모에게 trigger걸어주고 투명도 1, x축 위치 원상복귀, stagger 주기


gsap.set('.sc-contact .title-wrap .img-box img',{
  scale:0,
}) 
//스크롤 트리거 할 이미지 scale 0으로 줄여놓기

gsap.to('.sc-contact .title-wrap .img-box img',{
  scrollTrigger: {
    trigger: '.sc-contact',
    start: '0% 60%',
    end: '100% 100%',
    scrub:0,
  },
  scale:1,
})
//scale로 키워주기 -> 이미지가 가운데서부터 커진다면 transform-origin으로 조절해줄 수 있다!

3. 반응형 gsap

내가 원하는 브라우저 크기에서만 스크립트가 실행되기 원한다면 아래와 같이 작성해줄 수 있다.

  ScrollTrigger.matchMedia({
    "(min-width: 992px)": function() {
        //여기에 작성
    })

    "all": function() {
          //여기에 작성
      })

  })

NAVER Career

Tue, 20 Jun 2023 15:06:24 GMT

Point

swiper
이미지 크기
transition
label select

1. swiper

영역을 벗어난 swiper를 보이게 해야한다. 아래의 이미지에서 빨간 상자 영역이 컨텐츠 영역 밖이다.

html
```
  
      
        ...
        
```

컨텐츠 안쪽 여백

.inner { position: relative; max-width: 1408px; margin: 0 auto; padding: 0 104px; }

swiper
```
.swiper{overflow:initial}
.swiper-wrapper{overflow:hidden}
```
2. 이미지 크기

이미지 크기를 px로 해버리면 줄어들지 않는다. 반응형 사이트에서의 이미지를 padding-bottom으로 조절할 수 있다.
html
```
  
```

css

.swiper-slide .img-wrap {
  position: relative;
  padding-bottom: calc((520/1097)*100%);
} /* 실제 보여질 이미지 사이즈 나눈값을 100%에 곱한다 */

.swiper-slide .img-wrap img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } /* 내부 이미지는 맞춰서 조절될 수 있게 꽉 채워준다. */

## 3. transition
기존 사이트는 animation으로 되어있었는데, transition으로 변경하여 코드를 줄이는 방향으로 개선해보았다. 

- 기존 사이트 
```css
.spot [class^=spot_text] {
    animation: fade-out 0.2s linear forwards;
}

.spot .swiper-slide.swiper-slide-active .spot_content .spot_text {
    opacity: 0;
    animation: wave-in 0.3s ease-out forwards, fade 0.8s linear forwards;
    animation-delay: 0.8s;    
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes wave-in {
  0% {
    width: 0%;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 100%;
  }
}

변경 후

.swiper-slide .text-wrap h3 { 
width: 0; 
opacity: 0; 
transition: width 0.3s 0.8s, opacity 0.8s 0.8s; 
}

.swiper-slide-active .text-wrap h3 { opacity: 1; width: 100%; }


## 4. label selection
라벨 선택 시 전체 선택, 해제 시 전체 해제 되어야 하는 부분
![](https://velog.velcdn.com/images/cloud_kim/post/fbb3dbee-227a-4ecf-987d-1cff6679305f/image.gif)
```html

    직군/직무
    
        
            
              Tech
             
                
                    
                    전체
                 
                 
                     
                    Software Development
                    
                        
                            
                            Frontend

  전체 label을 data-box=".box"로 지정
하위 label은 class="box"
전체 label 클릭시 하위 label 선택 되게 한다.

// 전체label  누르면 한번에 선택하기
$('.sub-all label').each(function (idx, el) {
  $(el).click(function () {
    box = $(this).data('box');
    if ($(this).siblings().prop('checked')) {
      $(box).find('input').prop('checked', false)
    } else {
      $(box).find('input').prop('checked', true)
    }
  })
})

전체 label : siblings인 Input이 이미 체크 된 상태이면 전체 label 클릭시 .box 내부의 개별 input 체크 해제

Andar

Tue, 20 Jun 2023 13:14:57 GMT

Point

재 사용하면 좋은 것들
스크롤 시 나타나는 header
hamburger menu
quick button
개선방안

1. 재 사용하면 좋은 것들

svg svg를 색상 등 변형하여 재사용 할 경우 태그로 넣지 않고 svg소스로 넣어 사용한다.

(예시)

svg {fill:#000}

화살표 이미지 클릭 시 메뉴가 펼쳐지면서 버튼이 회전이 되거나, 스와이퍼의 다음,이전 버튼은 한 이미지로 회전하여 사용한다.

(예시)

.nav-item .nav-box.on::after {transform: rotate(-135deg);}

스크롤 다운 시 나타나고, 최상단 도달 시 다시 사라지는 header

$(window).scroll(function () {
    curr = $(this).scrollTop();
        if (curr > 0) {
            $('.header-inner').addClass('fixed')
        } else {
            $('.header-inner').removeClass('fixed')
        }
})

$(window).trigger('scroll');  // 페이지 스크롤 다운된 상태에서 새로고침 시 헤더 보이지 않는 현상 -> 스크롤 강제 발생시킨다.

아코디언 메뉴

$('.nav-box').click(function (e) {
    e.preventDefault();
    $(this).toggleClass('on').siblings('.item-sub').slideToggle();
})

a태그의 새로고침 방지 - e.preventDefault();
메뉴의 down img 180deg 회전 - toggleClass
아코디언 메뉴 하위 요소들 보이기 - slideToggle

메뉴 외 영역 클릭 시 닫기

$(document).click(function (e) {
  if ($('header').has(e.target).length == 0) {
      $('.side-nav').removeClass('on')
      $('body').removeClass('hidden')
  }
})

클릭한 곳 기준 header에 e.target 존재하지 않으면 클래스 제거

메뉴 열렸을 때, body에 overflow:hidden 추가 메뉴가 열렸을 때 바깥 영역 스크롤 방지
```
  .hidden{oveflow:hidden}
```

4. quick button

스크롤을 내리면 없어지고 올리면 나타나는 퀵메뉴

let lastScroll = 0;

$(window).scroll(function(){
    curr = $(this).scrollTop();

    if (curr > lastScroll) {
        $('.quick-wrap').addClass('hide');
    } else {
        $('.quick-wrap').removeClass('hide');
    }

      lastScroll = curr;
})

lastScroll의 값을 0으로 한다. curr에 스크롤 값을 담는다. 스크롤 시 curr의 값이 lastscroll보다 크면 숨기고, 그렇지 않다면 보인다. 그런 후에 curr의 값을 lastscroll에 대입한다.

5. 개선방안

- 슬라이드 텍스트 배치

슬라이드 텍스트 위치는 고정값으로 배치하는게 모바일 적응형 환경에 적합해 보인다.(모바일/태블릿)

[기존 안다르]

[개선 후]

- h1 태그의 사용

h1 태그는 header의 로고나 중요한 곳에서 단 한 번만 사용한다. 각 용도에 맞는 태그로 변경해 주었다.

[기존 안다르]

[개선 후]

- svg 사용

위에서 언급했듯이 svg는 색상 변경이 있을 경우 img 태그가 아닌 svg코드로 넣는 것이 편리하다. 기존의 안다르 사이트는 background이미지 사용으로 두개의 파일을 사용하였는데, 개선 후 svg 코드로 넣은 뒤 fill로 색상 조절하는 것으로 수정하였다.

[기존 안다르]

[개선 후]

NAVER

Tue, 20 Jun 2023 06:23:28 GMT

Point

시멘틱 마크업
class 네이밍 규칙
IS/IR 기법

1. 시멘틱 마크업

시멘틱 마크업은 글자 그대로 해석하면, '의미론적인 HTML 태그 문서 작성'을 뜻합니다. 즉, 의미를 잘 전달 할 수 있도록 HTML 태그 문서를 작성하는 것을 말합니다.

📌 사용시 장점

가독성이 좋아 유지 보수가 편리하다. 태그 이름으로 영역 확인 가능
검색 엔진 최적화(SEO)에 유리하다. 검색 엔진이 태그 목적에 부합하게 설계되어 있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결과 노출에 유리할 수 있게 한다.
웹 접근성에 효율적이다.
- 스크린리더 환경에서 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있다.
  📌 사용 방법
헤더/푸터
메인 컨텐츠
```
  
```

- 내비게이션 - 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획. 자주 쓰이는 예제는 메뉴, 목차, 색인이다.

- 독립적인 요소(article) - 블로그 및 SNS 영역, 뉴스, 신문 논평에 사용

- 최상위 제목 - h1

- 사이트의 정보 및 연락처 기입 - address

- form/fieldset/legend

``` - 이외 태그 사용 ```

태그

Thu, 15 Jun 2023 16:39:36 GMT

- 제목 및 타이틀 - 단어 강조 - 문장 강조- 긴 문장 - 의미 없는 단어 alt에 설명 없으면 ="" 뺴기

[css] 말줄임

Wed, 24 May 2023 02:38:02 GMT

display: -webkit-box; overflow: hidden; max-height: 40px; line-height: 20px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; white-space: normal;

내가 보려고 만든 단축키 목록

Wed, 24 May 2023 02:21:34 GMT

vscode

[화면분할]

화면 수직 분할: Ctrl + K Ctrl + \

화면 분할: Ctrl + \

맥은 ctrl 대신 cmd

github desktop

[vscode]

켜기 : Ctrl + Shift + A

230502_기록

Tue, 02 May 2023 14:39:38 GMT

aria-label

HTML요소에 접근 가능한 설명용 텍스트를 넣을 수 있다.

화면에 현재 요소를 설명할 텍스트가 없을 경우에 사용하는 설명용 텍스트를 담고있다.

aria-hidden:true

HTML요소에 접근 가능한 설명용 텍스트를 넣을 수 있다.

웹페이지 제작자는 웹 페이지의 일부 콘텐츠를 숨길 필요가 있습니다. 대표적으로, 버튼을 클릭했을 때 관련 콘텐츠가 펼쳐지거나, 탭 위젯에서 탭을 활성화하는 등 사용자가 페이지에서 컨트롤과 상호작용한 후 불필요한 콘텐츠 등이 될 수 있습니다. 콘텐츠를 숨기는 대표적인 기술로는 CSS의 display:none, visibility:hidden 등이 있습니다. 이러한 기술은 웹페이지에서 콘텐츠가 보이지 않도록 시각적으로 콘텐츠를 숨길 뿐만 아니라 스크린 리더와 같은 보조기술로도 탐색할 수 없습니다. aria-hidden은 스크린 리더와 같은 보조 기술을 사용하는 사용자를 대상으로 콘텐츠의 탐색을 제한합니다. aria-hidden이 "true"로 설정되면, 스크린 리더로 해당 콘텐츠를 가상 커서로 탐색할 수 없습니다.

cloud_kim.log

Samsung semiconductor

분류

Point

1. 반응형 이미지 넣기

2. 스크롤 상승 시 보이고 내릴 땐 안 보이는 헤더

3-1. swiper pagination에 글자 넣기

3-2. 디바이스 크기별로 swiper 효과 다르게 주고싶을 때

5. masonry.js

6. 클릭한 value값 input에 넣기

7. 데이터 바인딩

${el.name}

Amondz

분류

Point

1. a태그와 button태그가 같은 영역에 있을 때

2. 탭 클릭시 스크롤 이동

Lotte Eatz

분류

Point

1. swiper

2. 데이터 바인딩

유투브 데이터 바인딩

3. quick top button

Vikiki

분류

Point

1. fixed content

2. GSAP

이미지가 스크롤에 따라 scale이 줄어드는 효과

스크롤 시 고정된 content에서 이미지 scale 및 글자 효과

스크롤 시 고정된 content 위로 올라오는 contents

스크롤 시 글자 가로로 나타나기

스크롤 시 글자 세로로 슬라이드

스크롤 시 이미지 나타나기

스크롤 시 텍스트 및 이미지 나타나기

3. 반응형 gsap

NAVER Career

분류

Point

1. swiper

2. 이미지 크기

Andar

분류

Point

1. 재 사용하면 좋은 것들

2. 스크롤 시 나타나는 header

3. hamburger menu

4. quick button

5. 개선방안

- 슬라이드 텍스트 배치

- h1 태그의 사용

- svg 사용

NAVER

분류

Point

1. 시멘틱 마크업

📌 사용시 장점

📌 사용 방법

2. class 네이밍 규칙

✅ 각 계층별 class 네이밍 규칙

📌 각 태그별 클래스 명

3. IR&IS 기법

네이버의 IR기법

IS기법 예시

태그

[css] 말줄임

내가 보려고 만든 단축키 목록

vscode

github desktop

230502_기록

aria-label

aria-hidden:true