HTML (HyperText Markup Language)
HTML은 웹 페이지를 구성하는 기본 언어로, 웹 콘텐츠의 구조를 정의하는 데 사용된다. HTML은 마크업 언어의 일종으로, 데이터를 태그로 표현하여 화면에 나타내는 방식을 의미한다. 이를 통해 HTML은 웹 페이지의 뼈대를 구성하고, 콘텐츠의 다양한 부분을 식별하고 구성하는 데 핵심적인 역할을 한다.
HTML 문서는 <!DOCTYPE html> 선언으로 시작하며, 이는 브라우저에게 해당 문서가 HTML5 표준을 따르고 있음을 알려준다. 문서는 <html> 태그로 시작하여 <head>와 <body> 태그로 구성된다. <head> 태그에는 문서의 메타데이터, 외부 스타일시트 및 스크립트의 링크가 포함되며, <body> 태그에는 브라우저에 표시될 실제 콘텐츠가 들어간다.
다음은 기본적인 HTML 문서 구조의 예시이다.
<!DOCTYPE html>
<!-- 이 문서는 HTML5 문서임을 선언 -->
<html lang="en">
<head>
<!-- 문서의 문자 인코딩을 UTF-8로 설정 -->
<meta charset="UTF-8">
<!-- 뷰포트 설정: 모바일 장치에서도 잘 보이도록 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 웹 페이지의 제목을 설정합니다. 브라우저의 탭이나 검색 엔진 결과에 표시 -->
<title>My Web Page</title>
</head>
<body>
<!-- h1 요소: 주요 제목을 표시 -->
<h1>Welcome to My Website</h1>
<!-- p 요소: 단락을 표시 -->
<p>This is a paragraph of text on my website.</p>
</body>
</html>
여기서 <h1> 태그는 주요 제목을, <p> 태그는 단락을 정의한다. 각 태그는 특정한 역할을 가지며, 페이지 구조를 형성하는 데 사용된다.
HTML은 웹 페이지의 기본 구조를 정의하는 작업이다. 각 HTML 태그는 콘텐츠의 특정 부분을 나타내며, 이러한 태그들은 브라우저가 콘텐츠를 적절히 렌더링할 수 있도록 돕는다. 예를 들어, 제목, 단락, 이미지, 링크 등의 요소는 각각 <h1>, <p>, <img>, <a> 태그로 정의된다. 이러한 구조적인 접근은 CSS와 JavaScript와 결합되어, 시각적 스타일링과 동적 기능을 추가할 수 있는 기반을 제공한다.
HTML의 또 다른 중요한 측면은 접근성이다. 적절하게 구조화된 HTML 문서는 스크린 리더와 같은 보조 기술을 사용하는 사용자들에게도 쉽게 접근할 수 있는 웹 페이지를 제공한다.
CSS (Cascading Style Sheets)
CSS는 HTML 문서의 스타일을 정의하는 언어로, 웹 페이지의 레이아웃, 색상, 폰트, 간격 등을 지정하는 데 사용된다.
CSS는 HTML과 분리되어 있으며, 이를 통해 같은 HTML 콘텐츠라도 다양한 스타일을 적용할 수 있다.
CSS는 선택자(selector)와 선언 블록(declaration block)으로 구성되며, 선택자는 스타일을 적용할 HTML 요소를 지정하고, 선언 블록은 하나 이상의 선언(declaration)으로 이루어진다. 각 선언은 속성(property)과 값(value)으로 구성된다.
body {
/* 웹 페이지의 기본 글꼴을 Arial, sans-serif로 설정 */
font-family: Arial, sans-serif;
/* 텍스트의 줄 간격을 1.6으로 설정 */
line-height: 1.6;
/* 문서의 기본 여백을 제거 */
margin: 0;
/* 문서의 기본 패딩을 제거 */
padding: 0;
}
h1 {
/* h1 요소의 텍스트 색상을 네이비 색으로 설정 */
color: navy;
/* h1 요소의 텍스트를 중앙 정렬 */
text-align: center;
}
p {
/* p 요소의 텍스트 색상을 회색으로 설정합니다. */
color: gray;
/* p 요소의 텍스트 크기를 16픽셀로 설정합니다. */
font-size: 16px;
}
위의 CSS 코드에서는 body 태그에 기본 폰트와 간격을 설정하고, h1 태그의 텍스트를 중앙에 배치하며, p 태그의 텍스트 색상과 크기를 지정하고 있다.
HTML과 CSS는 함께 사용되어 웹 페이지를 만들고 스타일링하는데 필수적인 역할을 한다.
HTML은 콘텐츠의 구조를 정의하고, CSS는 그 구조를 시각적으로 매력적이고 사용자 친화적으로 만드는 데 기여한다.
웹 개발자들은 이러한 기술을 통해 다양한 웹 사이트와 애플리케이션을 구현할 수 있다.
'프론트엔드 > html,css' 카테고리의 다른 글
| HTML 부모 요소 (Parent Element) vs 자식 요소 (Child Element) (1) | 2024.08.09 |
|---|---|
| 에밋(Emmet): 웹 개발 생산성을 극대화하는 도구 (2) | 2024.08.06 |
| HTML5 태그 (1) | 2024.08.06 |
