예제로 배우는 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

• HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
• CSS: https://developer.mozilla.org/en-US/docs/Web/CSS

2) W3Schools

• HTML: https://www.w3schools.com/html/default.asp
• CSS: https://www.w3schools.com/css/default.asp

3) FreeCodeCamp

• https://www.freecodecamp.org/learn/responsive-web-design/

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