본문 바로가기
Development

HTML/CSS 기초 배우기

GameLabMaster 2024. 5. 17. 10:38

웹 개발의 기본은 HTML과 CSS를 이해하는 것에서 시작합니다. 이 포스팅에서는 HTML과 CSS의 기초를 배우고, 간단한 예제를 통해 실습해 보겠습니다. 초보자도 쉽게 이해할 수 있도록 자세히 설명하니, 끝까지 읽어보시길 권장합니다.

HTML 기초

HTML이란?

HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어입니다. HTML을 사용하면 웹 페이지의 텍스트, 이미지, 링크 등 다양한 요소를 구조화할 수 있습니다. HTML 문서는 태그(tag)로 구성되며, 각 태그는 특정한 기능을 가지고 있습니다.

HTML 문서 구조

HTML 문서는 기본적으로 다음과 같은 구조를 가집니다:

<!DOCTYPE html>
<html>
<head>
    <title>HTML 기초 배우기</title>
</head>
<body>
    <h1>HTML 기초 배우기</h1>
    <p>HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.</p>
</body>
</html>
  • <!DOCTYPE html>: HTML5 문서임을 선언합니다.
  • <html>: HTML 문서의 루트 요소입니다.
  • <head>: 메타데이터를 포함하는 섹션으로, 문서의 제목(<title>)과 스타일(<style>) 등을 정의합니다.
  • <body>: 실제 콘텐츠가 위치하는 곳으로, 사용자에게 표시되는 모든 요소가 이 안에 포함됩니다.

HTML 기본 태그

제목 태그

제목 태그는 문서의 제목이나 섹션의 제목을 정의할 때 사용합니다. <h1>부터 <h6>까지 있으며, 숫자가 작을수록 더 큰 제목을 의미합니다.

<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>

단락 태그

단락 태그 <p>는 문단을 정의할 때 사용합니다.

<p>이것은 단락입니다. HTML은 하이퍼텍스트 마크업 언어입니다.</p>

링크 태그

링크 태그 <a>는 다른 페이지나 리소스로 연결할 때 사용합니다. href 속성에 URL을 지정합니다.

<a href="https://www.example.com">예시 사이트로 이동</a>

이미지 태그

이미지 태그 <img>는 웹 페이지에 이미지를 삽입할 때 사용합니다. src 속성에 이미지 파일의 경로를 지정합니다.

<img src="image.jpg" alt="이미지 설명">

목록 태그

목록 태그는 순서가 있는 목록(<ol>)과 순서가 없는 목록(<ul>)이 있습니다. 각각의 항목은 <li> 태그로 감싸집니다.

<ol>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
</ol>

<ul>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
</ul>

CSS 기초

CSS란?

CSS(Cascading Style Sheets)는 HTML 요소의 스타일을 정의하는 언어입니다. CSS를 사용하면 웹 페이지의 레이아웃, 색상, 폰트 등을 지정할 수 있습니다. CSS는 HTML과 분리되어 있으며, 별도의 파일로 작성되거나 HTML 문서 내에 포함될 수 있습니다.

CSS 문법

CSS는 선택자(selector)와 선언(declaration)으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 지정하고, 선언은 적용할 스타일을 정의합니다.

선택자 {
    속성: 값;
}

예제:

h1 {
    color: blue;
    font-size: 24px;
}

p {
    color: gray;
    font-size: 16px;
}

CSS 적용 방법

CSS는 여러 가지 방법으로 HTML에 적용할 수 있습니다:

인라인 스타일

HTML 요소에 직접 스타일을 적용합니다.

<p style="color: red; font-size: 20px;">이것은 인라인 스타일이 적용된 단락입니다.</p>

내부 스타일 시트

HTML 문서의 <head> 섹션에 스타일을 정의합니다.

<!DOCTYPE html>
<html>
<head>
    <title>CSS 기초 배우기</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        h1 {
            color: blue;
        }

        p {
            color: gray;
        }
    </style>
</head>
<body>
    <h1>CSS 기초 배우기</h1>
    <p>CSS는 HTML 요소의 스타일을 정의하는 언어입니다.</p>
</body>
</html>

외부 스타일 시트

별도의 CSS 파일을 작성하고, HTML 문서에 링크를 추가합니다.

<!-- style.css -->
body {
    font-family: Arial, sans-serif;
}

h1 {
    color: blue;
}

p {
    color: gray;
}
<!DOCTYPE html>
<html>
<head>
    <title>CSS 기초 배우기</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSS 기초 배우기</h1>
    <p>CSS는 HTML 요소의 스타일을 정의하는 언어입니다.</p>
