모의해킹 & 웹 애플리케이션의 취약점을 효과적으로 식별하고 분석을 위해 시작
프론트엔드
웹페이지의 레이아웃, 메뉴, 디자인 요소, 버튼, 이미지 및 그래프와 같이 사용자가 직접적으로 상호작용할 수 있는 사용자 인터페이스
프론트엔드의 역할
- 사용자 인터페이스(UI) 개발: 사용자가 웹사이트를 사용하기 쉽게 만드는 것을 목표로 한다
- 웹 기술과 도구 활용: 사용자 경험을 개선하고 다양한 기기에서 일관된 성능 제공을 위해 최신 기술, 도구를 활용한다.
- 웹 성능 최적화: 이미지 최적화, 자바스크립트 코드 압축, 캐싱 등의 기법을 사용하여 웹 페이지의 성능을 개선한다.
- 다양한 기기 및 브라우저 호환성: 데스크톱, 태블릿, 스마트폰 등 다양한 기기에서 웹 사이트가 동일하게 동작하도록 보장한다.
- 웹 보안: HTTPS를 사용하여 사용자 데이터를 안전하게 전송하고, 적절한 인증 및 권한 관리를 통해 웹 애플리케이션의 보안 취약점을 줄입니다
프론트엔드에서는 대표적으로 HTML, CSS,JS가 있는데
- HTML : 웹의 구조를 정의
- CSS : 웹의 스타일, 레이아웃 정의
- JavaScript : 웹에 동적 기능 추가
각각의 특징을 크게 보면 위와 같다
HTML의 정의 및 역사
웹 페이지를 만들기 위해 사용되는 마크업 언어로, 브라우저가 읽을 수 있는 문서 구조를 정의하고 텍스트, 이미지 등을 다양한 콘텐츠를 포함하여 사용자에게 표시
CSS의 주요 프레임워크 및 라이브러리
- Bootstrap: 인기 있는 반응형 CSS 프레임워크로, 미리 정의된 스타일과 컴포넌트를 제공한다
- Foundation: Zurb에서 개발한 프레임워크로, 강력한 반응형 디자인 툴을 제공 한다
- Tailwind CSS: 유틸리티 클래스 기반의 프레임워크로, 빠르게 스타일링을 구현 한다
JavaScript 의 주요 프레임워크 및 라이브러리
- React: Facebook에서 개발한 컴포넌트 기반 라이브러리로, SPA 개발에 많이 사용됩니다. 상태 관리와 가상 DOM을 통해 효율적인 렌더링을 지원 한다
- Angular: Google에서 개발한 프레임워크로, 대규모 애플리케이션을 구조적으로 개발할 수 있게 도와줍니다. TypeScript를 기본 언어로 사용하며, MVC 아키텍처를 따릅니다
- Vue.js: 간단하고 유연한 프레임워크로, 점진적으로 채택할 수 있는 특성을 가지고 있습니다. Vue는 데이터 바인딩과 컴포넌트 기반 개발을 쉽게 할 수 있게 해줍니다.
HTML 구조 및 태그
<!DOCTYPE html>
<html>
<head>
<title>lsh</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>오늘은 2024년 07월 25입니다..</p>
</body>
</html><html> <head> <body>는 제일 기본적이면서 필수적인 HTML의 구조이다.
- <html></html>: HTML 문서의 전체적인 컨테이너 역할을 하며 모든 HTML 요소들은 이 태그 안에 위치하며, 문서의 시작을 의미한다.
- <head></head>: 태그 안에는 문서의 메타 데이터와 외부 리소스에 대한 정보들이 들어간다.
- <body></body>: 태그 안에는 실제로 사용자에게 표시되는 본문 내용이 들어간다.
더 많고 다양한 태그들을 사용해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>정리</title>
</head>
<body>
<h1>SW전문인재양성사업 5기에 오신 것을 환영합니다..</h1>
<hr>
<h2>풀스택 개발자 양성을 목표로 합니다.
<br>
<img src="coding.jpg" alt="Sample Image" style="width: 200px; height:auto;">
<br>
<a href=https://shsecurity1.tistory.com>나의 블로그로 이동</a>
</body>
</html><title> 태그는 웹 브라우저의 제목 표시줄이나 페이지 탭에 표시된다. 탭 부분은 '정리'로 표시가 된다
<h2> HTML 문서에서 제목이나 섹션의 두 번째 수준의 제목의 크기로 표시가 된다.
<hr> : 수평선을 삽입하는 태그이다.
<br> : 태그는 줄 바꿈을 강제하는 태그이다.
바로 위 두 태그를 처음 접할 때 <hr>과 <br>이 헷갈려서 썼다가 지우고 다시 쓴 적이 많았다.
<img src="coding.jpg" alt="Sample Image" style="width: 200px; height:auto;">1. 이미지 파일 경로를 지정해서 이미지를 가져온다
2. 이미지를 불러오지 못할 때 띄울 문구를 "Sample Image"로 지정
3. 인라인 스타일을 활용해 즉시 이미지 크기를 조절
<a href=https://shsecurity1.tistory.com>나의 블로그로 이동</a>< a href>를 활용해 다른 외부 링크로 연결하는 데 사용
처음 이미지를 넣었을 때 사진크기가 화면을 꽉 채웠었지만 style을 이용해서 크기를 조절했고,
'나의 블로그로 이동' 버튼을 누르면 오류 없이 내 블로그로 이동이 되었다.
위의 코드에서 네비게이션 태그를 써서 네비게이션 바를 추가해봤다.
<!DOCTYPE html>
<html>
<head>
<title>정리</title>
</head>
<body>
<h1>SW전문인재양성사업 5기에 오신 것을 환영합니다..</h1>
<hr>
<h2>풀스택 개발자 양성을 목표로 합니다.
<br>
<img src="coding.jpg" alt="Sample Image" style="width: 200px; height:auto;">
<br>
<a href=https://shsecurity1.tistory.com style="display: block; margin-bottom: 30px;">나의 블로그로 이동</a>
<nav>
<a href="https://www.naver.com/">Naver</a>
<a href="https://www.google.com/">google</a>
<a href="https://www.instagram.com/">instagram</a>
<a href="https://www.github.com/">github</a>
</nav>
</body>
</html>
- 16 ~ 21라인을 보면 <nav> 태그를 활용해서 하나의 네비게이션 바로 묶었다.
- <nav>태그는 주로 네비게이션 링크나 메뉴를 정의할 때 사용한다.
