[front-end] 영화 소개 사이트 만들기

html, css, js 2023. 3. 14. 23:58

그동안 공부했던 HTML, CSS, JS를 이용하여 나만의 영화 소개 사이트를 만들어보았다.

레이아웃 형태로 네모네모하게 만들어 보았다. 근데 만들고 보니 문제점이,, px로 웹사이트 크기를 설정하다보니 사이트에 빈공간이 많아져서,,ㅎㅎ 또 모바일로 켰을땐 아예 pc버전으로 보는거같을정도로 이질감이 느껴졌다. 찾아보니 뷰포트로 구현을 해야 기기에 맞게 웹사이트 크기가 조절된다고 한다. 나중에 시간이 생기면 수정해보는걸로 하고,, 일단 허접하긴 해도 사이트다운 사이트를 만든것에 의의를 둔다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LEE MOVIE</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id = "container">
    <header>
      <div id ="logo">
          <a href="index.html"> 
            <h1>영화소개 사이트 LEE MOVIE</h1>
          </a>
      </div>
      <nav>
        <ul id="topMenu">
          <li><a href='#1'>marvel <span>▼</span></a>
            <ul>
              <li><a href='https://namu.wiki/w/%EC%96%B4%EB%B2%A4%EC%A0%B8%EC%8A%A4(%EC%98%81%ED%99%94)'>어벤져스</a></li>
              <li><a href='https://namu.wiki/w/%EB%8B%A5%ED%84%B0%20%EC%8A%A4%ED%8A%B8%EB%A0%88%EC%9D%B8%EC%A7%80:%20%EB%8C%80%ED%98%BC%EB%8F%88%EC%9D%98%20%EB%A9%80%ED%8B%B0%EB%B2%84%EC%8A%A4'>닥터 스트레인지 2</a></li>
              <li><a href='https://namu.wiki/w/%EC%8A%A4%ED%8C%8C%EC%9D%B4%EB%8D%94%EB%A7%A8:%20%EB%85%B8%20%EC%9B%A8%EC%9D%B4%20%ED%99%88'>스파이더맨 3</a></li>
            </ul>
          </li>
          <li><a href='#2'>diseny <span>▼</span></a>
            <ul>
              <li><a href='https://namu.wiki/w/%EC%A3%BC%EB%A8%B9%EC%99%95%20%EB%9E%84%ED%94%84'>주먹왕 랄프</a></li>
              <li><a href='https://namu.wiki/w/%EC%9D%B8%EC%82%AC%EC%9D%B4%EB%93%9C%20%EC%95%84%EC%9B%83?from=%EC%9D%B8%EC%82%AC%EC%9D%B4%EB%93%9C%EC%95%84%EC%9B%83'>인사이드 아웃</a></li>
              <li><a href='https://namu.wiki/w/%EC%A3%BC%ED%86%A0%ED%94%BC%EC%95%84'>주토피아</a></li>
            </ul>
          </li>
        
        </ul>

      </nav>
    </header>
    <div id="slideShow">
      <div id="slides">
        <img src="./images/어벤져스.jpeg" alt="">
        <img src="./images/주먹왕랄프.jpeg" alt="">
        <img src="./images/라라랜드.jpeg" alt="">
        <img src="./images/드길.jpeg" alt="">
        
      </div>
    </div>

    <div id = "contents">
      <div id ="links">
        <ul>
          <li>
            <a href='./preview.html'>
              <span id ="quick-icon1"></span>
              <p>사이트 소개</p>
            </a>
          </li>
          <li>
            <a href='https://www.cgv.co.kr/'>
              <span id ="quick-icon2"></span>
              <p>cgv 예매</p>
            </a>
          </li>
          <li>
            <a href='https://www.lottecinema.co.kr/NLCHS'>
              <span id = "quick-icon3"></span>
              <p>롯데시네마 예매</p>
            </a>
          </li>
          <li>
            <a href='https://www.megabox.co.kr/'>
              <span id = "quick-icon4"></span>
              <p>메가박스 예매</p>
            </a>
          </li>
          <li>
            <a href='#9' onclick="alert('아직 개발중입니다.')">
              <span id = "quick-icon5"></span>
              <p>요청 게시판</p>
            </a>
          </li>
        </ul>

      </div>
    </div>

    
  </div>
  
