무룩 공부방

[HTML] EX20) 홈페이지 메인화면(Notepad++/Java Script) 본문

IT/HTML

[HTML] EX20) 홈페이지 메인화면(Notepad++/Java Script)

moo_look 2023. 8. 29. 22:51

그동안 배운 문법, 형식, css를 활용해 홈페이지를 만들어 보았습니다.

 

# JSLHRD.com 의 메인화면과 유사한 구조를 만들기 위해 필요한 방법들을 학습했습니다.

# 사진첨부와 메인화면에서 여러장의 사진을 넘기는 구조를 만들어 보았습니다.

 

 

<JSLHRD.com 메인화면>

 

 

<설계조건>

- 회원가입 / 로그인

- 메뉴

- inline과 block을 활용하여 넘길수 있는 배너

- block의 공간을 분리하여 사진과 텍스트를 배치

- footer 생성

 

 

<Source code>

<!doctype html>
<html>
	<head>
		<title>무룩이력서</title>
		<meta charset="utf-8">
		<link href="css/portfolio.css" rel="stylesheet">
	</head>
	<body>
		<div id="modal" class="modal">
			<div class="imgcontainer">
				<span class="close" style="cursor:poniter" 
                 onclick="document.getElementById('modal').style.display='none';">&times;</span>
				<img src="images/product1.jpg" alt="">
				<div style="padding-top:16px;">
					<h4>Email</h4>
					<input type="text" name="id">
				</div>
				<div>
					<h4>password</h4>
					<input type="password" name="pw">
				</div>
			</div>
		</div>
		<header>
			<div class="navTop">
				<a href="#" style="cursor:poniter" 
                 onclick="document.getElementById('modal').style.display='block';">로그인</a>
				<a href="member.html">회원가입</a>
			</div>
			<div class="line">
			</div>
		
			<div class="header">
			<h1>moolook</h1>
			<nav>
				<a href="about.html">about me</a>
				<a href="portpoilo.html">Portpoilo</a>
				<a href="contact.html">Contect</a>
			</nav>
			</div>
		</header>
		<div class="mainvisual">
			<div class="mySlides fade">
				<div class="numbertext">1 / 2</div>
				<img src="images/banner1.png" alt="">
				<div class="text">JslHrd.com</div>
			</div>
			<div class="mySlides fade">
				<div class="numbertext">2 / 2</div>
				<img src="images/banner2.png" alt="">
				<div class="text">Say I love You!</div>	
			</div>
			<a class="prev" onclick="pushSlides(-1)"><</a>
			<a class="next" onclick="pushSlides(1)">></a>
		</div>
		<div style="text-align:center;">
			<span class="dot" onclick="currentSlide(1)"></span>
			<span class="dot" onclick="currentSlide(2)"></span>
		</div>
		
		<div class="content">
			<h2>My Story</h2>
			<div class="product1">
				<image src="images/product1.jpg" alt="">
				<h3>About me</h3>
				<p>유능한 인재가 되기 위해 끊임없이 노력하고 도전하겠습니다.</p>
			</div>
			<div class="product2">
				<image src="images/product2.jpg" alt="">
				<h3>PortFolio</h3>
				<p>java, Spring, mySql을 활용한 비즈니스 홈페이지</p>
			</div>
			<div class="product3">
				<image src="images/product3.jpg" alt="">
				<h3>youTube</h3>
				<p><a href="https://www.youtube.com/embed/DyTsVjaDCqs" target="_blank">
                video resume</a></p>
			</div>
		</div>
		
		<footer>
			<div class="footer">
				<div class="left">
					<span>moolook</span>
				</div>
				<div class="right">
					<span>CopyRight JSLHRD &copy; ALL rights Reserved.</span>
				</div>
			</div>
		</footer>
		
		<script>
			let slideIndex = 1;
			showSlides(slideIndex);
			
			function pushSlides(n) {
				showSlides(slideIndex += n); //slideIndex = slideIndex + n
			}
			
			function showSlides(n) {
				let i;
				let slides = document.getElementsByClassName("mySlides");
				//mySlides 가 2개니 배열형태로 저장
				if(n > slides.length) {slideIndex=1}
				if(n < 1) {slideIndex = slides.length}
				for(i=0; i<slides.length; i++) {
					slides[i].style.display = "none";
				}
				slides[slideIndex-1].style.display = "block";
			}
		</script>
	</body>
</html>

 

<css>

@charset "utf=8";

/* reset css */
/* 모든태그는 고유의 바깥, 안쪽여백이있는데 그걸 초기화하고싶음 */
/* 본문의 css/portpolio.css는 절대경로? 상대경로? */
/* div뒤 이름으로 위치찾아서 변경*/
/* a태그는 링크거는 태그 = 파일 zip 페이지주소도 가능*/
/* target="_blank" 새탭에 띄우기*/
/* class는 .으로 연결*/
/* 000000 R G B 000*/
/* rel="stylesheet" 꼭 해야함*/
/* position:relative; (0,0)시작위치를 잡아줌 */
/* display:inline-block; width값이 100%인 tag를 block이라하고 작은요소를 inline이라함*/
/* 폭을 줄이라는 뜻 block을 inline으로 바꿔라 원래는 다른 스타일시트를 써야함*/
/* z-index:1; 1층 바닥은 0층*/
/* margin:0 auto 가운데 정렬*/
/* a태그는 inline*/
/* 웹접근성 웹호환성*/
/* 스타일시트 부여할때 id는 유일한 스타일부여 / 같은 class 이름을 여러번 부여하고싶으면 class*/
/* transition:0.6s ease; 스르륵 바뀜*/
/* width / height 는 블록에만 적용*/
/* rgba 0~255 rgb값 / a는 투명도  */
/* keyframes fade 중괄호 조심*/
/* opacity 투명도*/
/* 두단어 이상조합으로 이름을 만들땐 주번째부터 대문자활용*/

