[웹디자인공부] 음악 재생 사이트 디자인 및 코드짜기 (1)

#UI #UX #웹개발 #웹사이트디자인 #패스트캠퍼스

​

이 글은 "패스트캠퍼스" 최성일 강사님의 수업 내용을 정리한 글입니다. 웹페이지 디자인은 강사님의 디자인을 살짝 변형하여 제작하였습니다.

​

**\\글읽기 전에 잠깐!\*\***

**\*\***정보처리기사 필기** 준비중이라면?\*\***

> 정보처리기사 총정리 바로가기

웹디자인 실무연습

오늘은 인터렉티브 웹페이지 실무를 연습했다. 음악 패널을 가운데 배치하고 클릭시 재생되는 웹페이지를 만들어봤다. 오늘은 기본이 되는 상단로고, 메뉴바, 저작권표시, 패널, 앞으로가는 버튼, 뒤로가는 버튼을 제작할 것이다.

​

HTML 웹사이트 전체의 구조짜기

HTML로 웹사이트 전체 구조를 제작했다. 전체 요소를 짜임새있게 제작하려면 그에 맞는 영역을 나눠줘야 한다. 상단부분은 <header>로 묶어줬다. 중간은 패널부분은<main>으로, 제일 하단은 <footer>로 제작하였다.

​

Header

로고는 <H1>, 그 아래 설명은 <p>로 묶었다. 우측 메뉴는 클래스를 btnsMenu로 주었고 <a>를 사용하여 링크를 사용할 수 있도록 만들었다.

​

Main

패널을 <article> 8개로 만들어 둥근 원형으로 퍼지도록 만들 것이고, 각 패널마다 .inner이라는 클래스로 묶어줘야 나중에 코드짜기가 편하다느 강사님의 말을 따랐다. 근데 이게 왜 편한건지는 체감하진 못했다.<nav>로 이전 곡, 이후 곡으로 넘어갈 수 있는 버튼을 만들 것이다.

​

Footer

제일 하단에 위치한 "2022 Designed by JWORD"를 표기하기 위해 만들었다. 항상 저작권은 하단 아래 footer로 표기 중이다. 근데 강사님은 <main>안에 p테그로 따로 분류시키셨다. 뭐 상과없을 것 같다.

​

Header 영역 제작

이제 로고와 아래 간단한 소개 및 우측의 메뉴바를 만들 것이다.

​

만들기전에 전체 배경색 부터 선정해보자.

#css #background그라데이션 을 활용하여 JWORD의 상징인 푸른빛의 배경을 표현하고 싶었다. 그라디언트 컬러값을 찾기위해 구글링을 하였다. 구글검색 : gradient color numbers 를 입력 후 이미지에 들어가면 수많은 컬러 코드를 무료로 제공해준다. 마음에 드는 코드를 참고했다.

#cssgradient 속성은 다음과 같이 표기하면 된다. 웹 전체영역의 배경을 설정해야해서 body테그안에 background컬러를 입혀준다.

                                    css

body{
   background: gradient(각도,색코드, 색코드);
}

여기서 그라데이션은 background-color가 아님을 기억하자.

​

좌측 상단로고 & 소개글

이제 상단로고와 아래 짧은 소개글 위치를 배치해볼 것이다. 일단은 HTML에 다음을 입력하자. 위 사진에 표시를 안했는데 로고와 소개글은 .myName으로 묶어서 위치를 조정했다. 그냥 따로 두개를 해버리면 일을 이중으로 하기 때문이다.

                                    <header>
<div class="myName">
  <h1>JWORD</h1>
  <p>UI/UX DESIGN & DEVELOPEMENT</p>
</div>
</header>

이제 SCSS를 활용해 포지션을 배치해보자. 글자 크기와 컬러는 복잡해 보이지 않기 위해 생략했다.

                                    scss

header{
   width:100%;
   height: 300px;

  .myName{
   position:absoulte;
   left:5vw;
   top: 10vh;

  }
}

vw & vh

​

vw,vh는 css의 단위중 하나이다. 포지션을 위치시킬 때나, 글자 크기에 주로 사용 된다. 사용자가 보고있는 웹페이지의 1/100로 잘게 나눈 단위이다.

​

장점은 사용자가 이용하는 웹창의 크기가 기기에 따라, 모니터 크기에 따라 달라지는데

이에따라 글자크기나, 요소의 위치도 조정이되어서 반응형 웹에 많이 사용되고 있다.

우측 상단 아이콘

이제 우측 상단의 햄버거 버튼을 조정해보자. 우선 HTML: header> div.btns > a >i 로 묶어 주었다. --> header> a.btns> i 로 바꾸는게 더 효율적이다.

                                    HTML

<div class="btnMneu"> <a href="#"><i class="fas fa-bars"></i></a></div>

웹폰트 아이콘을 연결해야 제대로 햄버거 메뉴가 나타난다. 웹폰트 아이콘연결이 궁굼하다면 여기를 클릭하면 된다.(나중에 올림)

​

이제 위치선정을 해보자. 여기도 버튼의 크기와 컬러는 생략했다.

                                     .btnMneu{
        position: absolute;
        top: 10vh;
        right: 5vw;
}

로고 & 소개글과 동일하게 vw,vh단위를 써서 배치했다. position : absoulte는 위치선정시 필수코드이다. 나중에 css 포지션에 대해 좀 더 깊이 있게 글을 써볼 것이다.

​

여기 까지하면 header영역의 제작은 완료이다. 복잡해보이긴 하지만, 원리만 알면 공식처럼 사용할 수 있다.