<script src="./slideshow.js"></script>

</body>
</html>

main HTML

<header> , <div>태그 이용하여 3단 레이아웃 형태로 구성했다.
각 요소에는 a태그를 사용하여 링크로 연결되도록하였고, 상세페이지 까지 만들어볼려했으나 시간이 부족해서 나무위키사이트로 이동하게끔 구현했다. 추후에 영화 소개 부분도 직접 상세페이지를 만들어서 구성해볼 예정이다.

첫번째 레이아웃인 <header>부분에는 사이트 이름인 로고와, 네비게이션태그를 이용해 구성하였다.
두번째 레이아웃은 이미지 4개를 설정해 슬라이드쇼로 구현하였는데 , 이때 js를 사용했다.
세번째 레이아웃은 퀵링크 메뉴로 총 5개의 메뉴가 있으며 각각 클릭가능하다.

사이트 소개 메뉴는 직접 상세페이지를 만들어서 간략하게 해당 사이트가 어떤 사이트인지 소개하는 식으로 작성하였다. 깃허브로 치면 md파일 정도와 비슷한 용도이다.
영화 소개 사이트니까,, 사용자가 소개해준 영화에 흥미가 생기면 바로 예매할수있도록 영화 3사 링크 바로가기를 만들었다.
요청게시판은 백엔드 영역으로 스프링을 통해 구현할 예정이있으며, 현재는 js이용해서 클릭했을때 '아직 준비중' 이라는 문구가 나오도록 설계했다.

상세페이지 html

첫번째 프로젝트다보니,, <style>태그로 HTML문서에 바로 스타일을 입혔다.
후에 상세페이지 늘어나게 되면 따로 css파일을 만들어서 관리해야할것이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">    
  <title>LEE MOVIE에 대하여</title>
  <style>   
		#container{
      background: white url('./images/LEE.png') 100% 20%;
			margin:0 auto;	
			width:750px;
			height:150vw;
			border:1px dotted gray;
			padding:20px;
      
		}
		img {	
			margin:30px 10px 30px 180px;
		}
		h1 {
      background: #004344;
      color: white;
			text-align:center;
			padding:20px;
		}
		h2 {
      color: darkgreen;
			text-align:center;
			font-style:italic;
      margin-top:100px;
			margin-bottom:50px;
		}
		h3 {
			color:darkgreen;
		}
		ul{
			margin:20px;
      
		}	      
		li {
			line-height:30px;
		}
    body{
      background: #02233b;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>LEE MOVIE(demo.)</h1>
    <h2>LEE MOVIE는 영화 소개 사이트입니다.</h2>
    <article>
      <h3>이용방법</h3>
      <ul>
        <li>우측 네비게이션 메뉴를 통해 영화소개 페이지로 진입할 수 있습니다.</li>
        <li>퀵메뉴를 통해 영화 예매 사이트로 이동할 수 있습니다.</li>
        <li>요청 게시판을 통해 궁금한 영화를 요청할 수 있습니다.</li>
        
      </ul>
      <h3>업데이트 계획</h3>
      <ul>
        <li>요청 게시판 추가할 예정입니다.</li>
        <li>소개 영화 추가할 예정입니다.</li>
        <li>현재는 나무위키 영화소개 페이지로 이동되고 있으나, <br>추후에 직접 상세페이지를 만들어 링크할계획입니다.</li>
      </ul>
    </article>
  </div>
</body>
</html>

css

로고와 네비게이션은 float을 이용해 플로팅해서 서로 간섭이 없게끔 하였음
로고 영역에 제목 부분은 구글폰트를 이용
직계 자식 선택자, 자식선택자 이용했음
:hover이용해 마우스 올릴떄 색깔 바뀌게 하였음
슬라이드 쇼 영역에서는 플로팅을 해제하였음 position 속성 이용해서 크기 조정
퀵링크영역에서 다시 float:left하였음
나머지는 그냥 자잘한 크기 ,글자 , 색깔 조정들

/*구글 폰트에서 가져온 폰트 정보 */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');


*{
  margin: 0; /*마진값 초기화*/
  padding: 0; /*패딩값 초기화*/
  box-sizing: border-box; /*박스 영역은 테두리까지*/
  
}

a{
  text-decoration: none; /*밑줄 없애기*/
}
ul{
  list-style: none; /*ul 태그의 블릿 기호를 없애줌 */

}
#container{
  margin: 0 auto;  /*화면 중앙에 배치*/
  width: 1200px;
  
}



