HTML/CSS 기초 – 나만의 첫 웹페이지 만들기

by

HTML과 CSS의 기본을 배워 나만의 첫 웹페이지를 만들어봅시다. 프로그래밍 경험이 전혀 없어도 따라할 수 있습니다.

HTML이란?

HTML(HyperText Markup Language)은 웹페이지의 뼈대를 만드는 언어입니다. 웹 브라우저에게 “이건 제목이고, 이건 문단이고, 이건 이미지야”라고 알려주는 역할을 합니다.

기본 HTML 구조

<!DOCTYPE html>n<html lang="ko">n<head>n    <meta charset="UTF-8">n    <title>내 첫 웹페이지</title>n</head>n<body>n    <h1>안녕하세요!</h1>n    <p>제 첫 번째 웹페이지입니다.</p>n</body>n</html>

자주 쓰는 HTML 태그

태그용도예시
<h1>~<h6>제목<h1>큰 제목</h1>
<p>문단<p>본문 텍스트</p>
<a>링크<a href=”url”>링크</a>
<img>이미지<img src=”photo.jpg”>
<ul><li>목록<ul><li>항목</li></ul>
<div>영역 구분<div>…</div>

CSS란?

CSS(Cascading Style Sheets)는 웹페이지의 디자인을 담당합니다. HTML이 뼈대라면 CSS는 옷을 입히는 것입니다.

body {n    font-family: '맑은 고딕', sans-serif;n    background-color: #f5f5f5;n    margin: 0;n    padding: 20px;n}nnh1 {n    color: #333;n    text-align: center;n}nnp {n    color: #666;n    line-height: 1.8;n}

실습: 자기소개 페이지 만들기

메모장(또는 VS Code)을 열고 다음 코드를 입력한 후 index.html로 저장하세요.

<!DOCTYPE html>n<html lang="ko">n<head>n    <meta charset="UTF-8">n    <title>자기소개</title>n    <style>n        body { font-family: sans-serif; max-width: 600px; margin: 50px auto; }n        h1 { color: #2c3e50; }n        .hobby { background: #ecf0f1; padding: 10px; border-radius: 5px; }n    </style>n</head>n<body>n    <h1>홍길동의 자기소개</h1>n    <p>안녕하세요! 웹 개발을 배우고 있는 홍길동입니다.</p>n    <h2>취미</h2>n    <div class="hobby">n        <ul>n            <li>코딩</li>n            <li>독서</li>n            <li>여행</li>n        </ul>n    </div>n</body>n</html>

파일을 브라우저로 열면 자기소개 페이지가 완성됩니다!

마무리

이 글이 도움이 되셨다면 댓글과 공유 부탁드립니다. 더 유용한 정보로 찾아뵙겠습니다!

Leave a Comment