2024년 상반기 경북 네트워크형 캠퍼스 SW 아카데미에서 5개월간 배운 내용을 위주로 정리해봤습니다.
1. 웹 프론트엔드 개요
웹 프론트엔드란?
- 웹 페이지의 사용자 인터페이스(UI)를 개발하는 분야.
- HTML, CSS, JavaScript를 사용하여 구조, 디자인, 기능을 구현.
- 웹 표준, 접근성, 반응형 웹 디자인 원칙을 준수.
- 백엔드 개발자와 협력하여 웹 애플리케이션 완성.
웹 프론트엔드의 역할과 중요성
- UI 개발: 직관적이고 시각적으로 멋진 인터페이스 구현.
- 웹 기술 활용: 최신 웹 표준과 도구를 사용하여 다양한 브라우저와 기기에서 호환성 확보.
- 기기·브라우저 호환성: 반응형 웹 디자인과 크로스 브라우징 문제 해결.
- 보안 강화: HTTPS, 인증, 권한 관리로 보안 취약점 최소화.
<html> 태그
HTML 문서의 루트 요소로, 문서의 시작과 끝을 감쌈.
모든 HTML 요소는 <html> 태그 안에 작성.
<head> 태그
문서의 메타데이터와 정보를 포함.
주요 구성 요소:
<title>: 문서 제목.
<meta>: 문자 인코딩, 검색 엔진 최적화 등.
<link>: 외부 스타일시트나 리소스 연결.
<style>: CSS 스타일 정의.
<script>: JavaScript 코드 포함.
<body> 태그
웹 페이지의 실제 내용을 정의.
텍스트, 이미지, 링크, 테이블, 폼 등 모든 콘텐츠가 포함됨.
HTML 문서 기본 구조
<!DOCTYPE html>
<html>
<head>
<title>문서 제목</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>페이지 내용</h1>
<p>여기에 텍스트, 이미지 등이 들어갑니다.</p>
</body>
</html>
- <html>: 문서 전체.
- <head>: 정보 및 설정.
- <body>: 웹 페이지의 실제 내용.
- 실습 예제 아래는 수업시간에 실습으로 작성한 HTML의 기본 구조에 대한 예제 코드입니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section>
<h2>Services</h2>
<ul>
<li>Web Design</li>
<li>Front-end Development</li>
<li>Graphic Design</li>
</ul>
</section>
</main>
<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>
위의 예제 코드에서는 다음과 같은 구조를 갖습니다:
- 문서 유형(DOCTYPE) 선언: <!DOCTYPE html>
- HTML 루트 요소: <html>
- 문서 정보와 메타데이터를 포함하는 <head> 태그
- 웹 페이지의 실제 내용을 포함하는 <body> 태그
- <head> 태그 내에서 문자 인코딩, 문서 제목, 스타일시트 및 스크립트 파일의 링크를 포함하는 요소들
- <body> 태그 내에서 웹 페이지의 헤더, 내용, 푸터 등을 정의하는 요소들
이 예제 코드는 단순한 웹 페이지의 구조를 보여주며, 헤더, 내용, 푸터 등의 섹션으로 구성되어 있습니다. 이러한 구조를 활용하여 웹 페이지의 레이아웃과 내용을 조합할 수 있습니다.
오늘 공부 내용 요약 끝..!
'웹 프론트엔드' 카테고리의 다른 글
| JavaScript 1 - 변수 (1) | 2025.02.06 |
|---|---|
| OpenAPI의 이해 (0) | 2025.02.03 |
| 부트스트랩의 이해 (1) | 2025.02.02 |
| CSS의 기본 (1) | 2025.01.29 |