3차 세션 : 웹페이지 제작, 보안 기초
안녕하세요. 큐시즘 대외홍보팀 이지원입니다.
이번 포스팅은 이전 포스팅에 이어
이권형 교육자와 배소연 교육자의 세션을 소개하겠습니다.
이전 인공지능과 관련된 교육 포스팅은 아래 링크를 참고해주세요!
2019/11/03 - [KUSITMS 교육자료] - [큐시즘 3차 세션(1)] 인공지능의 기초
그럼 두 번째 포스팅 시작합니다!
두 번째 강의의 주제는 간단한 웹페이지를 직접 제작해보는 실습입니다!
html과 css를 토대로 페이지를 직접 제작해보는 시간이었는데
교육자님의 구체적인 학습 자료로 쉽게 이해할 수 있었습니다.
잊어버리기 전에 포스팅으로 한 번 더 복습해보도록 해요!
Goal : 로그인 페이지 만들기!!
우리가 이번 세션을 통해 만들어볼 페이지는 로그인 페이지와 관리자 페이지입니다.
관리자 페이지는 해킹 실습에서 직접 보안을 뚫고 조작해볼 수 있었습니다.
이전 시간 개념 복습
여기서 잠깐, 이전 시간에 배운 웹 관련 개념들을 정리하고 넘어가 봅시다.
- HTML : 웹 콘텐츠를 잘 보여주기위한 구조 담당
- CSS : 배치 및 디자인 담당
- Javascript : 사용자에 반응하며 웹사이트를 동적으로 만들어줌
이 개념들을 잘 숙지하셨다면 이제 본격적으로 페이지를 만들어볼까요?
웹페이지 만들기
교육자님께서 준비해주신 대로 Repl 사이트를 활용하였습니다!
.
<title,> <body> 태그 수정
우리는 이런 틀을 기본으로 원하는 페이지 옵션들을 변경해줄건데요,
가장 처음으로 빨간 색 박스 표시가 되어있는 제목 부분을 원하는 페이지 제목명으로 변경해줬습니다.
기타 옵션 수정_제목, 줄바꾸기, 입력 등
다음은 페이지의 제목을 달아주기 위해 h태그를 활용합니다.
이곳에 로그인 화면에 어울리는 문구를 순서에 맞게 각각 넣어주면 되겠지요?
참고로 h태그에는 h1, h6과 같이 태그 번호가 달려있는데요,
정확한 사용법을 알고 사용하고 싶으시다면 구글링을 적극 활용하시길 바랍니다!
구글링으로 위와 같은 유용한 정보들을 금방 찾아낼 수 있습니다.
위의 구글링은 각각 줄바꾸기와 입력 기능이었습니다.
다음으로는 Username과 Password 칸에 placeholder 기능을 사용하여 안내 문구를 보여주는 기능을 추가하겠습니다.
이로써 각 칸에 사용자가 어떤 정보를 입력해야 하는지를 잘 알 수 있겠지요.
이 정도로 로그인 페이지의 전반적인 틀을 잡아두고 세부적인 옵션을 적용하면 다음과 같이 구현할 수 있습니다.
이렇게 구현한 페이지를 css를 통해 조금 더 다듬어 보도록 하겠습니다.
CSS 적용
다음과 같이 배경색이나 가로/세로 폭, 문자 배치 등의 옵션을 조절할 수 있습니다.
우리의 페이지 옵션에 맞게 여러가지를 적용시켜주면!!
이와 같은 최종 로그인 화면을 얻을 수 있습니다!
자세한 코드는 아래에 최종 코드 블럭으로 첨부해둘 테니 참고해주세요!
다음으로 관리자 페이지로 넘어가 보겠습니다.
관리자 페이지 생성
관리자 페이지는 큐밀리들의 큐시즘 성적이 관리되고 있는 페이지입니다.
로그인 시 이 페이지에 접속할 수 있습니다.
이 페이지에는 큐밀리들의 이름이 순서대로 표시되기를 바라기 때문에 <ol> 태그 안에 <li> 태그로 순서 있는 목록을 써줍니다.
<table> 태그
하지만 우리가 원하는 페이지는 이와 같은 순서 목록의 형태가 아니기 때문에 table 태그를 이용하여 형식을 다듬어 줍니다.
다음 태그는 구글링을 통해 얻은 소스코드 그대로를 가져와줍니다.
이후 로그인 페이지와 같은 원리로 여러 옵션을 덧붙여 주면
완성!!
어떠셨나요? 저는 이번 실습을 통해 원하는 분위기, 용도의 페이지를 직접 만들어볼 수 있어 정말 뿌듯했습니다.
흥미로운 교육 제공해주신 배소연 교육자님께 다시 한 번 감사드립니다! (짝짝짝)
지금부터 직접 만들어 로그인 페이지에서 아이디와 비밀번호를 모르는 채로 보안을 뚫어보도록 하겠습니다.
보안 기초 및 모의 해킹 실습
정보 보안이란 정보를 여러가지 위협으로부터 보호하는 것을 말합니다.
기밀성, 무결성, 가용성이라는 3대 법칙을 가지고 있는 보안은
여러 기업이나 정부 기관 등에서 고객의 신뢰를 얻기 위해 중요하게 관리하고 있는 가치입니다.
최근 취약한 보안 환경으로 인해 StuxNet, 북한 디도스 공격, 쇼핑몰 해킹 등의 심각한 문제들이 많이 발생했습니다.
실생활에서 비밀번호를 주기적으로 변동하는 등의 개인 정보 보호에 좀 더 힘쓰는 큐밀리가 되도록 합시다!
Encrytion
암호화, Encryption은 보안의 기초가 되는 개념입니다. 데이터를 암호화하여 정보를 보호하는 방법인데요
복호화를 위해서는 별도의 Key를 반드시 가지고 있어야 합니다.
HTTPS
HTTPS란 웹 프로토콜인 http에 암호화를 더하여 더욱 안전한 프로토콜을 말하며,
비대칭 암호화 방식을 사용합니다.
이 프로토콜을 사용함으로써 MITM공격과 session hijacking 등을 방지할 수 있습니다.
모의 해킹 실습
마지막 모의 해킹 실습입니다. 이전 시간에 만든 로그인 페이지에 지정된 Key 없이
관리자 계정을 탈취할 수 있도록 해킹을 해보았는데요.
큐밀리들은 관리자 계정 탈취에 성공하셨나요??
저는 마치 해커가 된 것처럼 재미있게 실습했던 것 같습니다!
지금까지 큐시즘의 3번째 세션을 다시 리마인딩해보는 시간을 가져보았습니다!
이번 주 세션을 통해 얻은 지식들 모두 큐밀리에게 도움이 되었으면 좋겠습니다.
그럼 우리는 다음 세션에서 다시 만나요!!
(안녕)
*위 자료에 대한 저작권은 배소연, 이권형 교육자에게 있습니다. 무단 전재 및 재배포를 금지합니다.*
'KUSITMS 활동 > 세션 일지' 카테고리의 다른 글
| [큐시즘 20기 1차 세션(2)] '디자인 씽킹'의 개념과 이를 활용한 실습까지! (0) | 2019.11.04 |
|---|---|
| [큐시즘 20기 1차 세션(1)] 20기 첫 정기교육의 시작, '스타트업이란?' (0) | 2019.11.04 |
| [큐시즘 20기 3차 세션(1)] 인공지능의 기초 (1) | 2019.11.03 |
| [큐시즘 15기 8차 세션] Start, Up (0) | 2017.05.30 |
| [큐시즘 15기 7차 세션] 수익은 어디에 있는가 (0) | 2017.05.14 |
