반응형
🍀
지금까지 네트워크 내용을 모두 학습하였습니다!
이제는 웹을 직접 재작해보며 웹의 작동 방식을 공부해봅시다!
💡 이번에 배울 내용은 다음과 같습니다.
1. HTML, CSS, JS의 기본 개념, 용도, 사용방법, 관계 등등
2. 웹 페이지 제작에 필요한 기본적인 HTML 태그들
3. 스타일링을 위한 CSS의 기본적인 문법과 속성들
4. 웹 페이지의 동적 기능을 위한 JS의 기본적인 문법과 함수들
HTML, CSS, JS는 웹 페이지 제작의 가장 기본이 되는 요소들입니다. HTML로 웹 페이지의 구조를 만들고, CSS로 웹 페이지를 꾸며주며, JS로 웹 페이지에 동적인 기능을 추가할 수 있습니다.
웹 해킹을 배우기 위해서는 이 세 가지 요소를 잘 이해하고 있어야 합니다.
1. HTML (HyperText Markup Language)
HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.
브라우저가 이를 해석하여 사용자가 볼 수 있는 웹 페이지를 만듭니다. Tim Berners-Lee가 1991년 처음으로 제안 하였으며, HyperText 시스템에서 시작되었습니다.
1. 마크업 언어
- HTML은 마크업 언어로, 데이터를 표시하거나 구조화하기 위해 태그(Tag)를 사용합니다.:
<p>이것은 문단입니다.</p>2. 브라우저 해석
- HTML 문서는 텍스트 파일로 작성되며, 브라우저가 이를 해석하여 사용자가 볼 수 있는 형태로 렌더링합니다.
3. 구조와 콘텐츠 중심
- HTML은 웹 페이지의 구조와 콘텐츠를 정의하지만, 스타일은 CSS, 동작은 JavaScript에서 처리합니다.
4. 웹 표준 준수
- HTML은 W3C(World Wide Web Consortium)가 규정한 웹 표준을 따릅니다.
5. 플랫폼 독립적
- HTML은 모든 브라우저와 플랫폼에서 실행 가능하며, 특별한 소프트웨어가 필요하지 않습니다.
6. 확장성
- HTML은 XML 및 XHTML로 확장 가능하며, CSS와 JavaScript와도 잘 통합됩니다.
HTML의 기본 개념
1. 태그 (Tag)
- HTML은 태그로 구성됩니다.
- 태그 형식:
- 열림 태그: <태그이름>
- 닫힘 태그: </태그이름>
<p>이것은 문단입니다.</p>2. 요소 (Element)
- 요소(Element)는 태그와 그 내용을 포함합니다.
- <h1>제목</h1> (태그 + 내용)
3. 속성 (Attribute)
- 속성(Attribute)는 태그에 추가 정보를 제공합니다.
- 형식: 속성이름="속성값"
<img src="image.jpg" alt="이미지 설명">4. HTML 문서의 기본 구조
<!DOCTYPE html> <!-- 문서 형식 선언 -->
<html> <!-- 문서의 루트 -->
<head> <!-- 메타 정보 -->
<title>웹 페이지 제목</title>
</head>
<body> <!-- 사용자에게 보이는 부분 -->
<h1>웹 페이지의 제목</h1>
<p>여기에 콘텐츠를 작성합니다.</p>
</body>
</html>- <!DOCTYPE html>:
- HTML5 문서를 선언. (가장 첫문단)
- <html>:
- 전체 문서를 감싸는 루트 요소.
- <head>:
- 제목, 메타데이터, CSS 파일 연결 등 포함.
- <body>:
- 사용자에게 보여지는 콘텐츠가 들어가는 영역.
5. 주요 태그
(1) 구조 관련 태그
- <html>: 문서의 루트 요소.
- <head>: 문서의 메타 정보 포함.
- <body>: 사용자에게 표시되는 본문.
(2) 텍스트 태그
- <h1> ~ <h6>: 제목 태그(숫자가 작을수록 중요).
숫자가 작을수록 소제목에 가까움<h1>가장 중요한 제목</h1> <h6>가장 덜 중요한 제목</h6> - <p>: 문단.
- <br>: 줄바꿈.
- <span>: 인라인 요소 그룹화.
- <strong>: 굵은 텍스트.
- <em>: 기울임 텍스트.
(3) 링크 및 미디어
- <a href="URL">: 하이퍼링크.
<a href="https://example.com">클릭하세요</a>- <img>: 이미지 삽입.
<img src="image.jpg" alt="설명">- <video>: 비디오 삽입.
<video src="video.mp4" controls></video>- <audio>: 오디오 삽입.
<audio src="audio.mp3" controls></audio>(4) 목록 태그
- 순서 있는 목록:
<ol> <li>항목 1</li> <li>항목 2</li> </ol>- 순서 없는 목록:
<ul> <li>항목 A</li> <li>항목 B</li> </ul>(5) 폼 태그
- 사용자 입력을 위한 태그.
<form action="/submit" method="post">
<label for="name">이름:</label>
<input type="text" id="name" name="name">
<button type="submit">제출</button>
</form>
2. CSS (Cascading Style Sheets)
CSS는 HTML 요소의 스타일과 레이아웃을 정의하는 스타일 시트 언어입니다.
웹 페이지를 시각적으로 더 아름답게 표현하며, 사용자 경험(UX)을 개선합니다.
HTML의 발전 초기, HTML 문서에 스타일(색상, 크기 등)을 적용하려면 HTML 태그에 직접 속성을 지정해야 했습니다. 이러한 방식은 스타일 관리가 어렵고 중복된 코드를 반복 작성해야 하거나 HTML 문서의 가독성이 떨어지는 문제로 인해 개발 되었습니다.
1. 스타일과 레이아웃 지정
- HTML 요소의 스타일(색상, 폰트 등)과 레이아웃(크기, 위치 등)을 정의합니다.
2. HTML과의 분리
- HTML의 구조와 스타일을 분리하여 유지보수성을 향상합니다.
- 외부 스타일시트를 통해 여러 HTML 문서에서 동일한 스타일을 재사용할 수 있습니다.
3. 계단식(Cascading) 스타일
- CSS의 "Cascading"은 스타일의 우선순위를 의미합니다.
- 여러 스타일이 동일한 요소에 적용될 때, 다음 규칙에 따라 우선순위가 결정됩니다:
- 중요도: !important 선언된 스타일이 최우선.
- 명시도(Specificity): 선택자가 더 구체적일수록 우선.
- 선언 순서: 나중에 선언된 스타일이 우선.
4. 브라우저 독립성
- 표준 CSS는 대부분의 브라우저에서 동일하게 동작하지만, 일부 브라우저별 속성(prefix)가 필요할 때도 있습니다.
5. 반응형 웹 디자인
- 미디어 쿼리를 사용하여 다양한 디바이스(PC, 태블릿, 스마트폰)에 적합한 레이아웃을 제공합니다.
CSS의 기본 개념
1. CSS의 사용 방식
CSS는 세 가지 방식으로 HTML에 적용할 수 있습니다:
(1) 인라인(In-line) 스타일
- HTML 요소에 직접 스타일을 정의.
- 적용 범위가 제한적이며 유지보수에 비효율적.
<h1 style="color: blue; font-size: 20px;">안녕하세요</h1>(2) 내부(Internal) 스타일
- HTML 문서의 <head> 내부에서 <style> 태그를 사용.
<style> h1 { color: red; font-size: 24px; } </style>(3) 외부(External) 스타일
- 별도의 .css 파일에 스타일을 정의하고 HTML 문서에서 <link>로 연결.
- 권장 방식으로, 여러 문서에서 동일한 스타일을 적용할 수 있음.
<link rel="stylesheet" href="styles.css">
2. CSS 문법
기본 구조
선택자 { 속성: 값; }- 선택자(Selector): 스타일을 적용할 HTML 요소를 지정.
- 속성(Property): 적용할 스타일의 종류.
- 값(Value): 속성에 지정할 스타일 값.
h1 {
color: blue; /* 텍스트 색상 */
font-size: 24px; /* 폰트 크기 */
text-align: center; /* 텍스트 가운데 정렬 */
}3. 주요 CSS 선택자
(1) 기본 선택자
- 태그 선택자: 특정 HTML 태그를 선택.
- 예: p, h1, div
- 클래스 선택자: .로 시작하며 특정 클래스에 스타일 적용.
- 예: .className
- 아이디 선택자: #로 시작하며 특정 ID에 스타일 적용.
- 예: #idName
(2) 복합 선택자
- 자식 선택자: >를 사용하여 특정 자식 요소를 선택.
- 예: div > p
- 후손 선택자: 공백으로 요소 간 관계를 지정.
- 예: div p
- 형제 선택자: + 또는 ~를 사용하여 형제 요소를 선택.
- 예: h1 + p
(3) 가상 클래스와 가상 요소
- 가상 클래스: 특정 상태의 요소 선택.
- 예: a:hover (마우스를 올렸을 때).
- 가상 요소: 요소의 특정 부분 선택.
- 예: p::first-line (첫 번째 줄).
4. 주요 CSS 속성
(1) 텍스트 스타일링
- color: 텍스트 색상.
- font-size: 텍스트 크기.
- font-family: 글꼴 설정.
- line-height: 줄 간격.
- text-align: 텍스트 정렬.
(2) 박스 모델(Box Model)
- HTML 요소는 다음 네 가지 영역으로 구성:
- Content: 콘텐츠 영역.
- Padding: 콘텐츠와 테두리 사이의 내부 여백.
- Border: 테두리.
- Margin: 테두리 바깥의 외부 여백.
- 관련 속성:
- margin, padding, border, width, height
(3) 배경
- background-color: 배경색.
- background-image: 배경 이미지.
- background-size: 이미지 크기.
(4) 레이아웃과 위치
- position: 요소의 위치 지정(정적, 고정, 절대, 상대).
- top, left, right, bottom: 위치 값.
- display: 요소의 표시 방식(block, inline 등).
- z-index: 요소의 쌓이는 순서.
5. 반응형 디자인
- 미디어 쿼리: 화면 크기에 따라 다른 스타일 적용.
@media (max-width: 600px) { body { background-color: lightblue; } }
3. JavaScript(JS)
JavaScript는 웹 페이지에 동적 기능을 추가하고 사용자와 상호작용할 수 있도록 만들어진 프로그래밍 언어입니다. 웹 브라우저에서 실행되며, HTML과 CSS와 함께 웹 기술의 핵심 요소 중 하나입니다.
1995년 Brendan Eich가 넷스케이프(Netscape) 브라우저에서 실행되는 프로그래밍 언어로 JavaScript를 개발하였으며, 클라이언트 측(브라우저 내)에서 동작하는 간단한 스크립트 언어로 사용되다가 현재 클라이언트 측뿐만 아니라 Node.js를 통해 서버 측에서도 사용되고 있습니다.
1. 동적 프로그래밍 언어
- JavaScript는 실행 중에 데이터 타입이 결정되는 동적 언어입니다.
- 변수에 다양한 데이터 타입을 저장할 수 있습니다
let value = 10; // 숫자 value = "Hello"; // 문자열 value = true; // 논리값2. 클라이언트-서버 양방향 지원
- 클라이언트 측(JavaScript): 브라우저에서 사용자와 상호작용 처리.
- 서버 측(Node.js): 서버 로직 및 데이터베이스 연동 처리.
3. 이벤트 기반
- 사용자 동작(클릭, 키 입력 등)에 반응하는 이벤트 기반 프로그래밍을 지원합니다.
4. 객체 기반
- JavaScript는 객체(Object)를 기본으로 하며, 프로토타입 기반 상속을 지원합니다.
5. 비동기 처리
- 콜백(callback), Promise, async/await를 사용하여 비동기 작업을 효율적으로 처리.
6. 플랫폼 독립적
- 웹 브라우저에서 실행되므로 OS나 플랫폼에 관계없이 동작합니다.
JavaScript의 기본 개념
1. JavaScript의 용도
- DOM 조작:
- HTML 구조를 동적으로 변경.
- 예: 버튼 클릭 시 텍스트 변경.
- 이벤트 처리:
- 클릭, 키 입력, 마우스 이동 등 사용자의 동작에 반응.
- 폼 검증:
- 사용자 입력을 검증하고 유효하지 않은 데이터를 막음.
- 애니메이션:
- HTML 요소의 위치, 크기, 색상 등을 동적으로 변경.
- 백엔드와의 통신:
- 서버와 데이터를 주고받아 동적인 웹 애플리케이션 제작.
2. JavaScript의 기본 문법
(1) 변수 선언
- var: 함수 범위, 과거 방식(권장되지 않음).
- let: 블록 범위, 재할당 가능.
- const: 블록 범위, 재할당 불가.
let age = 25; // 변수 선언 및 값 할당 const name = "John"; // 상수 선언(2) 데이터 타입
- 기본 타입(Primitive):
- Number, String, Boolean, undefined, null, Symbol, BigInt
- 참조 타입(Reference):
- 객체(Object), 배열(Array), 함수(Function)
let number = 42; // 숫자 let text = "Hello"; // 문자열 let isTrue = true; // 불리언 let items = [1, 2, 3]; // 배열 let person = { // 객체 name: "Alice", age: 30 };(3) 조건문
if (age > 18) { console.log("성인입니다."); } else { console.log("미성년자입니다."); }(4) 반복문
for (let i = 0; i < 5; i++) { console.log(i); }(5) 함수
- 선언식:
function add(a, b) { return a + b; }- 표현식:
const add = function(a, b) { return a + b; };- 화살표 함수(ES6):
const add = (a, b) => a + b;3. DOM(Document Object Model) 조작
HTML 요소 선택
- getElementById: ID로 요소 선택.
const element = document.getElementById("myId");- querySelector: CSS 선택자로 요소 선택.
const element = document.querySelector(".myClass");HTML 내용 변경
document.getElementById("myId").textContent = "새 텍스트";이벤트 추가
document.querySelector("button").addEventListener("click", () => { alert("버튼 클릭됨!"); });4. JavaScript의 비동기 처리
콜백 함수
setTimeout(() => { console.log("3초 후 실행"); }, 3000);Promise
const promise = new Promise((resolve, reject) => { let success = true; if (success) { resolve("성공"); } else { reject("실패"); } }); promise.then(result => console.log(result)).catch(error => console.error(error));async/await
async function fetchData() { const response = await fetch("https://api.example.com/data"); const data = await response.json(); console.log(data); } fetchData();5. 주요 JavaScript 기능
- 폼 검증:
- 입력값이 유효한지 검사.
- AJAX 통신:
- 웹 페이지를 새로고침하지 않고 데이터 통신.
- 애니메이션:
- CSS와 함께 사용하여 동적인 효과 구현.
- 웹 API 활용:
- Geolocation, LocalStorage, Canvas 등 브라우저 제공 기능 사용.
HTML, CSS, JavaScript의 관계
HTML, CSS, JavaScript는 웹 개발의 세 가지 핵심 기술로, 각각의 역할이 다르면서도 서로 밀접하게 연결되어 있습니다. 이 세 기술은 협력하여 웹 페이지의 구조, 스타일, 동작을 정의합니다.
HTML은 웹 페이지의 뼈대 역할, CSS은 HTML 요소의 스타일과 레이아웃을 정의 색상, 폰트, 크기, 여백, 배경, 애니메이션 등을 설정하여 웹 페이지를 꾸밉니다. JS은 웹 페이지에 동적 기능과 인터랙티브 요소 추가. HTML과 CSS를 조작하며 사용자와의 상호작용 처리 합니다.
실습
🔥 도전해봅시다.
자신을 소개하는 페이지를 작성해 봅시다(형식 자유)
간단한 계산기 페이지를 만들어 봅시다.
<!-- 다음을 이해해 봅시다 -->
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>h1태그</h1>
<p>p 태그</p>
<button onclick="changeColor()">배경색 변경</button>
<script>
function changeColor() {
document.body.style.backgroundColor = "yellow";
}
</script>
</body>
</html>
<!-- 다음을 이해해 봅시다 -->
<!DOCTYPE html>
<html>
<body>
<h2>배열 이해하기</h2>
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
우분투에서 Apache 웹 서버 설치하기
Apache는 가장 널리 사용되는 오픈 소스 웹 서버입니다. 다음은 Ubuntu에서 Apache를 설치하고 실행하는 방법입니다.
1. Apache 설치
apt install apache2 -y- Apache 서비스 시작
systemctl start apache2- Apache 서비스 자동 시작 설정
systemctl enable apache22. Apache 상태 확인
- Apache 서비스 상태 확인
- active (running)으로 표시되면 Apache가 정상적으로 실행 중입니다.
systemctl status apache2- 브라우저에서 확인
- 서버의 IP 주소 또는 도메인 이름을 입력.
- 예: http://<서버 IP> 또는 http://localhost
- 기본 Apache 환영 페이지가 표시됩니다.
3. 방화벽 설정 (선택 사항)
- 현재 방화벽 상태 확인
ufw status- Apache 허용
ufw allow 'Apache'- 변경사항 적용
ufw enable4. Apache 설정 파일 경로
- 기본 사이트 설정 파일: /etc/apache2/sites-available/000-default.conf
- 웹 루트 디렉토리: /var/www/html
5. 테스트 파일 생성
- 기본 웹 디렉토리로 이동
cd /var/www/html- 새 HTML 파일 생성
vi index.html- HTML 파일 작성
<!-- 다음을 이해해 봅시다 -->
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>h1태그</h1>
<p>p 태그</p>
<button onclick="changeColor()">배경색 변경</button>
<script>
function changeColor() {
document.body.style.backgroundColor = "yellow";
}
</script>
</body>
</html>
<!-- 다음을 이해해 봅시다 -->
<!DOCTYPE html>
<html>
<body>
<h2>배열 이해하기</h2>
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>반응형
'KnockOn > 1주차 TIL' 카테고리의 다른 글
| [1주차 TIL] KnockOn Bootcamp - 프록시 (1) | 2024.12.07 |
|---|---|
| [1주차 TIL] KnockOn Bootcamp - 패킷 (0) | 2024.12.07 |
| [1주차 TIL] KnockOn Bootcamp - 쿠키와 세션 (0) | 2024.12.07 |
| [1주차 TIL] KnockOn Bootcamp - HTTP / HTTPS (0) | 2024.12.07 |
| [1주차 TIL] KnockOn Bootcamp - 프로토콜 (1) | 2024.12.07 |