/*헤더 영역*/
header{
  width: 100%;
  height: 100px;
  background-color:black;
 }

/*로고 영역*/
#logo{
  float: left;  /*왼쪽으로 플로팅*/
  width: 400px;
  height: 100px;

  /*logo내 h1태그를 위해 추가하는 스타일*/
  line-height: 100px; /*height값과 같게 만들면 세로로 중간에 오도록 맞춰진다.*/
  padding-left: 20px;/*왼쪽 여백 추가*/
}

#logo h1{ /* logo태그의 자식태그 h1 에 스타일 적용 */
  font-family: 'Nanum Pen Script', cursive;
  font-weight: 700; /*굵기*/
  font-size: 40px; /*크기*/
  color:#fff; 
  text-shadow: 0 -1px 0 #222; /*그림자*/
}
/*네비게이션 영역*/
nav{
  float: right;  /*오른쪽으로 플로팅*/
  width : 700px;
  height: 100px;
  padding-top: 40px;
 }

 #topMenu{
  height:60px;
 }
 #topMenu > li{ /*직계 자식 선택자*/
  float:left;
  position: relative; /*서브 메뉴를 absolute로 만들기 위한 부모 요소 relative지정 */

 }
 #topMenu >li >a{
  display:block;
  color:#fff;
  font-weight: 600;
  text-shadow:0 1px #07c;
  padding: 20px 60px;
 }
 #topMenu >li > a >span{
  font-size: 0.5em;
 }

 /*마우스 포인터를 올릴때 스타일 지정 */
 #topMenu > li > a:hover{
  color: #000;
  text-shadow: 0 -1px #07c;
 }

 #topMenu > li > ul{
  display :none; /*처음에는 서브메뉴 감춤*/
  position : absolute;
  width: 160px;
  background-color: rgba(255,255,255,0.6);
  left: 20px; /*서브 메뉴 위치를 오른쪽으로 20px 옮김 */
  margin: 0;
 }

 #topMenu > li > ul > li{
  padding:10px 10px 10px 30px;
 }

 #topMenu > li > ul > li > a{
  font-size:14px;
  padding: 10px;
  color: #000;
 }
 #topMenu >li:hover > ul{
  display: block;
  z-index: 1; /* 문서의 수직배치, 앞에둘껀지 뒤에둘껀지*/

  
 }
#topMenu > li > ul >li > a:hover{
  color: #f00;
}


/*이미지 슬라이드 쇼 영역*/
#slideShow{
    clear: both; /*플로팅 해제*/
    width: 100%;
    height: 650px;
    overflow: hidden; /*영역 넘치면 감춤 */
    position:relative;
  }


#slides{
  position: absolute;
}
#slides > img {
  width: 100%;
  float: left; /*가로로 배치 */
}



/*콘텐츠 영역*/
#contents{
  width: 100%;
  height:250px;

 }


/*퀵 링크 영역*/
#links{
    float: left;
    width:100%;
    height:100%;
    
    background: black;
   }
