본문 바로가기
카테고리 없음

HTML & CSS 기초 배우기: 웹 개발 입문 가이드

by 쿠킴26 2025. 1. 25.

웹 개발을 시작하려면 HTML(하이퍼텍스트 마크업 언어)CSS(스타일시트)의 기본 개념을 익히는 것이 중요합니다. 이 가이드를 통해 초보자도 쉽게 웹사이트를 만들 수 있습니다.

이 가이드에서는 다음 내용을 다룹니다:
  • HTML과 CSS의 기본 개념
  • 기초 태그 및 스타일링 기법
  • 실습 예제 및 코드 샘플
  • 웹 개발을 위한 추가 리소스

1. HTML이란?

HTML은 웹페이지의 구조를 정의하는 마크업 언어입니다. 모든 웹페이지는 HTML로 구성되며, 텍스트, 이미지, 링크 등을 포함할 수 있습니다.

1.1 HTML 기본 구조

HTML 문서는 다음과 같은 기본 구조로 구성됩니다:

<!DOCTYPE html>
<html>
    <head>
        <title>나의 첫 웹페이지</title>
    </head>
    <body>
        <h1>안녕하세요!</h1>
        <p>이것은 HTML을 배우는 첫 단계입니다.</p>
    </body>
</html>
        

1.2 자주 사용하는 HTML 태그

  • <h1> ~ <h6> - 제목 태그
  • <p> - 문단 태그
  • <a href="URL"> - 하이퍼링크
  • <img src="image.jpg"> - 이미지 삽입
  • <ul>, <ol>, <li> - 목록 태그

2. CSS란?

CSS는 HTML 요소의 디자인과 레이아웃을 조정하는 스타일시트 언어입니다.

2.1 CSS의 기본 문법

selector {
    property: value;
}
        

예제:

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

2.2 CSS 적용 방법

  • 인라인 스타일: HTML 태그 내 style 속성 사용
  • 내부 스타일: <style> 태그 내에 CSS 코드 작성
  • 외부 스타일: 별도의 CSS 파일을 링크하여 적용

3. HTML과 CSS를 이용한 간단한 웹페이지 만들기

아래의 코드를 활용해 간단한 웹페이지를 만들어 보세요:

<!DOCTYPE html>
<html>
<head>
    <title>나의 웹사이트</title>
    <style>
        body { font-family: Arial, sans-serif; background-color: #f8f9fa; }
        h1 { color: #0056b3; text-align: center; }
        p { font-size: 18px; text-align: center; }
    </style>
</head>
<body>
    <h1>환영합니다!</h1>
    <p>이것은 HTML과 CSS를 사용한 예제입니다.</p>
</body>
</html>
        

4. 웹 개발을 위한 추가 리소스

더 많은 학습을 위해 아래 사이트를 참고하세요: