티스토리 뷰

현장실습 🏙

[현장 실습]2021 하계 3주11일차 - HTML과 CSS를 이용하여 메인홈페이지 구현하기2

stable_sound 2021. 10. 22. 18:11

(2021.07.21 본인 네이버 블로그에서 작성한 글 옮겨옴)

오늘은 메인홈페이지를 손 보고 몇일 전 만들었던 테이블을 손봤습니ㄷㅏ.


하루종일 수정만 하는 중인데 마음대로 안되니까 화납니다.


집가고 싶어욥







처음 메인페이지 구현 후 마음에 안들어서 싹 갈아엎었다.
그러고도 마음에 안들어서 출근하자마자부터 또 갈아엎는 중이다.

이번에는 그렇게 많이는 아니고 이미지를 슬라이드로 넘기게 하고싶었다.

헤더

 

메인

 

슬라이드 되고 있는,,,,모습,,,,인데,,,,,





하다가 시간이 없어서 더 못했는데 좀 더 꾸며봐야겠다 !!!



참고) http://junil-hwang.com/blog/css-slide-animation/

 

[CSS] 다양한 CSS Slide Animation - 개발자 황준일

보통 slide를 만들 때 javascript를 사용합니다. 하지만 javascript 없이도 간단한 슬라이드를 제작할 수 있습니다. keyframes을 이용할 수도 있고, input radio를 이용할 수도 있습니다. 다양한 슬라이드 제작

junil-hwang.com






코드)
1. php

<?

?>

<html>
<head>
  <title>main0716</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="../../new.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap" rel="stylesheet">

<style type="text/css">
  a:link { color: #777; text-decoration: none;}
 a:visited { color: #777; text-decoration: none;}
 a:hover { color: #777; text-decoration: underline;}
</style>

  <script language="javascript">
    function fn_list1() {
      frm.action = '../../day.html';
    }
    function fn_list2() {
      frm.action = '../../week.html';
    }

  </script>
</head>

<body>
<header>
<h1 style="text-align : center;"> Self - Portroit</h1>
<div style="text-align : center;">
  <img src="../../main1.jpg" width="500px" >
  </div>
<nav>
<ul class="bar">
  <li><a href="#">home</a></li>
  <li><a href="#">menu1</a>
    <ul class="sub">
      <li><a href="#">sub menu1</a></li>
      <li><a href="#">sub menu2</a></li>
      <li><a href="#">sub menu3</a></li>
    </ul></li>
  <li><a href="#">menu2</a>
        <ul class="sub">
          <li><a href="#">sub menu1</a></li>
          <li><a href="#">sub menu2</a></li>
          <li><a href="#">sub menu3</a></li>
        </ul>
  </li>
  <li><a href="#">menu3</a>
    <ul class="sub">
      <li><a href="#">sub menu1</a></li>
      <li><a href="#">sub menu2</a></li>
    </ul></li>
</ul>
</nav>
</header>


<div class="main">

<section id="top">
<div id="img">
<img src="../../body1.jpg">
</div>

<div class="text" style="float:left;">
<h5>서울미술관 2021년 상반기 기획전</h5>
<h2>거울 속의 거울</h2>
<hr style="float:left; width:10%;"><br>
<p>2021년 서울미술관의 <<거울 속의 거울>>은 현대인들의 내면을 들여다보게 하는 거울과 같은 시간을 마련하고자 기획되었습니다.
어느새 우리 곁으로 다가온 메타버스(Metaverse | 가공을 의미하는 메타 Meta와 현실 세계를 의미하는 유니버스 Universe의 합성어)에 대해 생각해 보고자 합니다.<br>
<br>작품 속에 입혀진 작가의 거울을 통해 우리의 내면을 들여다보고 그 안에서 '거울 속의 거울'처럼 무한히 증식되는 자아와 세계를 만나보십시오.
그리고 새로운 세상의 수많은 자아가 결국 본래의 자신을 형성하고 있는 예술 경험을 느껴보시기 바랍니다.</p>
</div>
<br>
</section>
<hr>
<hr>

<section id="middle">
 <div id="video">
  <div class="video_set">
<iframe width="100%" height="350" src="https://www.youtube.com/embed/SbHHSCNmYkw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="video_set">
<iframe width="100%" height="350" align="right"src="https://www.youtube.com/embed/PiW48QTK4zY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</section>
<hr>
<hr>
<h3 style="text-align:center; margin:5px;" >Gallery</h3>
<div class="slide">
    <ul>
      <li><img src="../../slide1.jpg"></li>
      <li><img src="../../slide2.jpg"></li>
      <li><img src="../../slide3.jpg"></li>
      <li><img src="../../slide4.jpg"></li>
    </ul>
  </div>
</div>

<footer>
  <div>
    <br><span>만든이 : 호서대학교 컴퓨터공학부</span> <span> | </span>
    <span> 20181194 안정음 </span> <span> | </span>
  </div>
</footer>
</body>
</html>


2.css

* {
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Noto Sans KR', sans-serif;
}

h1 {
  font-family: 'Patua One', cursive;
  margin: 20px 0;
}

li::marker {
  color : #ababab;
}

hr {
	border: 0;
    border-top: 3px solid #e1e1e1;
    height: 1px;
    margin-bottom: 0;
	width : 80%;
}

header {
  width :100%;
}

.bar {
	list-style: none;
	text-align: center;
  border-radius: 5px;
	padding: 10px 0 10px 0;
}
.bar > li {
	width: 20%;
	display: inline-block;
/*	padding: 0 5px 0 5px;*/
	position: relative;
	height: 50px;
	line-height: 50px;
	text-align: center;
}
.bar >li:hover .sub {
	display: block;
}
.bar > li > a {
	display: block;
	color: #000000;
  border-radius: 5px;
}
.bar > li a:hover {
	background: #DAAC98;
	color: #EAEAEA;
  border-radius: 5px;
}
.bar .sub {
	display:none;
	position:absolute;
	top:50px;
	left:0;
	width:100%;
	z-index: 1;
	list-style:none;
}

.bar .sub li {
	background: #EAEAEA;
}

.bar .sub li > a {
	text-decoration: none;
	color: #000000;
  border-radius: 5px;
}
.bar .sub li > a:hover {
	background: #CACACA;
  border-radius: 5px;
}

.main {
  width: 100%;
  height :2000px;
}

.main #top {
  float : top;
  width : 100%;
  height : 400px;
  margin : 10px 40px;
}

#img {
	float:left;
	margin : 0 15px;
}

.text {
	float:left;
	width : 70%;
}

.main #middle {
	float:middle;
	width : 100%;
  height : 400px;
  margin : 10px 40px;
}