#links ul{
  padding: 0;
  overflow: hidden;
}
#links ul li {
  float: left;
  width: 20%;
  text-align: center;
  margin: 10px 0;
}

#links ul li a span{
  display:block;
  margin: 0 auto; /*가운데 배치*/
  width : 150px;
  height: 150px;
  border-radius: 100%; /* 테두리 둥글게 지정 */
  border: 1px solid #ddd;
  line-height: 150px; /*수직방향 중간으로 오게*/
  margin-top: 20px;
}

#quick-icon1{
  background-image:url('./images/어벤져스.jpeg');
}
#quick-icon2{
  background:url('./images/3사로고.png') 43.5% 50%;

} 
#quick-icon3{
  background:url('./images/3사로고.png') 24% 52%;
}
#quick-icon4{
  background:url('./images/3사로고.png') 65% 48%;
}
#quick-icon5{
  background-image:url('./images/icon-3.jpg');
}

#links ul li a p{
  margin-top:15px;
  font-weight: 600;
  color: #666;
}

#bottomMenu{
  width: 100%;
  height: 20px;
  position: relative;
  
}

p{
  font-size: 14px;
  color: #aaa;
}

슬라이드 쇼 함수 js

current변수 만들어서 인덱싱했고,
해당 인덱스 사진일땐 block처리, 아닐떈 none처리 해서 하나의 사진만 보이게 구현
setTimeout함수 사용해서 2초마다 showSliede()함수 사용

var current = 0; //이미지 위치 인덱스 할 변수

showSlides();

function showSlides(){
  var slides= document.querySelectorAll('#slides > img');
  for(let i =0;i<slides.length;i++){
    slides[i].style.display="none";//모든 이미지 감춤

  }
  current++;
  if(current > slides.length) //마지막 이라면
    current =1; //1번이미지로 이동
  slides[current-1].style.display = "block"; //현재 위치 이미지 표시
  setTimeout(showSlides, 2000); //2초마다 showSlides()함수실행
}

<참고서적>

http://www.easyspub.co.kr/20_Menu/BookView/421/PUB

www.easyspub.co.kr

위 책을 처음부터 끝까지 정독하고 만든 사이트이다.
책 한권으로 HTML, CSS, JS의 대략적인 흐름을 알 수 있고,
정적사이트, 동적사이트 예제가 많아서 따라하면서 공부하는 재미가 있었다.
해당 사이트는 책 부록 pdf 전자책에서 '여행 사이트 만들기' 파트를 참고해서 만든 것이다.

<아쉬운점 & 시사점>

모바일도 구현하게 만들지 못한게 아쉽고, 뷰포트를 사용하지 않고 만들어서 사이트가 너무 융통성이 없다고 해야하나,., 암튼 사이즈적인 측면에서 매우 아쉽다. 상세페이지를 만들었으면 더 나만의 사이트 느낌이었을텐데, 시간이되면 추가해서 다듬어야겠다.
그래도 웹사이트 언어 아무것도 몰랐던 노베이스에서 시작해서 실제로 작동하는 사이트를 만들어서 결과적으론 매우 뿌듯함. js를 첨가하지않았으면 사이트 자체가 정적이여서 밋밋할거같았는데, 슬라이드 쇼 를 추가하니까 보는 맛도 있고 디자인적으로는 만족스럽다.

'html, css, js' 카테고리의 다른 글

DOM 정리 (0)	2023.03.01
문서 객체 모델 (DOM) (0)	2023.03.01
[js] 객체, 프로퍼티, 메소드 (0)	2023.02.27
[js] 함수/ 이벤트 (1)	2023.02.22
[js] 자바 스크립트 기본 문법(변수/ 자료형/연산자/조건문/반복문) (0)	2023.02.21

ABOUT ME

lee-ding lee-ding

<참고서적>

<아쉬운점 & 시사점>

'html, css, js' 카테고리의 다른 글

티스토리툴바

ABOUT ME

<참고서적>

<아쉬운점 & 시사점>

'html, css, js' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바