UI 프로젝트발행일 2022. 7. 16.원본 https://blog.naver.com/jword_/222811718275 ↗

[웹페이지제작] 자바스크립트 innerText를 활용하여 글자넣기(8)

[웹페이지제작] 자바스크립트 innerText를 활용하여 글자넣기(8) — #웹페이지제작 #자바스크립트innerText #csscursor 웹사이트 디자인 소개 및 학습목표 디자인소개 패스트 ...

#Music Player#Naver Blog

#웹페이지제작 #자바스크립트innerText #csscursor

웹사이트 디자인 소개 및 학습목표

디자인소개

패스트 캠퍼스 "최성일"강사님의 강의를 듣고 내용정리를 한 것 입니다. 디자인은 강의의 템플릿을 아주 살짝 변형하였습니다. 모든 디자인 저작권은 강사님께 있습니다.

학습목표

음악패널안에 들어갈 텍스트와 아이콘을 삽입하자
자바스크립트 createElement를 이용하여 각패널에 오디오를 넣어보자

사용하는 언어

HTML

.txt 클래스를 만들어 패널 안쪽에 텍스트와 아이콘을 삽입한다.

CSS

패널에 들어간 텍스트와 아이콘을 정렬한다.

배열과 innerText를 활용하여 각 패널에 제목을 한번에 넣는다.

HTML

html 코드 예제

                                    <body>

<main>
  <article class="on">
    <div class="inner">
       <!-- .pic생략 -->

       <div class="txt">
           <h2></h2>
           <p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
           <ul>
                   <li class="pause"><i class="far fas fa-pause"></i></li>
                   <li class="play"><i class="fas fa-play"></i></li>
                   <li class="load"><i class="fas fa-redo-alt"></i></li>
              </li>
          </ul>
       </div>
      </div>
  </article>
</main>

</body>

.pic의 형제요소로 .txt를 만들어 준다.

h2 테그는 내부를 비워둔다. 자바스크립트를 이용하여 넣을 것이다.
아이콘은 정지,재생,리플레이 모양 아이콘을 넣어준다. .pause / .play / .load 클래스를 준다.-> 나중에 자바스크립트를 이용할 것

h2,p, li 등 블록요소이다 보니 자동 줄바꿈이 되서 보기에 별로다 CSS를 조정하여 모양을 만들어주자.

CSS

.txt 모양 잡아주기

css 코드 예제

                                    .txt {
     width: 100%;
     text-align center
}

txt큰틀

text-align: center;을 활용하여 세로정렬을 우선 헤준다

css 코드 예제

                                    .txt {
    p{
      font: 14px/1.2 'arial';
      color: #777;
      margin-bottom: 3vh;
    }

   ul{
     display:flex;
     justify-content: space-around;

  }
}

p테그 ul테그 모양 잡아주기

P테그

font : 14px/1.2 'arial' (자주 나오니 외우면 도움 될 듯)

ul테그

display : flex; // 아이콘 세로정렬
justify-content : space-around ; // 양 끝에 여백을 두며 일정한 간격 균등배치

scss 코드 예제

                                    .txt {

   ul{
     display:flex;
     justify-content: space-around;
     li{
         cursor: pointer;
         opacity: 0.6;
         transition: 0.5s

           &.play{
              transform: scale(1.5);
              opacity: 0.9;
           }

           &:hover{
               transform: scale(1.5); opacity:0.8;
               &.play{
                transform: scale(2); opacity: 1;
               }
            }
       }
   }
}

li테그 , 아이콘 디자인 수정

cursor:poniter; // li테그에 마우스를 올리면 마우스가 바뀜: 버튼처럼 만들기
opacity: 0.6; //살짝 흐리게 만들기
transition: 0.5s // scale up 할 때 부드럽게 하기 위해 속도 부여

.play

scale & opacity 조절//play 버튼을 다른 아이콘보다 좀 더 크게구현

:hover(마우스 포인트가 올라갔을 때)

전체적으로 scale 더크게 opacity 더 선명하게 조정
.play는 다른 아이콘보다 더 크게 조정

JS

javascript 코드 예제

                                    const list = frame.querySelector("article") //list= 패널 하나 하나
const names=["Blizzards", "Calm", "Dusty_Road", "Escape", "Payday", "Retreat", "Seasonal", "Vespers"];

names.forEach((name, index)=>{
  const h2 = list.querySelector(".txt h2")
  h2.innerText = names[index];

})