7월14일40일차 - 회전글씨, DOM컨트롤(tab menu), 웹코딩3(의류)

이번에 웹코딩은 스틱키 연습을 목표로 하면서 지식이 많이 늘었습니다.

항상 새로운 것을 배우는 것이 재밌습니다.

[220712의류웹코딩] [ html / css / js ]

이번 웹코딩 목표였던 sticky로 구현한 화면입니다.

---

회전하는 글씨를 구현했습니다. 새롭게 배우는 내용이 많습니다.

rotateX를 이용하면 대상을 눕힐 수 있습니다.

rotateX(90deg);

90도로 설정하게 되면 가로로 완전히 눕게 되며 높이가 사라지게 됩니다.

    $(function () {

      const circleText = (txt, h) => {

 

텍스트를 원형으로 만드는 방법은 (360도 / 글자의 길이)로 글자를 rotate 시키면 됩니다. 

10개의 글자가 있다면 첫번째 글자는 0도를 회전시키고, 두번째는 36도, ..., 마지막은 360 - 36도 만큼회전시킵니다. 

        const TXT = [...txt];

        const DEG = 360 / TXT.length;

 

forEach로 각각의 el에 span을 추가해준 다음 각각의 span을 구한 각도(DEG) * idx만큼 회전을 시킵니다.

        TXT.forEach((ele, idx) => {

          $(`<span>${ele}</span>`)

            .css({

              position: `absolute`,

              top: 0,

              left: `50%`,

              height: h,

              transform: `rotate(${DEG * idx}deg)`,

              transformOrigin: `0 100%`,

            })

            .appendTo($(`.circle`));

        });

      };

      circleText("WEARETHEWORLD", 100);

    });

---

js로 DOM을 다루는 방법도 배웠습니다.

• menu01
• menu02
• menu03
• menu04
• menu05

위와 같이 li가 5개 있습니다.

각각의 li(el)는 클릭을 하면 모든 li의 'on' class를 지웁니다.

그리러고 나서 클릭한 대상 li에 'on' class를 부여합니다.

            LI.forEach(function (el, idx) {

                el.addEventListener('click', function (event) {

                    event.preventDefault();

                    LI.forEach(function (el) {

                        el.classList.remove('on')

                    })

                    el.classList.add('on');

                    console.log(event.target, event.currentTarget, this)

                })

            });

 

이번에는 각각의 li를 클릭하면 출력되는 내용이 달라지는 tab 메뉴를 구현합니다.

• menu01
• menu02
• menu03
• menu04

content01

각각의 메뉴(el)를 클릭하면 모든 li의 'on' class를 지웁니다.

그리고 해당 리스트에는 'on' class를 부여합니다.

content도 마찬가지로 모든 'on' class를 지우고 선택한 li의 idx와 같은 content idx에는 'on' class를 부여합니다.

            TLI.forEach((elm, idx) => {

                elm.addEventListener('click', () => {

                    TLI.forEach(el => el.classList.remove('on'));

                    elm.classList.add('on');

                    TCONTENT.forEach(el => el.classList.remove('on'))

                    TCONTENT[idx].classList.add('on');

                })