HTML과 CSS 기초 배우기
현대 웹 개발에서 HTML과 CSS는 필수적인 기술입니다. 이 두 가지 언어는 웹 페이지의 구조와 스타일을 정의하는데 사용되며, 그 기초를 이해하는 것은 웹 개발의 첫걸음입니다. 이번 글에서는 HTML과 CSS의 기본 개념, 문법 및 실습 예제를 통해 이들 언어의 기초를 배우는 순서를 소개하겠습니다.
HTML의 기본 구조
HTML(HyperText Markup Language)은 웹 페이지의 뼈대를 형성하는 언어입니다. 웹 문서는 기본적으로 다음과 같은 구조를 가지고 있습니다:
제목 콘텐츠 내용
위의 구조에서 <!DOCTYPE html>은 HTML5 문서임을 나타내며, <html> 태그는 HTML 문서의 시작을 알립니다. <head> 태그 안에는 문서에 대한 정보를 담고, <meta charset="UTF-8">는 문자 인코딩을 설정합니다. 마지막으로 <body>는 실제 콘텐츠가 포함되는 영역입니다.
HTML 태그의 활용
HTML에서는 여러 가지 태그를 사용하여 구조를 만듭니다. 일반적으로 사용되는 태그는 다음과 같습니다:
<h1>~<h6>: 제목을 나타내며, 숫자가 작을수록 중요도가 높습니다.<p>: 단락을 정의합니다.<a>: 링크를 생성하며,href속성으로 링크 주소를 지정합니다.<img>: 이미지를 삽입하며,src속성으로 이미지 파일의 경로를 설정합니다.
CSS의 이해
CSS(Cascading Style Sheets)는 HTML로 만들어진 콘텐츠의 디자인 요소를 조정합니다. CSS를 통해 색상, 크기, 레이아웃 등을 설정하여 웹 페이지를 더욱 매력적으로 만들 수 있습니다. CSS 문법은 선택자와 선언부로 나뉩니다.
선택자 {
속성: 값;
속성: 값;
}
예를 들어, h1 태그의 색상을 빨간색으로 변경하는 코드는 다음과 같습니다:
h1 {
color: red;
font-size: 20px;
}
CSS의 적용 방법
CSS는 여러 가지 방법으로 HTML 문서에 적용할 수 있습니다. 주요 방법은 다음과 같습니다:
- 인라인 스타일: HTML 요소 내에 직접 스타일을 작성합니다.
- 내부 스타일:
<style>태그를 사용하여 문서 내부에 스타일을 정의합니다. - 외부 스타일: 별도의 CSS 파일을 작성하여
<link>태그로 문서에 연결합니다.
박스 모델 이해하기
CSS에서 박스 모델은 모든 HTML 요소가 사각형 형태로 구성된다는 개념입니다. 각 요소는 다음과 같은 구조를 갖습니다:
- 마진(margin): 요소와 다른 요소 간의 간격입니다.
- 테두리(border): 요소의 경계선을 표시합니다.
- 패딩(padding): 내용과 테두리 사이의 공간입니다.
- 컨텐츠(content): 실제로 표시되는 내용입니다.
수직 및 수평 정렬
이미지를 정렬하는 방법은 수직 및 수평 방식으로 나눌 수 있습니다. 수직 정렬은 align 속성을 사용하여 이미지를 위쪽, 아래쪽, 또는 가운데로 정렬할 수 있습니다. 수평 정렬은 float 속성을 사용하여 이미지를 왼쪽 또는 오른쪽으로 배치합니다. 주의할 점은 가운데 정렬은 구현하기가 까다롭다는 것입니다.
간단한 실습 예제
아래 코드는 HTML과 CSS를 결합하여 기본적인 웹 페이지를 생성하는 예제입니다. 해당 코드를 복사하여 직접 실행해 보시기 바랍니다.
나의 웹 페이지 나의 웹 사이트
여기에서 저의 첫 번째 웹 페이지를 만들어 봅니다.
위의 예제에서 확인할 수 있듯이, HTML과 CSS를 활용하여 간단한 구조의 웹 페이지를 만들 수 있습니다.
결론
이 글에서는 HTML과 CSS의 기초 개념 및 문법, 그리고 기본적인 실습 예제를 통해 웹 페이지를 만드는 방법에 대해 알아보았습니다. HTML은 웹 페이지의 구조를 정의하고, CSS는 그 구조에 스타일을 입히는 역할을 합니다. 이러한 기초를 바탕으로, 점차적으로 더 복잡한 웹 개발 기술로 나아갈 수 있는 기초를 다질 수 있습니다.
자주 찾는 질문 Q&A
HTML이란 무엇인가요?
HTML은 웹 페이지의 구조를 형성하는 주요 마크업 언어로, 콘텐츠의 배치를 결정합니다.
CSS의 역할은 무엇인가요?
CSS는 웹 페이지의 시각적인 스타일을 설정하여, 색상 및 레이아웃을 조정하는 데 사용됩니다.
HTML 문서의 기본 구조는 어떻게 되나요?
HTML 문서는 <html>, <head>, <body> 등의 태그로 구성되어 있으며, 이들로 내용을 정의합니다.
CSS를 HTML에 적용하는 방법은 무엇인가요?
CSS는 인라인, 내부 스타일, 외부 스타일 시트 방식으로 HTML 문서에 적용할 수 있습니다.
박스 모델이란 무엇인가요?
박스 모델은 HTML 요소가 마진, 테두리, 패딩 및 콘텐츠 영역으로 구성된다는 개념입니다.
