소개
이 랩에서는 사용자 지정 Cascading Style Sheets (CSS) 파일을 캡티브 포털의 index.html 파일에 통합하는 방법을 배웁니다. 기본적인 HTML 페이지도 기능적이지만, 사용자 지정 스타일을 적용하면 더욱 전문적이고 설득력 있게 보입니다. style.css 파일을 생성하고, 스타일 규칙을 추가한 다음, 이를 HTML 문서에 연결하여 로그인 페이지의 모양을 변환합니다.
사용자 지정 포털 디렉토리 열기
이 단계에서는 사용자 지정 포털 파일이 있는 디렉토리로 이동합니다. 새 파일을 만들거나 기존 파일을 편집하는 모든 작업은 이 디렉토리 내에서 수행됩니다.
먼저 cd (change directory) 명령을 사용하여 프로젝트 폴더 내에 있는 custom_portal 디렉토리로 이동합니다.
cd ~/project/custom_portal
다음으로 ls -l 명령을 사용하여 디렉토리의 내용을 나열합니다. 이를 통해 올바른 위치에 있는지 확인하고 작업할 index.html 파일을 볼 수 있습니다.
ls -l
index.html 파일이 있음을 나타내는 다음과 같은 출력이 표시됩니다.
total 4
-rw-r--r-- 1 labex labex 483 Dec 01 12:00 index.html
CSS 규칙이 포함된 'style.css' 파일 생성
이 단계에서는 로그인 페이지의 시각적 스타일을 정의하는 CSS 파일을 생성합니다. CSS 를 사용하면 HTML 요소의 레이아웃, 색상, 글꼴 및 전반적인 모양을 제어할 수 있습니다.
nano 텍스트 편집기를 사용하여 style.css라는 파일을 생성합니다.
nano style.css
nano 편집기가 열리면 다음 CSS 코드를 파일에 복사하여 붙여넣습니다. 이 코드는 깔끔하고 현대적인 로그인 양식 디자인을 만들기 위해 다양한 HTML 요소를 대상으로 합니다.
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 320px;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
button:hover {
background-color: #0056b3;
}
코드를 붙여넣은 후 Ctrl+X를 누르고 Y를 누른 다음 Enter를 눌러 파일을 저장하고 nano를 종료합니다.
'index.html' 파일에 스타일시트 연결하기
이 단계에서는 새로 생성한 style.css 파일을 index.html 파일에 연결합니다. 스타일시트를 생성하는 것만으로는 충분하지 않습니다. HTML 문서에 해당 스타일시트를 사용하도록 알려야 합니다. 이는 HTML 의 <head> 섹션 안에 <link> 태그를 추가하여 수행됩니다.
nano 편집기로 index.html 파일을 엽니다.
nano index.html
파일의 <head> 섹션으로 이동합니다. 닫는 </head> 태그 바로 앞에 다음 줄을 추가합니다.
<link rel="stylesheet" href="style.css" />
이제 index.html 파일은 다음과 같이 보일 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WiFi Login</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="login-container">
<h1>Please Log In to Access the Internet</h1>
<form action="#" method="post">
<p>Username:</p>
<input
type="text"
name="username"
placeholder="Enter your username"
required
/>
<p>Password:</p>
<input
type="password"
name="password"
placeholder="Enter your password"
required
/>
<br /><br />
<button type="submit">Log In</button>
</form>
</div>
</body>
</html>
Ctrl+X, Y, Enter를 눌러 변경 사항을 저장하고 편집기를 종료합니다. 이제 HTML 페이지가 스타일시트와 연결되었으며, 페이지를 렌더링하는 모든 브라우저는 CSS 규칙을 적용합니다.
사용자 정의 포털로 공격 시작하기
이 단계에서는 스타일이 적용된 캡티브 포털 페이지를 미리 볼 수 있습니다. 전체 네트워크 공격을 시작하는 대신, 간단한 Python 웹 서버를 사용하여 파일을 로컬에서 호스팅할 것입니다. 이를 통해 사용자가 페이지를 어떻게 보게 될지 정확하게 확인할 수 있습니다.
아직 ~/project/custom_portal 디렉토리에 있는지 확인하십시오. 포트 8000에서 웹 서버를 시작하려면 다음 명령을 실행하십시오.
python3 -m http.server 8000
이 명령은 Python 에게 내장된 http.server 모듈을 실행하도록 지시합니다. 이 모듈은 현재 디렉토리 (custom_portal) 의 파일을 제공합니다. 서버는 포트 8000에서 로컬 머신에서 액세스할 수 있습니다.
터미널에 서버가 실행 중임을 나타내는 메시지가 표시됩니다.
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
서버가 활성화되었습니다. 이 터미널을 계속 실행한 상태로 다음 단계로 진행하여 페이지를 확인하십시오.
로그인 페이지에 사용자 정의 스타일이 적용되었는지 확인하기
마지막 단계에서는 웹 브라우저에서 로그인 페이지를 보고 CSS 스타일이 올바르게 적용되었는지 확인할 것입니다.
실험 환경의 오른쪽에서 데스크톱 인터페이스를 볼 수 있습니다. 웹 브라우저 아이콘을 클릭하여 엽니다.
브라우저의 주소 표시줄에 다음 URL 을 입력하고
Enter를 누릅니다.http://127.0.0.1:8000
이제 사용자 정의 로그인 페이지가 표시되어야 합니다. 스타일이 적용되지 않은 일반 페이지 대신, 연한 회색 배경, 그림자가 있는 중앙 정렬된 흰색 로그인 상자, 스타일이 적용된 입력 필드 및 파란색 로그인 버튼이 있어야 합니다. 이는 style.css 파일이 성공적으로 연결되고 적용되었음을 확인합니다.
모양을 확인한 후 Python 서버가 실행 중인 터미널로 돌아가 Ctrl+C를 눌러 서버를 중지하십시오.
요약
이 실험실에서는 사용자 정의 CSS 스타일시트를 통합하여 기본 캡티브 포털을 성공적으로 향상시켰습니다. 스타일을 관리하기 위한 별도의 .css 파일을 생성하고, 특정 HTML 요소를 대상으로 하는 CSS 규칙을 작성하고, <link> 태그를 사용하여 스타일시트를 HTML 문서에 연결하는 방법을 배웠습니다. 로컬 웹 서버를 사용하여 작업을 미리 봄으로써 스타일링의 즉각적인 영향을 확인할 수 있었고, 단순한 페이지를 시각적으로 매력적이고 더 설득력 있는 로그인 양식으로 변환했습니다. 이 기술은 웹 개발의 기본이며 효과적인 사용자 정의 캡티브 포털을 만드는 데 중요합니다.