Skip to main content

예제로 배우는 HTML과 CSS 기본

HTML 및 CSS를 배우려면 다음 단계를 따르십시오.

1. HTML 및 CSS 기본​

1.1 HTML 및 CSS 기본​

HTML(HyperText Markup Language)은 웹에서 콘텐츠를 구조화하는 데 사용됩니다. CSS(Cascading Style Sheets)는 HTML 콘텐츠의 스타일을 지정하는 데 사용됩니다.

1.2 작업 공간 설정:​

코드 편집기(예: Visual Studio Code, Sublime Text 또는 Atom)를 설치합니다. 프로젝트용 폴더를 만듭니다. 폴더 안에 "index.html"과 "style.css"라는 두 개의 파일을 만듭니다.

1.3. HTML 코드 작성 해보기​

"index.html"에 다음 기본 구조를 입력합니다.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

위의 HTML 코드를 살펴보면 다음과 같습니다.

- <html lang="en">..</html>: 영어를 지정하는 언어 속성이 있는 HTML 페이지의 루트 요소입니다.
- <head>..</head>: 이 요소는 문자 집합, 뷰포트 설정, 제목, 외부 리소스(예: 스타일시트, 스크립트)에 대한 링크와 같은 문서에 대한 메타 정보를 포함합니다.
- <meta charset="UTF-8">..</meta>: 문서의 문자 인코딩을 UTF-8로 설정합니다.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">..</meta>: 이것은 웹 페이지가 반응하고 다른 장치에서 적절하게 확장되도록 합니다.
- <title>My First Webpage</title>: 브라우저의 제목 표시줄 또는 탭에 표시되는 웹 페이지의 제목을 설정합니다.
- <link rel="stylesheet" href="style.css">..</link>: 외부 CSS 파일 "style.css"를 HTML 문서에 연결합니다.
- <body>..</body>: 이 요소는 텍스트, 이미지, 링크 등과 같은 웹 페이지의 콘텐츠를 포함합니다.

body 태그 안에 다양한 HTML 요소를 추가하여 웹페이지 콘텐츠를 만듭니다. 예를 들어:

<header>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
</header>
<main>
    <h1>Welcome to My First Webpage</h1>
    <p>This is a paragraph of text.</p>
</main>
<footer>
    <p>&copy; 2023 My First Webpage. All rights reserved.</p>
</footer>

이렇게 완성된 코드는 아래와 같습니다. 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    <main>
        <h1>Welcome to My First Webpage</h1>
        <p>This is a paragraph of text.</p>
    </main>
    <footer>
        <p>&copy; 2023 My First Webpage. All rights reserved.</p>
    </footer>
</body>
</html>

위의 코드 설명

- <header>..</header>: 이 요소는 일반적으로 사이트 브랜딩, 탐색 및 기타 소개 콘텐츠를 포함하는 웹 페이지의 헤더 섹션을 나타냅니다.
- <nav>..</nav>: 이 요소는 탐색 링크 세트를 포함하는 헤더 내의 탐색 섹션을 나타냅니다.
- <a href="#">홈</a>: 자리 표시자 링크(#)가 있는 앵커 요소입니다. "홈" 페이지에 대한 탐색 링크를 나타냅니다.
- <a href="#">정보</a>: "홈" 링크와 유사하며 "정보" 페이지에 대한 탐색 링크입니다.
- <main>..</main>: 이 요소는 웹 페이지의 주요 콘텐츠를 나타내며 각 페이지에 고유하며 여러 페이지에서 반복되지 않습니다(예: 머리글, 바닥글 또는 탐색).
- <h1>Welcome to My First Webpage</h1>: 페이지의 기본 제목 또는 제목에 사용되는 수준 1 제목 요소입니다.
- <p>텍스트 단락입니다.</p>: 텍스트 블록을 표시하는 데 사용되는 단락 요소입니다.
- <footer>..</footer>: 이 요소는 일반적으로 저작권 정보, 연락처 세부 정보 또는 기타 보충 콘텐츠를 포함하는 웹 페이지의 바닥글 섹션을 나타냅니다.
- <p>© 2023 나의 첫 웹페이지. All rights reserved.</p>: 이 단락 요소에는 저작권 정보와 웹 페이지의 콘텐츠에 대해 예약된 권리에 대한 설명이 포함되어 있습니다.

이 HTML 코드는 머리글, 기본 콘텐츠 영역 및 바닥글이 있는 간단한 웹 페이지 구조를 만듭니다. 머리글에는 탐색 링크가 포함되어 있고 기본 섹션에는 머리글과 단락이 포함되어 있으며 바닥글에는 저작권 정보가 있습니다.

그럼 이제 웹 브라우저에서 "index.html"을 열어서 결과를 확인해봅시다. 구조는 잡혔는데 전혀 예쁘지 않습니다. 이제 CSS를 사용하여 스타일을 지정해 조금더 예쁘게 만들어보겠습니다.

1.4 CSS 코드 적용 하기​

"style.css" 파일을 엽니다. 기본 CSS 규칙으로 시작하여 아래와 같이 HTML 요소의 스타일을 지정하세요.


/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Style the header */
header {
    background-color: #333;
    padding: 1rem 0;
}

/* Style the navigation links */
nav a {
    color: white;
    text-decoration: none;
    padding: 0 1rem;
}

nav a:hover {
    text-decoration: underline;
}

/* Style the main content */
main {
    padding: 2rem;
}

/* Style the footer */
footer {
    background-color: #333;
    color: white;
    padding: 1rem 0;
    text-align: center;
}

코드 설명:

- * : 모든 요소(*)를 대상으로 하고 기본 여백 및 패딩 값을 0으로 재설정하고 box-sizing 속성을 border-box로 설정하는 CSS 재설정 규칙입니다. 이는 여러 브라우저에서 스타일을 지정하기 위한 보다 일관된 시작점을 제공합니다.
- header:  <header> 요소의 스타일을 지정하여 배경색을 어두운 회색(#333)으로 설정하고 상단과 하단에 패딩을 추가합니다(1rem).
- nav a: <nav> 요소 내 <a>(앵커) 요소의 스타일을 지정하고 텍스트 색상을 흰색으로 설정하고 밑줄(text-decoration)을 제거하고 가로 패딩(1rem)을 추가합니다.
- nav a:hover: <nav> 내부의 <a> 요소에 호버 효과를 추가하여 마우스 포인터가 링크 위에 있을 때 텍스트에 밑줄을 긋습니다.
- main: <main> 요소의 스타일을 지정하고 주위에 패딩(2rem)을 추가합니다.

지금 까지 간단하게 html과 css에 대하여 정리 해봤는데요 소규모 프로젝트 다양한 HTML 요소와 CSS 속성을 활용하여 연습을 해보시면서 더 익숙해지시면 좋을 것 같습니다. 아래 Mozilla, W3Schools, freeCodeCamp와 같이 HTML 및 CSS에 대해 자세히 알아볼수 있는 사이트 들도 있으니 참고 하시면 됩니다.

1) Mozilla​

2) W3Schools​

3) FreeCodeCamp​

본 포스팅은 ChatGPT의 도움을 받아 작성 되었으며 개인적인 개발 경험을 바탕으로 작성되었습니다.