기초 디자인 구상하기

약 5분

본문 듣기

기초 디자인 구상하기

안녕하세요, 여러분! HTML을 처음 배우는 오늘, 자기소개 페이지를 만드는 여정을 시작해 보겠습니다. 이 강의에서는 기초 디자인을 구상하고 그것을 실제 웹 페이지로 구현하는 방법을 배워볼 거예요. 수정 및 변경이 용이한 VS Code 환경에서 프로젝트를 진행할 것입니다.

HTML이란 HyperText Markup Language의 약자로, 웹 페이지를 만드는 데 사용하는 언어입니다. 쉽게 말하자면, HTML은 웹 페이지의 뼈대를 잡아주는 건축 자재와 같아요. 이 강의를 통해 HTML의 기본 구조를 이해하고, 전체 자기소개 페이지를 만들어 보세요.

1단계: HTML 기본 구조 이해하기

코드 html

<!DOCTYPE html>
<html>
<head>
    <title>나의 자기소개 페이지</title>
</head>
<body>
    <h1>안녕하세요, 저는 [당신의 이름]입니다!</h1>
    <p>여기서 자신에 대한 간단한 소개를 할 수 있습니다.</p>
</body>
</html>

위 코드는 HTML 문서의 필수 요소들을 포함하고 있습니다. 여기서 <!DOCTYPE html>은 문서가 HTML5로 작성되었음을 알려줍니다. <html> 태그는 문서의 시작을 나타내고, <head> 안에는 페이지의 메타정보, 그리고 <body> 안에는 실제로 사용자에게 보여지는 내용을 담고 있습니다.

2단계: 자기소개 내용 추가하기

코드 html

<h1>안녕하세요, 저는 [당신의 이름]입니다!</h1>
<p>저는 [당신의 직업 또는 관심사]입니다.</p>
<ul>
    <li>취미: [취미]</li>
    <li>좋아하는 과목: [좋아하는 과목]</li>
    <li>특기: [특기]</li>
</ul>

이제 자기소개 내용을 추가하였으니, 위 코드에서는 이름, 직업, 취미 등을 리스트 형식으로 표현했습니다. 이렇게 정보를 목록으로 구성하면 UI가 더 깔끔하고 보기 좋습니다.

3단계: 스타일 적용하기

지금까지는 내용을 작성했으니, 이제 조금 더 멋지게 꾸며볼 차례입니다. CSS를 사용하여 페이지의 디자인을 향상시킬 수 있습니다. 우리는 <style> 태그를 사용해 보죠.

코드 html

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        color: #333;
    }
    h1 {
        color: #007bff;
    }
    ul {
        list-style-type: none;
    }
</style>

이 CSS 코드는 본문의 폰트, 배경 색상 등을 설정합니다. 이는 보는 사람의 경험을 향상시킬 뿐 아니라, 웹 페이지를 더욱 생동감 있게 만들어 줍니다.

핵심 요약

이번 강의에서는 HTML의 기본 구조, 자기소개 내용 추가 방법 및 CSS를 통해 웹 페이지를 꾸미는 방법을 배웠습니다. 이제 여러분은 간단한 웹 페이지를 만드는 데 필요한 기초 지식을 가졌습니다!

실습 문제

이제 자기소개 페이지에 더 많은 섹션, 예를 들어 '연락처' 또는 '내 사진'을 추가해 보세요. 학습한 내용을 활용하여 자유롭게 꾸며보시기 바랍니다! Visual Studio Code를 열고 실습해 보세요.

최종 프로젝트: 나의 자기소개 페이지 만들기

마지막으로 여러분 자신의 사이트로서, 자기소개 페이지를 만들어보세요. 이 과정을 통해 HTML의 활용에 대한 자신감을 가지게 되기를 바랍니다! 이를 통해 직장 생활이나 개인 프로젝트에서 큰 도움이 될 거예요.

기초 디자인 구상하기