</body>
</html>

CSS 기본 속성

색상

색상을 지정하는 속성은 color, background-color 등이 있습니다. 색상은 이름, HEX 값, RGB 값 등으로 지정할 수 있습니다.

h1 {
    color: blue;
}

p {
    color: #333;
    background-color: #f0f0f0;
}

글꼴

글꼴을 지정하는 속성은 font-family, font-size, font-weight, font-style 등이 있습니다.

body {
    font-family: Arial, sans-serif;
}

h1 {
    font-size: 24px;
    font-weight: bold;
}

p {
    font-size: 16px;
    font-style: italic;
}

레이아웃

레이아웃을 지정하는 속성은 margin, padding, border, width, height 등이 있습니다.

div {
    margin: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    width: 300px;
    height: 200px;
}

CSS 선택자

CSS 선택자는 스타일을 적용할 HTML 요소를 선택하는 데 사용됩니다. 기본 선택자로는 요소 선택자, 클래스 선택자, 아이디 선택자가 있습니다.

요소 선택자

특정 HTML 요소에 스타일을 적용합니다.

h1 {
    color: blue;
}

클래스 선택자

HTML 요소의 클래스 속성을 사용하여 스타일을 적용합니다. 클래스 선택자는 마침표(.)로 시작합니다.

.text-red {
    color: red;
}
<p class="text-red">이것은 클래스 선택자가 적용된 단락입니다.</p>

아이디 선택자

HTML 요소의 아이디 속성을 사용하여 스타일을 적용합니다. 아이디 선택자는 샵(#)으로 시작합니다.

#unique {
    color: green;
}
<p id="unique">이것은 아이디 선택자가 적용된 단락입니다.</p>

상속과 우선순위

CSS에서는 상속과 우선순위가 중요한 개념입니다. 스타일 규칙이 충돌할 때 우선순위에 따라 어떤 스타일이 적용될지 결정됩니다.

상속

어떤 CSS 속성은 상속됩니다. 예를 들어, color 속성은 부모 요소에서 자식 요소로 상속됩니다.

body {
    color: black;
}
<!DOCTYPE html>
<html>
<head>
    <title>상속 예제</title>
    <style>
        body {
            color: black;
        }
    </style>
</head>
<body>
    <h1>상속 예제</h1>
    <p>이 텍스트는 상속된 색상입니다.</p>
</body>
</html>

우선순위

CSS 규칙의 우선순위는 중요도, 명시성, 소스 코드 순서에 따라 결정됩니다.

  1. 중요도: !important는 가장 높은 우선순위를 가집니다.
  2. 명시성: 아이디 선택자가 클래스 선택자나 요소 선택자보다 높은 우선순위를 가집니다.
  3. 소스 코드 순서: 같은 중요도와 명시성을 가진 규칙은 나중에 작성된 규칙이 우선됩니다.
/* 명시성 예제 */
#title {
    color: red;
}

.title {
    color: blue;
}

h1 {
    color: green;
}
<!DOCTYPE html>
<html>
<head>
    <title>우선순위 예제</title>
    <style>
        #title {
            color: red;
        }

        .title {
            color: blue;
        }

        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <h1 id="title" class="title">우선순위 예제</h1>
</body>
</html>

이 예제에서 <h1> 요소는 id="title"과 class="title"을 모두 가지므로, 가장 높은 우선순위를 가지는 #title 규칙에 의해 빨간색으로 표시됩니다.

결론

HTML과 CSS는 웹 개발의 기본입니다. HTML을 사용하여 웹 페이지의 구조를 정의하고, CSS를 사용하여 스타일을 지정할 수 있습니다. 이 포스팅을 통해 HTML과 CSS의 기초를 이해하고, 간단한 예제를 통해 실습해 보았습니다. 이제 여러분도 직접 웹 페이지를 만들어 보고, 더 나아가 다양한 스타일을 적용해 보세요.

 

이 포스팅이 HTML과 CSS를 이해하는 데 도움이 되길 바랍니다. 질문이나 추가 정보가 필요하시면 언제든지 댓글로 남겨주세요.

저작자표시

'Development' 카테고리의 다른 글

풀스택 개발자가 되기 위한 기본 기술  (0) 2024.05.16
풀스택 개발이란? – 개념과 필요성  (0) 2024.05.14
컨테이너 오케스트레이션: Kubernetes  (0) 2023.07.10
Apache Kafka: 데이터 스트림 처리 플랫폼  (0) 2023.06.26
그래프 데이터베이스와 Neo4j 소개  (0) 2023.06.13

'Development' Related Articles

티스토리툴바