[개념 콕] HTML과 CSS 기초

내일배움캠프 수료생이 개발에 꼭 필요한 핵심 개념만 콕 집어 드립니다.

Jun 03, 2024

Contents

HTML (HyperText Markup Language)CSS(Cascading Style Sheets)내일배움캠프는 개발에 필요한 핵심만 배웁니다

✍🏼

개발을 시작하시는 여러분, 정보가 너무 많고 배워야 할 것도 산더미라 어디서부터 시작해야 할지 막막하신가요? 내일배움캠프 수료생들이 4개월 동안 배운 엄선된 핵심 개념을 직접 정리해서 알려 드립니다. 공부하다 막히거나 헷갈리는 개념이 있다면 개념 콕으로 정리해보세요.

HTML (HyperText Markup Language)

HTML이란?

HTML(HyperText Markup Language)은 웹 페이지를 구조화하고 표현하기 위한 마크업 언어입니다.

웹 페이지의 콘텐츠와 구조를 정의하는 데 사용되며, HTML 문서는 텍스트, 이미지, 비디오, 오디오 등 다양한 요소들로 구성됩니다.

HTML 문서의 구조와 핵심 요소

HTML은 요소(element)로 구성되어 있습니다. 각 요소는 태그(tag)로 둘러싸여 있습니다. 아래 예시를 통해 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 Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
</body>
</html>

<!DOCTYPE html>: HTML5 문서임을 선언합니다.

<html>: HTML 문서의 루트 요소입니다.

<head>: 메타데이터를 포함합니다 (문서 제목, 문자 인코딩 등).

<title>: 웹 페이지의 제목을 정의합니다.

<body>: 실제 내용이 포함되는 부분입니다.

이외에도 자주 사용하는 HTML 요소를 정리했습니다.

<h1>부터 <h6>: 제목을 정의합니다. <h1>이 가장 크고 중요한 제목입니다.

<p>: 문단을 정의합니다.

<a>: 하이퍼링크를 정의합니다.

<img>: 이미지를 삽입합니다.

<ul>과 <ol>: 순서 없는 목록과 순서 있는 목록을 정의합니다.

<li>: 목록 항목을 정의합니다.

CSS(Cascading Style Sheets)

CSS란?

CSS(Cascading Style Sheets)는 HTML 문서의 스타일과 레이아웃을 정의하는 스타일시트 언어입니다. CSS는 HTML 요소들의 시각적인 표현을 제어합니다 .CSS를 사용하여 웹 페이지의 색상, 글꼴, 크기, 배치 등을 지정할 수 있습니다.

CSS 규칙은 선택자(selector)와 선언 블록(declaration block)으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 지정하며, 선언 블록은 중괄호({}) 내에 속성(property)과 값(value)의 쌍으로 이루어집니다. 아래 예시로CSS 규칙을 알아봅시다.

CSS 규칙


selector {
    property: value;
}

위의 예시에서 selector는 스타일을 적용할 대상 요소이며, property는 스타일의 속성, value는 해당 속성에 할당할 값을 나타냅니다. 선언 블록 내에는 여러 개의 속성-값 쌍이 포함될 수 있으며, 각 쌍은 세미콜론(;)으로 구분합니다.

모든 <p> 요소의 텍스트 색상을 파란색으로 지정할 때는 아래와 같이 작성합니다.


p {
    color: blue;
}

p 를 선택자로 사용하여 HTML 문서 내의 모든 <p> 요소를 선택합니다. 선언 블록 내에서 color 속성을 사용하여 텍스트 색상을 blue로 지정했습니다.

CSS 적용 방법

1) 인라인 스타일

HTML 요소 내에 직접 스타일을 지정합니다.


<p style="color: blue;">This is a blue paragraph.</p>

2) 내부 스타일 시트

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


<style>
    p {
        color: blue;
    }
</style>

3) 외부 스타일 시트

별도의 CSS 파일에 스타일을 정의하고 HTML 문서에서 링크합니다.


<!-- HTML 문서 -->
<link rel="stylesheet" href="styles.css">


/* styles.css */
p {
    color: blue;
}

내일배움캠프는 개발에 필요한 핵심만 배웁니다

지금까지 꼭 필요한 개발 지식에 대해 알아보았습니다. 내일배움캠프에서는 전문가들이 선별한 핵심 개발 지식으로 개발 공부도, 취업도 보다 효율적으로 할 수 있는데요. 국내 유수의 IT기업 출신 튜터님들과 실습 위주의 독보적인 커리큘럼으로 개발자 취업을 체계적으로 준비해보세요. 내일배움캠프 4개월, 여러분 인생의 가장 큰 터닝 포인트입니다.

CREDIT

글 | 김민선 내일배움캠프 수료생 편집 | 정효재 팀스파르타 에디터