[2026] HTML & CSS for Beginners | Your First Steps in Web Development

· 14분 읽기 · 수정 Beginner Tutorial
[2026] HTML & CSS for Beginners | Your First Steps in Web Development

이 글의 핵심

Start with HTML and CSS: set up VS Code, learn document structure, link stylesheets, and build a simple portfolio page—concepts, examples, and devtools in one tutorial.

Introduction

What are HTML and CSS?

HTML (HyperText Markup Language) defines the structure of a web page. CSS (Cascading Style Sheets) defines its appearance.

HTML = framing (structure)
CSS = interior design (style)
JavaScript = wiring (behavior)

Highlights:

  • HTML: headings, paragraphs, images, links, and other content structure
  • CSS: colors, sizing, layout, animation, and presentation
  • Browsers: Chrome, Firefox, Safari, and others run your pages
  • Simplicity: markup and style—not a general-purpose programming language

1. Development environment

Install VS Code

  1. Download from the official VS Code site
  2. Recommended extensions:
    • Live Server: live reload in the browser
    • HTML CSS Support: better completions
    • Prettier: consistent formatting

Your first HTML file

아래 코드는 html를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

<!DOCTYPE html>
<html lang="en">
<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>Hello!</h1>
    <p>This is my first web page.</p>
</body>
</html>

Document structure: <!DOCTYPE html> tells the browser this is an HTML5 document. lang="en" helps search engines, accessibility (screen readers), and font selection. meta charset avoids mojibake; viewport sets the baseline for mobile layout. How to open it:

  1. Save as index.html
  2. Double-click or open in a browser
  3. Or use Live Server from VS Code

2. Basic HTML structure

Required pieces

아래 코드는 html를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

<!DOCTYPE html>          <!-- HTML5 doctype -->
<html lang="en">         <!-- language -->
<head>
    <!-- metadata -->
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <!-- visible content -->
</body>
</html>

Separation of roles: head holds settings and metadata you do not see on the page; body is what users see. Stylesheets (link rel="stylesheet") and scripts usually go at the end of head or before </body> to control load order.

Common tags

다음은 html를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

<!-- Headings -->
<h1>Largest heading</h1>
<h2>Second-level heading</h2>
<h3>Third-level heading</h3>
<!-- Paragraph -->
<p>Paragraph text.</p>
<!-- Link -->
<a href="https://example.com">Link text</a>
<!-- Image -->
<img src="image.jpg" alt="Description of the image">
<!-- List -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<!-- Horizontal rule -->
<hr>
<!-- Line break -->
<br>

3. CSS basics

Ways to add CSS

Option 1: inline styles

<p style="color: red; font-size: 20px;">Red text</p>

Option 2: internal stylesheet 아래 코드는 html를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

// 실행 예제
<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

Option 3: external stylesheet (recommended) 다음은 간단한 html 코드 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

<!-- index.html -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

아래 코드는 css를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

/* style.css */
p {
    color: green;
    font-size: 16px;
}

Basic CSS syntax

다음은 간단한 css 코드 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

selector {
    property: value;
    property: value;
}

Example: 다음은 css를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

/* Tag selector */
h1 {
    color: navy;
    font-size: 32px;
}
/* Class selector */
.highlight {
    background-color: yellow;
}
/* ID selector */
#header {
    background-color: #333;
    color: white;
}

4. Build a simple page

Project layout

아래 코드는 code를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

my-website/
├── index.html
├── style.css
└── images/
    └── logo.png

index.html

다음은 html를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Jane Doe</h1>
        <p>Web developer</p>
    </header>
    <main>
        <section id="about">
            <h2>About</h2>
            <p>Hi! I am Jane, learning web development.</p>
        </section>
        <section id="skills">
            <h2>Skills</h2>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </section>
        <section id="contact">
            <h2>Contact</h2>
            <p>Email: jane@example.com</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2026 Jane Doe. All rights reserved.</p>
    </footer>
</body>
</html>

style.css

다음은 css를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #333;
}
header {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 2rem;
}
header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}
section {
    margin-bottom: 2rem;
}
h2 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
ul {
    list-style-position: inside;
}
li {
    margin: 0.5rem 0;
}
footer {
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}

5. Practical examples

Example 1: Business card page

다음은 html를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Business card</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: Arial, sans-serif;
        }
        .card {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            text-align: center;
            max-width: 400px;
        }
        .card h1 {
            color: #333;
            margin-bottom: 0.5rem;
        }
        .card p {
            color: #666;
            margin: 0.5rem 0;
        }
        .card .email {
            color: #667eea;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Jane Doe</h1>
        <p>Frontend developer</p>
        <p class="email">jane@example.com</p>
        <p>Seoul, South Korea</p>
    </div>
</body>
</html>

Example 2: Simple blog post

다음은 html를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog post</title>
    <style>
        body {
            max-width: 700px;
            margin: 0 auto;
            padding: 2rem;
            font-family: system-ui, sans-serif;
            line-height: 1.8;
        }
        article {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }
        .meta {
            color: #7f8c8d;
            font-size: 0.9rem;
            margin-bottom: 1.5rem;
        }
        p {
            margin-bottom: 1rem;
        }
        .highlight {
            background-color: #fff3cd;
            padding: 0.2rem 0.4rem;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <article>
        <h1>Getting started with HTML and CSS</h1>
        <div class="meta">March 29, 2026 | Jane Doe</div>
        
        <p>
            <span class="highlight">HTML</span> and 
            <span class="highlight">CSS</span> are the foundation of the web.
        </p>
        
        <p>
            Structure with HTML, style with CSS, and you can ship attractive static pages.
        </p>
        
        <p>
            Mastering these two is enough for many static sites.
        </p>
    </article>
</body>
</html>

6. Developer tools

Chrome DevTools

Open: F12 or Ctrl+Shift+I (Mac: Cmd+Option+I) Useful panels:

  • Elements: inspect and tweak HTML/CSS live
  • Console: run JavaScript snippets
  • Network: inspect requests
  • Sources: debug scripts Workflow:
  1. Right-click an element → Inspect
  2. Edit styles in the Elements panel
  3. Click color values to open the color picker

Summary

Takeaways

  1. HTML: structure (tags)
  2. CSS: presentation (rules)
  3. Environment: VS Code + a browser
  4. Skeleton: <!DOCTYPE html> → <html> → <head> + <body>
  5. CSS placement: inline, internal, or external (prefer external)

Next steps

... 996 lines not shown ... Token usage: 63706/1000000; 936294 remaining Start-Sleep -Seconds 3