일상 코딩
[HTML/CSS/Javascript] 자기소개 페이지 만들기 본문
728x90
1. log in page
<HTML-login>
<!--
* author : velog.io/@___
* path : ./signup.html
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 페이지</title>
<link rel="stylesheet" href="./login.css" type="text/css" media="all" />
<script src="./login.js" type="text/javascript"></script>
</head>
<body>
<div id="container" class="main_container">
<div style="padding: 20px;"></div>
<div class="login_container">
<div class="form_container">
<form name="login_form" action="/cookie" method="get">
<div class="form_title_div">
<p class="form_title_p">Register With Us</p>
</div>
<div>
<div>
<a class="form_item_name">username</a>
</div>
<div>
<input type="text" name="username" placeholder="name" class="form_input"/>
</div>
<div class="form_text_alert_padding">
<div id="alert_username" class="form_text_alert"></div>
</div>
</div>
<div>
<div>
<a class="form_item_name">Email</a>
</div>
<div>
<input type="text" name="email" placeholder="E-mail" class="form_input"/>
</div>
<div class="form_text_alert_padding">
<div id="alert_email" class="form_text_alert"></div>
</div>
</div>
<div>
<div>
<a class="form_item_name">Password</a>
</div>
<div>
<input type="password" name="password" placeholder="Enter password" class="form_input" />
</div>
<div class="form_text_alert_padding">
<div id="alert_password" class="form_text_alert"></div>
</div>
</div>
<div>
<div>
<a class="form_item_name">Confirm Password</a>
</div>
<div>
<input type="password" name="password2" onfocus="" placeholder="Enter password again" class="form_input" />
</div>
<div class="form_text_alert_padding">
<div id="alert_password2" class="form_text_alert"></div>
</div>
</div>
<div style="height: 10px;"></div>
<div>
<button type="button" class="form_submit_button" onclick="login()">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html><CSS-login>
/**
* author : velog.io/@___
* path : ./login.css
*/
.main_container{
border: 0px solid;
}
.login_container{
width: 380px;
height: 520px;
margin: auto;
border-radius: 3px;
box-shadow: 0px 0px 20px #000;
}
.form_container{
width: 300px;
margin: auto;
}
.form_title_div{
margin: auto;
text-align: center;
}
.form_title_p{
font-weight: bold;
font-size: 22px;
display: inline-block;
padding-top: 8px;
}
.form_input{
width: 98%;
height: 30px;
border: 1px solid;
border-radius: 3px;
border-color: gray;
}
.form_item_name{
color: gray;
}
.form_text_alert{
height: 20px;
}
.form_text_alert_padding{
padding-bottom: 10px;
}
.form_submit_button{
width: 100%;
height: 44px;
background-color: rgb(83, 154, 236);
border: 1px;
border-radius: 3px;
color: white;
font-size: 17px;
font-weight: 500;
}<Javascript-login>
/**
* author : velog.io/@___
* path :
*/
function login() {
const form = document.login_form;
const chkUsername = checkValidUsername(form);
const chkEmail = checkValidEmail(form);
const chkPw = checkValidPassword(form);
const chkPw2 = checkValidPassword2(form);
if (chkUsername) {
document.getElementById('alert_username').innerText = "";
form.username.style.border = '2px solid';
form.username.style.borderColor = '#00D000';
} else {
form.username.style.border = '2px solid';
form.username.style.borderColor = '#FF0000';
document.getElementById('alert_username').style.color = '#FF0000';
}
if (chkEmail) {
document.getElementById('alert_email').innerText = "";
form.email.style.border = '2px solid';
form.email.style.borderColor = '#00D000';
} else {
form.email.style.border = '2px solid';
form.email.style.borderColor = '#FF0000';
document.getElementById('alert_email').style.color = '#FF0000';
}
if (chkPw) {
document.getElementById('alert_password').innerText = "";
form.password.style.border = '2px solid';
form.password.style.borderColor = '#00D000';
} else {
form.password.style.border = '2px solid';
form.password.style.borderColor = '#FF0000';
document.getElementById('alert_password').style.color = '#FF0000';
}
if (chkPw2) {
document.getElementById('alert_password2').innerText = "";
form.password2.style.border = '2px solid';
form.password2.style.borderColor = '#00D000';
} else {
form.password2.style.border = '2px solid';
form.password2.style.borderColor = '#FF0000';
document.getElementById('alert_password2').style.color = '#FF0000';
}
if (chkUsername && chkEmail && chkPw && chkPw2) {
console.log('complete. form.submit();');
document.location.href='./self.html';
}
}
function checkValidUsername(form) {
if (form.username.value == "") {
document.getElementById('alert_username').innerText = "Please enter username.";
//form.username.focus();
return false;
}
return true;
}
function checkValidEmail(form) {
if (form.email.value == "") {
document.getElementById('alert_email').innerText = "Please enter email.";
//form.email.focus();
return false;
}
const exptext = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
// "ㅁ@ㅁ.ㅁ" 이메일 형식 검사.
if (exptext.test(form.email.value) === false) {
document.getElementById('alert_email').innerText = "Email is not valid.";
//form.email.select();
return false;
}
return true;
}
function checkValidPassword(form) {
if (form.password.value == "") {
document.getElementById('alert_password').innerText = "Please enter password.";
//form.password.focus();
return false;
}
const pw = form.password.value;
// String.prototype.search() :: 검색된 문자열 중에 첫 번째로 매치되는 것의 인덱스를 반환한다. 찾지 못하면 -1 을 반환한다.
// number
const num = pw.search(/[0-9]/g);
// alphabet
const eng = pw.search(/[a-z]/ig);
// special characters
const spe = pw.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);
if (pw.length < 6) {
// 최소 6문자.
document.getElementById('alert_password').innerText = "Password must be at least 6 characters.";
return false;
} else if (pw.search(/\s/) != -1) {
// 공백 제거.
document.getElementById('alert_password').innerText = "Please enter your password without spaces.";
return false;
} else if (num < 0 && eng < 0 && spe < 0) {
// 한글과 같은 문자열 입력 방지.
document.getElementById('alert_password').innerText = "Password is not valid.";
return false;
}
return true;
}
function checkValidPassword2(form) {
if (form.password2.value == "") {
document.getElementById('alert_password2').innerText = "Password2 is required.";
//form.password.focus();
return false;
}
if (form.password.value !== form.password2.value) {
document.getElementById('alert_password2').innerText = "Password and password2 is not match.";
form.password.style.border = '2px solid';
form.password.style.borderColor = '#FF0000';
document.getElementById('alert_password').style.color = '#FF0000';
return false;
}
return true;
}2.자기소개 페이지
<HTML-self>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./self_style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$(function () {
$("#leftcolumn").accordion();
});
</script>
</head>
<body>
<div class="header">
<img
src="https://res.cloudinary.com/practicaldev/image/fetch/s--cq8B5Kri--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://miro.medium.com/max/750/0%2Alfch00ooE7yMICVx"
alt="coding_test" width="100%" height="50%">
<div class="center">
<h3>In my Brain</h3>
</div>
</div>
<div class="topnav">
<!-- <a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" style="float:right">Link</a> -->
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>요즘 관심이 가는 것</h2>
<h5>2021.10.18. 월요일</h5>
<div class="fakeimg">
<div class="bike">
<img src="https://cdn.imweb.me/thumbnail/20210308/e61466e310328.jpg" width="100%" height="100%">
</div>
<div class="bike">
<img src="https://cdn.imweb.me/thumbnail/20210309/ed29bd6c1688c.jpg" width="100%" height="100%">
</div>
</div>
<a href="https://www.suzuki.kr/dl250" target="_blank">2021 V-STROM250 ABS 판매 링크</a>
<p>2021 V-STROM250 ABS, ₩6,530,000</p>
<p>125cc 이상의 바이크에 관심이 간다.</p>
<p>2종 소형 면허증은 일단 있고, 돈만 있으면 바로 가능할것 같다.</p>
</div>
<div class="card">
<h2>관심가는 IT 기술 및 강좌</h2>
<h5>2021.10.18. 월요일</h5>
<div class="fakeimg">
<img src="https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202110/101820-396/mlops.png"
width="100%" height="100%">
</div>
<p><a href="https://fastcampus.co.kr/data_online_mlops" target="_blank">[패스트캠퍼스] MLOps 강좌 링크</a></p>
<p><a href="https://www.coursera.org/search?query=mlops&" target="_blank">[코세라] MLOps 강좌 링크</a></p>
<p><a href="https://www.udemy.com/courses/search/?src=ukw&q=mlops" target="_blank">[Udemy] MLOps 강좌 링크</a></p>
<p>MLOps</p>
<p>카카오뱅크 현직 정기수 강사님 소개로 알게된 알아둬야할 머신러닝 파이프라인에 대해서 패스트캠퍼스에 강좌가 열린다고하여 수강할 계획임. 가격은 약 30만원 정도.</p>
</div>
<div class="card">
<h2>추천하는 프로틴 보충제</h2>
<h5>2021.10.18. 월요일</h5>
<div class="fakeimg">
<img src="https://cdn.monsterzym.com/images/detailed/28/%E5%9C%A8.jpeg?t=1629872020" width="100%"
height="20%">
</div>
<a href="https://www.monsterzym.com/mfwpi.html" target="_blank">Grass Fed Whey Isolate 5 lbs (2.27kg,
94serv)</a>
<p>Grass Fed WPI</p>
<p>머슬피스트 Grass Fed WPI 94서빙 Grass Fed Whey Isolate 5 lbs (2.27kg, 94serv) 풀먹인 젖소에서 생산한 우유로 만들어 오메가6가 적은게 강점이고,
WPI라 젖당불내증이 있어도 불편함 없이 섭취 가능하다.</p>
</div>
<div class="card">
<h2>파이썬의 끝</h2>
<h5>2021.10.18. 월요일</h5>
<div class="fakeimg">
<iframe width="100%" height="600px" src="https://www.youtube.com/embed/OMoUwv46iig"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<p>파이썬의 단점은 멀티쓰레딩이 안된다는 것</p>
<p>결구엔 C++/Java/node.js 등으로 넘어가야함.</p>
</div>
<div class="card">
<h2>C++ / JAVA / node.js</h2>
<h5>2021.10.18. 월요일</h5>
<div class="fakeimg">
<div class="lang">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C%2B%2B_Logo.svg/1200px-ISO_C%2B%2B_Logo.svg.png"
width="80%" height="100%">
</div>
<div class="lang">
<img src="https://kimsejune.github.io/images/java.png" width="100%" height="100%">
</div>
<div class="lang">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Node.js_logo.svg/1200px-Node.js_logo.svg.png"
width="100%" height="100%">
</div>
</div>
<p>어떤 언어를 메인으로 가져가야하나 고민중</p>
<p>결구엔 C++/Java/node.js 등으로 넘어가야함.</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="fakeimg1" style="width: 500; height: 376px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Muscleup.jpg" width="100%" height="100%">
</div>
<p>머슬업</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg">
<img src="https://blog.kakaocdn.net/dn/d0l1Pv/btqGmONiPmW/OluDzrKeEx79dtll0GFVik/img.png" width="100%"
height="100%">
</div>
<div class="fakeimg">
<img
src="https://ww.namu.la/s/b166f11c160a826de6ac1cf38304da71a22ff72c2b9a6339712ff7e9685c084a1d2c691c13882864dc4c899393e7f4f20df0fff6eb760b94ab65b963387bc658a17dcd04eeebabf55888478a5664e5c6"
width="100%" height="100%">
</div>
<div class="fakeimg">
<img src="https://internet-salmagundi.com/wp-content/uploads/2019/03/W3-MatFrame-895x493px-Qual100.jpg"
width="100%" height="100%">
</div>
<div class="fakeimg">
<img src="https://influencermarketinghub.com/wp-content/uploads/2020/09/default-meta-image.png"
width="100%" height="100%">
</div>
<div class="fakeimg">
<img src="https://www.dailypop.kr/news/photo/201810/35720_59179_1626.png"
width="100%" height="100%">
</div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>RAPA에 오시면 절 볼 수 있습니다.</p>
</div>
</div>
</div>
<div class="footer">
<img src="https://img.etnews.com/photonews/1510/735787_20151022151011_113_0001.jpg" width="100%" height="100%">
</div>
</body>
</html><CSS-self>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* Header/Blog Title */
.header {
padding: 30px;
text-align: center;
background: white;
}
div.header > .center {
position: absolute;
top: 38%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 100px;
}
div.header > img {
width: 100%;
height: 50%;
opacity: 0.5;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
display: flex;
background-color: #aaa;
width: 100%;
padding: 20px;
}
.bike{
margin: 5px;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}728x90