* {margin:0; padding:0;}

a {
	text-decoration:none; color:#333;
	font-size:22px;
}

.navTop {
	width:1200px; margin:0 auto;
	padding:12px 16px;
	text-align:right;
}

.navTop a{
	padding:8px 12px;
}

.line {
	height:1px;
	background:#ccc;
}

.header h1, .header nav {
	display:inline-block;
}
.header h1{
	margin-top:-8px;
}
.header nav {
	float:right;
}
.header nav a{
	padding:16px 26px;
}
.header{
	width:1200px; margin:0 auto; 
	padding:30px 0;
}
.mainvisual img{
	width:100%;
}
.myslides { 
	display:none;
}
.prev, .next {
	background:#fff;
	cursor:pointer;
	position:absolute;
	top:50%;
	width:auto;
	padding:16px;
	margin-top:-22px;
	color:#000;
	font-weight:bold;
	font-size:18px;
	transition:0.6s ease;
	border-radius:0 3px 3px 0;
	user-select:none;
}
.next {
	right:0;
	border-radius:3px 0 0 3px;
}
.prev:hover, .next:hover {
	background:rgba(0,0,0,0.8);
	color:#fff;
}
.text {
	color:#f2f2f2;
	font-size:15px;
	padding:8px 12px;
	position:absolute;
	bottom:8px;
	text-align:center;
}
.numbertext {
	color:#f2f2f2;
	font-size:12px;
	padding:8px 12px;
	position:absolute;
	top:0;
}
.fade {
	animation-name:fade;
	animation-duration:1.5s;
}

@keyframes fade {
	from {opacity: .4}
	to {opacity:1}
}

.mainvisual {
	position:relative;
}

.dropbtn {
	background:#00f;
	color:#fff;
	padding:16px;
	font-size:16px;
	border:none;
}

.content {
	width:1200px;
	margin:0 auto;
	padding:30px 0;
}

.content:after {
	content:""; /*가상의 빈블럭*/
	display:block;
	clear:both;
}
/* 자식을 float시키면 부모에게 영향을 미친다 :after 가상클래스를 이용하여 해제*/

.content h2 {
	padding-bottom:18px;
}

.content .product1, .content .product2, .content .product3 {
	width:380px;
	margin-right:30px;
	float:left;
}

.content .product3 {
	margin-right:0;
}
/* nth-child는 사이에 다른요소가 끼면 안됨 같은요소만 가능 */

.content h3 {
	padding:16px 0;
}
/* 중간경로 생략가능 */

.content img {
	width:100%;
}

footer {
	clear:both;
	background:#666;
	color:#fff;
	margin-top:60px;
}

.footer {
	width:1200px;
	margin:0 auto;
	padding:30px 0;
}
.footer:after {
	content:"";
	display:block;
	clear:both;
}
/* 부모도 해제를 해줘야함*/
.footer .left {
	width:10%;
	float:left;
}

.footer .right {
	float:right;
}

.modal {
	display:none;
	position:fixed;
	z-index:100; /*100층 맨위로 올려라*/
	left:0; top:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.4);
}

.imgcontainer {
	background:#fff;
	margin:5% auto;
	border:1px solid #ccc;
	width:400px;
	text-align:center;
	position:relative;
	padding:60px 0;
}

.imgcontainer img {
	width:200px;
	height:200px;
	border-radius:50%;
	display:inline-block;
}

.imgcontainer .close {
	position:absolute;
	right:25px; top:5px;
	font-size:35px;
	font-weight:bold;
}
 
/* display:block; 보이게 안보이게는 none*/
/* text-decoration:none; 밑줄생략*/
/* 내소개=1depth 하위메뉴=2depth*/
/* :hover 가상클래스 뒤에 공백 한칸*/
/* 자식이 float 되면 부모도 float 된다*/
/* clear:both; float 해제*/

 

 

<출력 화면>

 

<로그인버튼 클릭>
<회원가입버튼 클릭>

 

'IT > HTML' 카테고리의 다른 글

[HTML] EX19) dropdown과 css (Notepad++/Java Script)  (0) 2023.08.29
[HTML] EX18) css 예제 (Notepad++/Java Script)  (0) 2023.08.29
[HTML] EX17) 객체 (Notepad++/Java Script)  (0) 2023.08.26
[HTML] EX16) 총점과 평균 (Notepad++/Java Script)  (0) 2023.08.26
[HTML] EX15) 배열 (Notepad++/Java Script)  (0) 2023.08.26
'IT/HTML' Related Articles more