html 를 공부하는 모습

스타트업 BD를 위한 웹 개발 기초와 지식_3일차

by

HTML과 CSS는 웹 개발에서 필수적인 두 가지 요소입니다. HTML(HyperText Markup Language)은 웹페이지의 구조와 콘텐츠를 만드는 언어이고, CSS(Cascading Style Sheets)는 이 HTML 구조에 스타일을 적용해 시각적으로 매력적인 웹사이트로 만들어줍니다. 이 글에서는 HTML의 기초 개념과 함께 CSS를 적용하는 세 가지 방법을 소개합니다.

1. HTML의 기초 이해하기

HTML은 웹 페이지의 뼈대 역할을 하며, 페이지에 표시되는 콘텐츠와 구조를 정의합니다. HTML 문서는 태그(tag)로 구성되며, 각 태그는 특정 역할을 담당합니다. 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 First Webpage</title>
</head>
<body>
    <h1>안녕하세요, 세상!</h1>
    <p>이것은 첫 번째 웹 페이지입니다.</p>
</body>
</html>
  • <!DOCTYPE html>: HTML5 문서임을 선언합니다.
  • <html>: 모든 HTML 요소를 포함하는 루트 요소입니다.
  • <head>: 웹페이지에 관한 메타데이터와 스타일, 스크립트 정보가 포함됩니다.
  • <title>: 브라우저 탭에 표시되는 웹 페이지 제목입니다.
  • <body>: 실제 웹 페이지에 표시되는 콘텐츠가 들어가는 부분입니다.

2. CSS의 기초 이해하기

CSS는 HTML 문서의 요소에 스타일을 적용하여 시각적으로 꾸밀 수 있게 합니다. 텍스트의 색상, 글꼴 크기, 배경색, 레이아웃 등을 설정하는 데 사용됩니다. CSS 코드는 선택자(selector), 속성(property), 값(value)으로 구성됩니다.

CSS 코드의 기본 예시

css코드 복사h1 {
    color: blue;
    font-size: 24px;
}
p {
    color: gray;
    line-height: 1.5;
}

위 코드에서 h1과 p는 선택자로, HTML의 h1과 p 태그에 각각 스타일이 적용됩니다. color와 font-size는 속성, blue와 24px은 값입니다.

3. CSS를 HTML에 적용하는 3가지 방법

CSS를 HTML에 적용하는 방법에는 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트의 세 가지가 있습니다. 각 방법을 순서대로 살펴보겠습니다.

방법 1: 인라인 스타일(Inline Style)

인라인 스타일은 HTML 요소 내에 직접 CSS를 적용하는 방법입니다. HTML 요소에 style 속성을 사용하여 스타일을 지정합니다.

html코드 복사<h1 style="color: blue; font-size: 24px;">안녕하세요, 세상!</h1>
<p style="color: gray; line-height: 1.5;">이것은 첫 번째 웹 페이지입니다.</p>

장점: 간단하고 특정 요소에 바로 스타일을 적용할 수 있습니다.
단점: 코드가 복잡해지고, 여러 곳에 같은 스타일을 적용해야 할 때 비효율적입니다.

방법 2: 내부 스타일 시트(Internal Style Sheet)

내부 스타일 시트는 HTML 파일의 <head> 태그 내에 <style> 태그를 사용해 스타일을 정의하는 방법입니다. 한 페이지 안에서 동일한 스타일을 여러 요소에 적용할 때 유용합니다.

html코드 복사<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Styled Webpage</title>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
        p {
            color: gray;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h1>안녕하세요, 세상!</h1>
    <p>이것은 첫 번째 웹 페이지입니다.</p>
</body>
</html>

장점: 한 문서에서 여러 요소에 스타일을 적용할 수 있습니다.
단점: 다른 페이지에서 동일한 스타일을 적용하기 어렵습니다.

방법 3: 외부 스타일 시트(External Style Sheet)

외부 스타일 시트는 별도의 CSS 파일을 만들어 HTML 파일에 링크하는 방식입니다. 이 방법은 여러 페이지에 동일한 스타일을 적용할 때 매우 유용합니다.

  1. CSS 파일 생성하기: 먼저 스타일을 적용할 CSS 파일을 생성하고, 예를 들어 styles.css라는 이름으로 저장합니다.css코드 복사/* styles.css */ h1 { color: blue; font-size: 24px; } p { color: gray; line-height: 1.5; }
  2. HTML에 CSS 파일 연결하기: HTML 파일의 <head> 부분에 <link> 태그를 사용해 외부 CSS 파일을 링크합니다.html코드 복사<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Styled Webpage</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>안녕하세요, 세상!</h1> <p>이것은 첫 번째 웹 페이지입니다.</p> </body> </html>

장점: 여러 HTML 파일에 동일한 스타일을 적용할 수 있어 유지보수가 용이합니다.
단점: 외부 파일을 로드해야 하기 때문에, 파일 로딩 속도에 영향을 줄 수 있습니다.

마무리

HTML과 CSS는 웹 개발의 기본이 되는 언어로, HTML은 콘텐츠와 구조를 정의하고 CSS는 그 구조에 스타일을 적용합니다. CSS를 적용하는 세 가지 방법(인라인, 내부 스타일 시트, 외부 스타일 시트)을 통해 다양한 상황에 맞게 스타일을 적용할 수 있습니다. 처음 웹 개발을 시작하는 단계에서는 각 방법을 연습해 보며 자신에게 맞는 방식을 찾아가는 것이 중요합니다.

Leave a Comment