티스토리 뷰
login.html과 join.html을 만들어서,
전에 했던 index.html에 있던 코드를 전부 붙여넣기한다.
2024.05.08 - [프로그래밍 공부/에이블스쿨] - [웹 프로그래밍] 커버 페이지 만들기 실습
페이지 이동
헤더에 있는 href에 해당 파일의 이름을 써준다.
active도 파일에 따라 바꿔서 해당 바가 달라지게 해준다.
<body>
<header>
<nav>
<label for=""><b>KT</b></label>
<!-- ul>(li>a)*3 -->
<ul>
<li><a href="index.html" >Home</a></li>
<li><a href="join.html">Join</a></li>
<li><a href="login.html" class="active">Login</a><
</ul>
</nav>
</header>
index.html을 생략해도 홈페이지 주소는 불러와진다.
홈페이지 파일명 index.html이 국룰
데이터 출력 페이지까지 완성해본다.
ngrok 회원가입하기
ngrok | Unified Application Delivery Platform for Developers
ngrok is a secure unified ingress platform that combines your global server load balancing, reverse proxy, firewall, API gateway and Kubernetes Ingress Controller to deliver applications and APIs.
ngrok.com
키값을 사용해서 이 서비스를 인터넷 상에 올린다.
index.html을 main.css에 연결했다.
이렇게 만들어놓은 상태에서 브라우저에 web/index.html
request response
다른 pc에서는 띄우지 못한다. 인터넷망이 있고, 당연히 방화벽 때문이다.
이걸 볼 수 있게 하는 방법 - 서버 없이 테스트 용도로 띄워볼 떄 쓰는 방법이다.
ngrok는 우리 pc에서 동작이 된다.
index.html을 연결하고, 인터넷망에 있는 ngrok서버와 연결을 해준다.
그러면 다른 사람이 해당 서버를 통해서 요청하여 띄울 수 있다.
터널링 서비스라고 한다.
html css js가 웹 서버에 있어야
서버는 aws-ec2, linux - cmd 창 사용한다.
ngrok 같은 경우에는 html 코드가 로컬호스트에 있다.
nogrok의 키값도 등록해줘야 한다. html -> ngrok key -> nogrok server
방화벽을 우회해서 파일을 서비스한다.
ngrok 방법
ngrok 로그인 후에 다운로드 탭
64비트 다운받아서 압축 풀기
ngrok.exe 가 나온다.
바탕화면에 붙여넣기한다.
이제 CLI 환경이 필요하다.
vscode 터미널 입력환경
ctrl shift ~
pwd로 현재 위치를 확인한다.
두 가지 디렉토리 위치가 필요하다.
자신의 html 파일이 있는 디렉토리로 간다.
cmd 창도 tab 키 누르면 자동완성 된다.
ls로 찾기
백엔드 개발을 하려면 리눅스 환경에 익숙해져야 한다.
ngrok.exe 파일이 있는 디렉토리에서,
홈페이지 installation에 있던 명령어를 복사 붙여넣기 한다.
그 다음에는 다음과 index.html이 존재하는 자신의 경로를 다음 명령어를 참고해서 붙인다.
ngrok http 'file:///C:\Users\User\Desktop\code\web_programming\web'
그러면 해당 앱에 대한 홈페이지 경로가 출력된다.
그 경로로 접속하면 된다.
rgrok는 로그도 지원한다.
어떤 사람이 어떤 페이지를 열었는지를 알 수 있다.
안되는 사람들의 환경 - Ram Cpu SSD 등이 있다.
물리적인 장치들을 사용하는 프로그램 = 커널 소프트웨어(OS의 핵심)이다.
서버의 OS로 리눅스를 사용하는 이유가 이것이다.(OSX)
리눅스는 윈도우보다 훨씬 안정적이다.
이걸 다루기 위해서는 cmd에서 명령어 체계 - bash shell - 을 사용한다.
이거랑 비슷하게 window에서 만든 게 window powershell이다.
그래서 anaconda prompt와 anaconda powershell prompt는 다른 창이다.
개발하면 osx하고 리눅스는 지원하는데 윈도우는 지원하지 않는 프로그램들이 너무 많다.
회사에서 모델 개발할 때는 거의 클라우드에서 돌린다.
가지고 있는 pc는 그냥 클라이언트용이라고 보면 된다.
회사에 가서 자기 pc에서만 쓸 게 아니므로,
AWS 계정으로 Ec2 인스턴스를 만든다.
RDS는 사용하지 않는다. 너무 비싸다.
개인 PC에서 flask를 통해서 코드를 만들고, 코드를 ec2에 올려서 인터넷 망을 통해서, 해당 aws에 다른 pc가 접속할 수 있도록 만든다.
gitbash를 통해서 ec2(ubuntu)로 접속해서, 파일을 삭제하거나 업로드하고 웹 어플리케이션 서버를 실행하고 )enginex같은 걸 사용), mongodb를 사용하고 등을 전부 하려면
전부 리눅스를 써야 한다.
로그인 페이지 만들기
메인에서 섹션에 이메일하고 패스워드 인풋 창을 만들어야 한다.
<section class="wrap">
<div class="login-wrap">
<div class="attr-wrap">
<label>Work Email</label></br>
<input id="email" type="email" placeholder="input email adress.">
</div><hr> <!--수평선 만들기-->
<div class="attr-wrap">
<label>Password</label></br>
<input id="pw" type="password" placeholder="input password.">
</div><hr>
<small class="msg">Write msg.</small>
</div>
<button id="join-btn" type="button">Join</button>
</section>이메일 넣고, 패스워드 넣는 부분을 input으로 만든다.
그리고 버튼도 만든다.
각 엘리먼트를 작동시킬 수 있도록 각자 id도 포함시켜준다.
같은 걸 로그인 페이지에서도 쓰므로, 로그인 페이지에 덮어씌워주면 된다.
login.css
.login-wrap{
width: 300px;
}
#email, #pw {
border:none;
border-radius: 3px;
padding: 10px;
/* 인풋창이 붙어 있다. */
margin-top: 10px;
width: calc(100% - 20px);
/* wid 100%만 주면 조금 삐져나왔다. */
/* 오른쪽 10px, 왼쪽 10px을 줘서 삐져나왔으므로, -20px을 해주면 된다. */
}
.attr-wrap{
height: 75px;
/* 1px 정도의 단위 - 디자이너 눈에 보인다. */
}
.login-wrap>.attr-wrap>label {
float: left;
margin-top:10px;
}
.msg{
/* display: none; */
/* 처음에 안보이게 바꾸고, 나중에 자바스크립트로 보이게 바꾼다. */
float: left;
height: 0;
font-size : 10px;
color: yellow
}
/* float left를 하면 height이 없어진다. */
#login-btn{
margin-top: 20px;
/* 보이던 안보이던 똑같은 위치 */
/* margin을 설정하지 않으면 보이느냐 보이지 않느냐에 따라서 올라갔다 내려갔다 한다. */
width: 100%;
padding: 10px;
}
3번정도 만들어 볼 수 있는 시간을 제시한다.
추가적인 조인 페이지
same password를 추가한다.
<div class="attr-wrap">
<label>Check Password</label><br>
<input id="ckpw" type="password" placeholder="input same password." value="12345">
</div><hr>
나머지 css 설정은 login과 같으므로, login css를 빌려와서 join에 맞게 id만 고쳐준다.
.join-wrap{
width: 300px;
}
#email, #pw, #ckpw{
border:none;
border-radius: 3px;
padding: 10px;
/* 인풋창이 붙어 있다. */
margin-top: 10px;
width: calc(100% - 20px);
/* wid를 주면 조금 삐져나왔다. */
/* 오른쪽 10px, 왼쪽 10px을 줘서 삐져나왔으므로, -20px을 해주면 된다. */
}
.attr-wrap{
height: 75px;
/* 1px 정도의 단위 - 디자이너 눈에 보인다. */
}
.join-wrap>.attr-wrap>label {
float: left;
margin-top:10px;
}
.msg{
/* display: none; */
/* 처음에 안보이게 바꾸고, 나중에 자바스크립트로 보이게 바꾼다. */
float: left;
height: 0;
font-size : 10px;
color: yellow
}
/* float left를 하면 height이 없어진다. */
#join-btn{
margin-top: 20px;
/* 보이던 안보이던 똑같은 위치 */
/* margin을 설정하지 않으면 보이느냐 보이지 않느냐에 따라서 올라갔다 내려갔다 한다. */
width: 100%;
padding: 10px;
}
추가적으로 3개의 것들을 더 넣는다.
주소, 생년월일, 추천경로이다.
<div class="attr-wrap">
<label>Address</label><br>
<div class="input-addr">
<label><input type="radio" name="addr">Seoul</label>
<label><input type="radio" name="addr">Pusan</label>
</div>
</div><hr>
<div class="attr-wrap">
<label>Birthday</label>/label><br>
<input id="birth" type="date">
</div><hr>
<div class="attr-wrap">
<label>Subsciption Path</label><br>
<select id="subscription">
<option value="opt0">Not Selected</option>
<option value="opt1" selected>Recommended by Friends</option>
<option value="opt2">Adcertisemnet</option>
</select>
</div><hr>
디테일하게 css를 설정 할 떄는 개발자 도구에서 봐서 마진을 준다.
테스트 같은 거 할때, value 데이터로 넣어놓으면 실제로 그 값이 들어간다.
.join-wrap{
width: 300px;
}
#email, #pw, #ckpw, #birth, #subscription {
border:none;
border-radius: 3px;
padding: 10px;
/* 인풋창이 붙어 있다. */
margin-top: 10px;
width: calc(100% - 20px);
/* wid를 주면 조금 삐져나왔다. */
/* 오른쪽 10px, 왼쪽 10px을 줘서 삐져나왔으므로, -20px을 해주면 된다. */
}
#subscription{
width: 100%;
/* 어떤게 적용되는가? */
/* 똑같은 엘리먼트에 같은 스타일을 적용하면 뒤에 있는 게 적용이 된다. */
/* importtant를 쓰면 우선적으로 되기도 한다. */
}
.attr-wrap{
height: 75px;
/* 1px 정도의 단위 - 디자이너 눈에 보인다. */
}
.join-wrap>.attr-wrap>label {
float: left;
margin-top:10px;
}
.input-addr{
margin: 20px 0px 0px -5px;
}
.input-addr>label{
float: left;
}
#해당 라벨만 왼쪽으로 붙인다.
.m-0 {
margin:0;
/* 나눠주는 줄도 마진을 준다. */
}
.msg{
display: none;
/* 처음에 안보이게 바꾸고, 나중에 자바스크립트로 보이게 바꾼다. */
float: left;
height: 0;
font-size : 10px;
color: yellow
}
/* float left를 하면 height이 없어진다. */
#join-btn{
margin-top: 20px;
/* 보이던 안보이던 똑같은 위치 */
/* margin을 설정하지 않으면 보이느냐 보이지 않느냐에 따라서 올라갔다 내려갔다 한다. */
width: 100%;
padding: 10px;
}
<input id="ckpw" type="password" placeholder="input same password." value="12345">
radio 버튼은 checked를 사용.
birthday도 value로 자동 설정 가능하다.
최종적으로 완성된
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Join</title>
<link rel="icon" href="https://www.kt.com/favicon.ico">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/join.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<label for=""><b>KT</b></label>
<!-- ul>(li>a)*3 -->
<ul>
<li><a href="index.html" >Home</a></li>
<li><a href="join.html" class="active">Join</a></li>
<li><a href="login.html">Login</a></li>
</ul>
</nav>
</header>
<main class="contents">
<section class="wrap">
<div class="join-wrap">
<div class="attr-wrap">
<label>Work Email</label></br>
<input id="email" type="email" placeholder="input email adress.">
</div><hr> <!--수평선 만들기-->
<div class="attr-wrap">
<label>Password</label></br>
<input id="pw" type="password" placeholder="input password.">
</div><hr>
<div class="attr-wrap">
<label>Check Password</label><br>
<input id="ckpw" type="password" placeholder="input same password." value="12345">
</div><hr>
<div class="attr-wrap">
<label>Address</label><br>
<div class="input-addr">
<label><input type="radio" checked name="addr">Seoul</label>
<label><input type="radio" name="addr">Pusan</label>
</div>
</div><hr class="m-0">
<div class="attr-wrap">
<label>Birthday</label><br>
<input id="birth" type="date" value="2000-08-23">
</div><hr>
<div class="attr-wrap">
<label>Subsciption Path</label><br>
<select id="subscription">
<option value="opt0">Not Selected</option>
<option value="opt1" selected>Recommended by Friends</option>
<option value="opt2">Adcertisemnet</option>
</select>
</div><hr>
<small class="msg">Write msg.</small>
</div>
<button id="join-btn" type="button">Join</button>
</section>
</main>
<footer>
<p>All rights reserved. ©KT</p>
</footer>
</body>
</html>
html과 css를 개발하는 직군을 퍼블리셔라고 불린다.
퍼블리셔가 가장 어려워하는 부분은 크로스 브라우징이다.
브라우저마다 css,html이 적용되는 문법이 다르다.
브라우저의 버전이 달라져도 다르게 표현될 수 있다.
이걸 엣지나 사파리나 오페라 같은 데에서도 잘 보이도록 수정을 해줘야 한다.
디자이너는 다 mac을 쓰고, 퍼블리셔나 개발자는 윈도우를 썼을 때,
mac에서는 예쁘게 나오는데, 개발자의 환경에서는 안 예쁠때가 있다.
모든 브라우저, 모든 페이지에서 정상적으로 잘 되는지 안되는지 확인을 해야 하는데, 너무 시간이 많이 든다.
그래서 나온 게 셀레니움이다.
셀레니움의 진짜 목적은 코드를 바꿨을 때, 모든 페이지를 이동하면서 스크린샷을 뜨고, 스크린 샷 뜬 화면을 검수한다.
그렇게 자동화시킨 것이다.
QA 팀에서 이미지만 확인한다.