-
mainTest.html (메인페이지). 자유형식으로 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>메인페이지</title>
<link rel="stylesheet" href="mainTest.css">
</head>
<body>
<div id="container">
<nav>
<ul>
<li><a href="mainTest.html">Home</a></li>
<li><a href="aboutme.html">About me</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#lyrics1">Lyrics</a></li>
</ul>
</nav>
<header></header>
<section>
<a href="https://c11.kr/h0uk"><img src="images/mrok.jpg" width="100px" height="100px" ></a>
<a href="https://amongthestar.tistory.com"><img src="images/mrok.jpg" width="100px" height="100px" ></a>
<article id="contact">
<p><i>email</i> </p>
<p><i>phone</i> +82 10 1234 5678</p>
<p><i>homepage</i> amongthestar.tistory.com</p>
</article>
<article id="bgc">
<article id="lyrics1">
<p><i>Coffee & TV</i></p>
<p>Do you feel like a chain store?<br> Practically floored<br> One of many zeros<br> Kicked around, bored<br> Your ears are full but you're empty<br> Holding out your heart<br> To people who never really<br> Care how you are<br> So give me coffee and TV, peacefully<br> I've seen so much, I'm going blind<br> And I'm brain-dead virtually<br> Sociability<br> Is hard enough for me<br> Take me away from this big, bad world<br> And agree to marry me<br> So we can start over again<br> Do you go to the country?<br>
It isn't very far<br> There's people there who will hurt you<br> 'Cause of who you are</p>
</article>
<article id="lyrics2">
<p>Your ears are full of their language<br> There's wisdom there you're sure<br> 'Til the words start slurring<br> And you can't find the door<br> So give me coffee and TV, peacefully<br> I've seen so much, I'm going blind<br> And I'm brain-dead virtually<br> Sociability<br> Is hard enough for me<br> Take me away from this big bad world<br> And agree to marry me<br> So we can start over again<br> So give me coffee and TV, peacefully<br> I've seen so much, I'm going blind<br> And I'm brain-dead virtually<br> Sociability<br> Is hard enough for me<br> Take me away from this big bad world<br> And agree to marry me<br> So we can start over again<br> Oh, we can start over again<br> Oh, we can start over again<br> Oh, we can start over again<br> Oh, we can start over again</p>
</article>
</article>
</section>
<footer>
<p>ⓒ</p>
<p>amongthestar.tistory.com</p>
</footer>
</div>
</body>
</html>
-
mainTest.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&family=Recursive:wght@300;400&display=swap');
body{
font-family: 'Noto Sans KR', sans-serif;
}
#container{
width: 950px;
margin: 0 auto;
border: 1px solid rgb(172, 172, 172);
}
header{
width: 960px;
height: 600px;
background-image: url(images/1.JPG);
background-repeat: no-repeat;
}
header:hover{
opacity: 0.8;
}
nav ul{
list-style: none;
}
nav ul li{
display: inline;
font-size: 0.9em;
padding: 15px;
}
nav ul li a{
color:rgb(93, 93, 93);
text-decoration: none;
}
#contact{
float: right;
margin: 20px 20px;
padding: 20px;
width: 400px;
height: auto;
font-size: 0.9em;
color: #666;
text-align: right;
border: 1px dotted #ccc;
}
#bgc{
display: inline-block;
width: 100%;
height: auto;
background-color: rgb(246, 246, 246);
}
#lyrics1{
position: absolute;
margin: 120px 80px;
}
#lyrics1 p{
line-height: 1.8;
padding: 20px;
text-align: left;
border: 1px dotted #ccc;
color: #666;
}
#lyrics2{
float: right;
margin: 120px 80px;
line-height: 1.8;
padding: 20px;
text-align: left;
border: 1px dotted #ccc;
color: #666;
}
section img{
position: relative;
top: 50px;
left: 50px;
padding-right: 20px;
}
section img:hover{
-webkit-filter: grayscale(100%); filter: gray;
}
article i{
color: #ccc;
}
footer{
clear: both;
width: 100%;
height: 80px;
background-color: bisque;
color: #666;
font-size: 0.8em;
text-align: center;
margin: 0 auto;
padding-top: 5px;
}
네비게이터에서 About me 클릭할 경우 이력서 페이지(aboutme.html)로 이동
-
aboutme.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이력서</title>
<link rel="stylesheet" href="aboutme.css">
</head>
<body>
<div id="container">
<header>
<h2></h2>
<h6></h6>
<img src="images/ice.jpg" width="100" height="100">
</header>
<nav>
<ul>
<li><a href="#ac1">Who am I</a></li>
<li><a href="#ac2">Experience</a></li>
<li><a href="#ac3">Skills</a></li>
<li><a href="#ac4">Education</a></li>
<li><a href="join.html">Join</a></li>
</ul>
</nav>
<section>
<article id="ac1">
<h3>Who am I?</h3>
<p><i>phone</i> +82 10 1234 5678</p>
<p><i>email</i> </p>
<p><i>assignment</i></p>
</article>
<article id="ac2">
<h3>Experience</h3>
<p>경력사항</p>
</article>
<article id="ac3">
<h3>Skills</h3>
<p>Java, javascript, CSS, HTML, SQL</p>
</article>
<article id="ac4">
<h3>Education</h3>
<p></p>
</article>
</section>
<footer>
<p>ⓒ</p>
<p>amongthestar.tistory.com</p>
</footer>
</div>
</body>
</html>
-
aboutme.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&family=Recursive:wght@300;400&display=swap');
body{
font-family: 'Noto Sans KR', sans-serif;
}
#container{
width: 90%;
margin: 0 auto;
border: 1px solid rgb(172, 172, 172);
}
header{
width: 100%;
height: 200px;
background-image: url(images/photo.png);
background-size: 150px 150px;
background-repeat: no-repeat;
background-position: 5% 50%;
background-color: blanchedalmond;
}
header img{
position: absolute;
top: 60px;
right: 120px;
border-radius: 10px;
}
header h2{
position: relative;
margin: 0 auto;
padding: 30px;
text-align: center;
font-size: 2em;
color: rgb(56, 56, 56);
}
header h6{
position: relative;
margin: 0 auto;
text-align: center;
font-size: 1em;
color: rgb(56, 56, 56);
}
nav{
width: 100%;
height: auto;
background-color: rgb(255, 255, 255);
border-bottom: 1px solid #ccc;
color: white;
display: inline-block;
}
nav ul{
list-style: none;
}
nav ul li{
display: inline;
font-size: 1em;
}
nav ul li a{
color:rgb(93, 93, 93);
text-decoration: none;
padding: 5px 25px 5px 25px;
}
section{
margin: 0 auto;
}
article{
float: left;
width: 330px;
height: 200px;
border: 1px dotted rgb(175, 175, 175);
padding: 10px;
margin: 20px;
}
article p{
font-size: 0.9em;
margin: 20px;
}
article h3{
width: 90%;
margin: 10px auto;
background-color: #eee;
color: rgb(56, 56, 56);
font-size: 0.9em;
text-align: center;
padding-top: 10px;
height: 30px;
}
footer{
clear: both;
width: 100%;
height: 80px;
background-color: blanchedalmond;
color: rgb(56, 56, 56);
font-size: 0.8em;
text-align: center;
margin: 0 auto;
padding-top: 5px;
}
네비게이터에서 Join 클릭할 경우 회원가입 페이지(join.html)로 이동
-
join.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<link rel="stylesheet" href="join.css">
</head>
<body>
<div id="container">
<h1>회원 가입</h1>
<form action="#">
<fieldset>
<legend>로그인 정보</legend>
<ul id="login-info">
<li>
<label for="userid" class="field">아이디</label>
<input type="text" id="userid" placeholder="4~8글자 입력" required onchange="checkId()">
</li>
<li>
<label for="user-pw1" class="field">비밀번호</label>
<input type="password" id="user-pw1" placeholder="8자리 이상" required onchange="checkPw()">
</li>
<li>
<label for="user-pw2" class="field">비밀번호 확인</label>
<input type="password" id="user-pw2" required onchange="comparePw()">
</li>
</ul>
</fieldset>
<fieldset>
<legend>개인 정보</legend>
<ul id="personal-info">
<li>
<label for="name" class="field">이름</label>
<input type="text" id="name" required>
</li>
<li>
<label for="email" class="field">메일 주소</label>
<input type="email" id="email" required>
</li>
<li>
<label for="tel" class="field">연락처</label>
<input type="tel" id="tel" required>
</li>
<li>
<label for="blog" class="field">블로그/홈페이지</label>
<input type="url" id="blog">
</li>
</ul>
</fieldset>
<div id="buttons">
<button type="submit">가입하기</button>
<button type="reset">취소</button>
</div>
</form>
</div>
<script src="join.js"></script>
</body>
</html>
-
join.css
#container{
width: 70%;
margin: 0 auto;
}
ul{
list-style: none;
}
ul li{
clear: both;
}
.field {
float: left;
width: 30%;
line-height: 40px;
text-align: right;
margin-right: 15px;
}
input[type="text"],input[type="email"],input[type="password"], input[type="tel"],input[type="url"]{
float: left;
width: 35%;
border: 1px solid #666;
border-radius: 2px;
padding: 5px;
margin: 8px 0;
}
#buttons{
clear: both;
margin: 0 auto;
width: 100%;
text-align: center;
padding-top: 15px;
}
button{
width: 280px;
height: 50px;
border: 1px solid #ccc;
background: #eee;
font-size: 0.9em;
border-radius: 2px;
}
button[type=submit]{
background-color: blanchedalmond;
color: #666;
}
-
join.js
function openJoin(){
var newWin=window.open("join.html", "", "");
if(newWin==null){
alert("팝업이 차단되어 있습니다. 차단을 해제하고 새로고침을 하세요.");
}
}
var userId=document.querySelector("#userid");
var pw1=document.querySelector("#user-pw1");
var pw2=document.querySelector("#user-pw2");
userId.onChange=checkId;
pw1.onChange=checkPw;
pw2.onChange=comparePw;
function checkId(){
if(userId.value.length<4 || userId.value.length>8){
alert("4~8자리 영문과 숫자 사용");
userId.focus();
}
}``
function checkPw(){
if(pw1.value.length<8){
alert("비밀번호는 8글자 이상이어야 합니다.");
pw1.value="";
pw1.focus();
}
}
function comparePw(){
if(pw1.value != pw2.value){
alert("비밀번호가 일치하지 않습니다.");
pw2.value="";
pw2.focus();
}
}
'Learning > HTML&JavaScript' 카테고리의 다른 글
| Post 방식으로 페이지 이동하기 (0) | 2021.03.30 |
|---|---|
| 반응형 웹 디자인 (0) | 2020.08.04 |
| DOM, BOM (0) | 2020.08.04 |
| 자바스크립트 함수 2 (0) | 2020.08.03 |
| 자바스크립트 함수 1 (0) | 2020.07.31 |