.slide{height:350px;overflow:hidden;}
    .slide ul{width:calc(100% * 4);display:flex; 
	padding : 0; animation:slide 8s infinite; list-style:none;} /* slide를 8초동안 진행하며 무한반복 함 */
    .slide li{width:calc(100% / 4);height:350px; list-style:none;}
    .slide li:nth-child(1){background:#fff;}
    .slide li:nth-child(2){background:#fff;}
    .slide li:nth-child(3){background:#fff;}
    .slide li:nth-child(4){background:#fff;}
	
	.slide li img {
		display:block;
		margin-left:auto;
		margin-right:auto;
	}
	
    @keyframes slide {
      0% {margin-left:0;} /* 0 ~ 10  : 정지 */
      10% {margin-left:0;} /* 10 ~ 25 : 변이 */
      25% {margin-left:-100%;} /* 25 ~ 35 : 정지 */
      35% {margin-left:-100%;} /* 35 ~ 50 : 변이 */
      50% {margin-left:-200%;}
      60% {margin-left:-200%;}
      75% {margin-left:-300%;}
      85% {margin-left:-300%;}
      100% {margin-left:0;}
    }

/**/



#video {
  width:100%;
  height: 350px;
  position: absolute;
  padding: 20px 20px;
  align-items: center;
}

.video_set {
	width:50%;
	float : left;
	padding : 0 20px;
}


footer {
    left:0px;
    bottom:0px;
    height:60px;
    width:100%;
    background:#969DBE;
    color: white;
    text-align: center;
    font-size:12px;
}

'현장실습 🏙' 카테고리의 다른 글

[현장 실습]2021 하계 3주12일차 - MYSQL, PHP, HTML, CSS를 이용하여 로그인/회원가입 구현하기  (0) 2021.10.23
[현장 실습]2021 하계 3주12일차 - MYSQL 과 localhost 연결하고 테이블 조회 테스트 하기  (0) 2021.10.23
[현장 실습]2021 하계 2주10일차 - HTML과 CSS를 이용하여 메인홈페이지 구현하기  (0) 2021.10.22
[현장 실습]2021 하계 2주9일차 - 테이블 이해하기  (0) 2021.10.22
[현장 실습]2021 하계 2주8일차 - HTML과 CSS를 이용하여 로그인 페이지 만들기  (0) 2021.10.22
댓글