웹 개발을 시작하기 위해서는 HTML, CSS, JavaScript의 기초를 이해하는 것이 중요합니다.
이 글에서는 각각의 개념과 기본적인 사용법을 정리하고, 실전에서 활용할 수 있도록 예제를 함께 제공하겠습니다.
1. HTML (HyperText Markup Language)
HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.
문서의 제목, 본문, 이미지, 링크 등을 구성할 수 있으며, 웹 브라우저가 이를 해석하여 화면에 표시합니다.
1.1 기본 구조
HTML 문서는 <html>, <head>, <body> 등의 주요 태그로 구성됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 HTML의 기본 구조입니다.</p>
</body>
</html>1.2 주요 태그
- <h1> ~ <h6> : 제목 태그 (제목 크기 조절)
- <p> : 단락을 나타내는 태그
- <a href="URL"> : 하이퍼링크 태그
- <img src="URL" alt="설명"> : 이미지를 삽입하는 태그
- <ul>, <ol>, <li> : 리스트 요소
- <table> : 표 생성
- <form> : 사용자 입력을 받는 폼
<a href="https://www.google.com">구글로 이동</a>
<img src="image.jpg" alt="샘플 이미지">2. CSS (Cascading Style Sheets)
CSS는 HTML 요소의 스타일(색상, 크기, 배치 등)을 정의하는 스타일 시트 언어입니다.
이를 통해 웹 사이트의 디자인을 더욱 미려하게 만들 수 있습니다.
2.1 기본 문법
CSS는 선택자와 속성으로 구성됩니다.
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}2.2 적용 방법
- 인라인 스타일 (HTML 태그 내부에 직접 적용)
- <p style="color: red;">이 문장은 빨간색입니다.</p>
- 내부 스타일 시트 (<style> 태그 내부에 작성)
- <style> p { color: red; } </style>
- 외부 스타일 시트 (.css 파일로 관리, 가장 권장되는 방식)
- <link rel="stylesheet" href="styles.css">
2.3 주요 속성
- color : 글자 색상
- background-color : 배경 색상
- font-size : 글자 크기
- margin : 외부 여백
- padding : 내부 여백
- border : 테두리 설정
- display : 요소의 표시 방식 (block, inline, flex, grid 등)
- position : 요소의 위치 (relative, absolute, fixed, sticky)
3. JavaScript
JavaScript는 웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다.
3.1 기본 문법
console.log("Hello, JavaScript!");
let message = "안녕하세요!";
alert(message);3.2 변수 선언
- var : 함수 범위 변수 (과거 방식, 권장하지 않음)
- let : 블록 범위 변수 (재할당 가능)
- const : 블록 범위 상수 (재할당 불가능)
let name = "홍길동";
const age = 25;3.3 함수 정의
function greet(name) {
return "안녕하세요, " + name + "님!";
}
console.log(greet("철수"));3.4 이벤트 처리
<button onclick="sayHello()">클릭하세요</button>
<script>
function sayHello() {
alert("안녕하세요!");
}
</script>3.5 DOM 조작
document.getElementById("title").innerText = "변경된 제목";4. HTML, CSS, JavaScript 활용 예제
4.1 간단한 웹 페이지 만들기
<!DOCTYPE html>
<html>
<head>
<title>웹 개발 연습</title>
<style>
body { text-align: center; }
.highlight { color: red; }
</style>
</head>
<body>
<h1 id="title">웹 개발을 시작해보세요!</h1>
<p class="highlight">이 문장은 강조되어 있습니다.</p>
<button onclick="changeText()">변경</button>
<script>
function changeText() {
document.getElementById("title").innerText = "텍스트가 변경되었습니다!";
}
</script>
</body>
</html>5. 마무리
HTML, CSS, JavaScript는 웹 개발의 핵심 요소입니다. HTML로 구조를 만들고, CSS로 디자인을 적용하며, JavaScript로 동적인 기능을 추가하는 것이 기본적인 웹 개발의 흐름입니다. 이를 익히고 연습하면 더 나은 웹 개발자로 성장할 수 있습니다!
'IT개발' 카테고리의 다른 글
| API란 무엇인가? RESTful API와 GraphQL 비교 (0) | 2025.03.09 |
|---|---|
| 반응형 웹 디자인이 중요한 이유와 적용 방법 (0) | 2025.03.09 |
| 데이터베이스 개념과 SQL 기초 (0) | 2025.03.09 |
| 프로그래밍 패러다임과 설계 원칙 완벽 정리! (0) | 2025.03.09 |
| 소프트웨어 개발 과정과 방법론 (0) | 2025.03.08 |
