웹 개발/웹 개발 기초

HTML과 CSS의 구조화 및 스타일링 기본 가이드

Blue_bull 2025. 1. 27. 16:17

1. HTML과 CSS의 기본 구조 및 스타일링 가이드

아래는 HTML과 CSS에서 주석을 추가하여 각 코드가 어떤 역할을 하는지 설명한 예제입니다. 주석은 코드의 가독성을 높이고, 유지보수를 쉽게 하기 위해 매우 중요합니다.

1. HTML 기본 구조

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- 문서의 문자 인코딩을 UTF-8로 설정 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 반응형 웹 설정 -->
    <title>Document</title> <!-- 문서의 제목 -->
    <style>
        /* CSS 스타일은 여기에 작성하거나 외부 파일로 연결 */
    </style>
</head>
<body>
    <!-- 이곳에 HTML 콘텐츠를 작성 -->
</body>
</html>

2. CSS 초기화 및 기본 스타일

/* 브라우저 기본 스타일을 초기화 */
* {
    margin: 0; /* 모든 요소의 기본 마진 제거 */
    padding: 0; /* 모든 요소의 기본 패딩 제거 */
    box-sizing: border-box; /* 요소의 크기 계산 방식을 경계(border) 포함하도록 설정 */
}

/* html과 body 태그의 기본 스타일 설정 */
html, body {
    width: 100%; /* 문서의 너비를 100%로 설정 */
    height: 100%; /* 문서의 높이를 100%로 설정 */
    font-family: Arial, sans-serif; /* 기본 폰트 설정 */
    scroll-behavior: smooth; /* 부드러운 스크롤 동작 적용 */
}

3. body와 form 스타일

/* body 태그 기본 스타일 */
body {
    background-color: #f9f9f9; /* 전체 배경색 설정 */
    color: #333; /* 기본 글자색 설정 */
    line-height: 1.6; /* 텍스트 간격 설정 */
    font-family: 'Roboto', Arial, sans-serif; /* 폰트 설정 */
}

/* form 스타일 */
form {
    max-width: 400px; /* 폼의 최대 너비 설정 */
    margin: 20px auto; /* 폼을 화면 중앙으로 정렬 */
    padding: 20px; /* 내부 여백 설정 */
    border: 1px solid #ddd; /* 테두리 설정 */
    border-radius: 5px; /* 모서리 둥글게 설정 */
    background-color: #fff; /* 배경색 설정 */
}

/* form 내 label 스타일 */
label {
    display: block; /* 라벨을 블록 요소로 설정 */
    margin-bottom: 8px; /* 라벨과 입력 필드 사이 간격 추가 */
    font-weight: bold; /* 텍스트를 굵게 표시 */
}

/* form 내 input 스타일 */
input {
    width: 100%; /* 입력 필드의 너비를 폼 너비에 맞춤 */
    padding: 8px; /* 입력 필드 내부 여백 추가 */
    margin-bottom: 15px; /* 입력 필드와 다음 요소 간격 추가 */
    border: 1px solid #ccc; /* 테두리 색상 설정 */
    border-radius: 3px; /* 모서리 둥글게 설정 */
}

/* form 내 버튼 스타일 */
button {
    width: 100%; /* 버튼의 너비를 폼 너비에 맞춤 */
    padding: 10px; /* 버튼 내부 여백 추가 */
    background-color: #007bff; /* 버튼 배경색 설정 */
    color: #fff; /* 버튼 텍스트 색상 설정 */
    border: none; /* 버튼 테두리 제거 */
    border-radius: 3px; /* 모서리 둥글게 설정 */
    cursor: pointer; /* 마우스를 올릴 때 포인터 표시 */
}

/* 버튼 hover 상태 */
button:hover {
    background-color: #0056b3; /* 마우스를 올릴 때 배경색 변경 */
}

4. 레이아웃 기본 틀

<header>
    <!-- 헤더는 페이지 상단 영역으로, 내비게이션 메뉴나 로고를 포함 -->
    <nav>
        <!-- 내비게이션 메뉴 -->
    </nav>
</header>

<main>
    <!-- 주요 콘텐츠가 들어가는 영역 -->
</main>

<footer>
    <!-- 하단 정보(저작권, 연락처 등)가 들어가는 영역 -->
</footer>

CSS 스타일

/* header와 footer 스타일 */
header, footer {
    background-color: #333; /* 헤더와 푸터의 배경색 설정 */
    color: #fff; /* 텍스트 색상 설정 */
    text-align: center; /* 텍스트를 중앙 정렬 */
    padding: 10px 0; /* 위아래 패딩 추가 */
}

/* main 스타일 */
main {
    padding: 20px; /* 주요 콘텐츠 영역의 내부 여백 추가 */
    background-color: #f9f9f9; /* 배경색 설정 */
}

5. 버튼과 미디어 쿼리

/* 버튼 스타일 */
button {
    display: inline-block; /* 인라인 블록 요소로 설정 */
    padding: 10px 20px; /* 버튼 내부 여백 추가 */
    font-size: 16px; /* 버튼 텍스트 크기 설정 */
    color: #fff; /* 버튼 텍스트 색상 */
    background-color: #007bff; /* 기본 배경색 */
    border: none; /* 테두리 제거 */
    border-radius: 5px; /* 모서리 둥글게 설정 */
    cursor: pointer; /* 클릭 가능한 포인터 표시 */
}

/* 버튼 hover 상태 */
button:hover {
    background-color: #0056b3; /* 마우스를 올렸을 때 배경색 변경 */
}

/* 반응형 미디어 쿼리 */
@media (max-width: 768px) {
    /* 화면 너비가 768px 이하일 때 스타일 적용 */
    body {
        font-size: 14px; /* 전체 폰트 크기 줄이기 */
    }

    form {
        padding: 10px; /* 폼 내부 여백 줄이기 */
    }
}

주석의 활용 이유

  1. 코드의 가독성 향상:

    • 코드의 역할과 동작을 설명해 협업 시 빠르게 이해할 수 있음.

  2. 유지보수 용이성:

    • 시간이 지나도 코드의 의도를 파악하기 쉬워짐.

  3. 디버깅 도움:

    • 주석을 사용해 문제의 원인을 빠르게 찾거나, 필요 없는 코드를 주석 처리하여 테스트 가능.

2. CSS 선택자와 HTML 구조화: 기본부터 활용까지

CSS 선택자 및 HTML 기본 구조를 설명하고, 스타일 적용의 원리와 다양한 활용 방법

1. CSS 선택자와 스타일 원리

1.1 선택자의 역할

CSS 선택자는 HTML 요소를 선택하고 스타일을 적용합니다. 선택자의 종류에 따라 특정 요소나 그룹에 스타일을 정의할 수 있습니다.

  • 태그 선택자: 특정 HTML 태그에 스타일 적용.

    p { color: black; } /* 모든 <p> 태그의 글자 색상을 검은색으로 설정 */

  • 클래스 선택자: 특정 클래스 이름을 가진 요소에 스타일 적용.

    .highlight { background-color: yellow; } /* 클래스가 highlight인 요소에 배경색 적용 */

  • ID 선택자: 특정 ID를 가진 요소에 스타일 적용.

    #main-title { font-size: 24px; } /* ID가 main-title인 요소의 글자 크기 설정 */

  • 속성 선택자: 특정 속성을 가진 요소에 스타일 적용.

    input[type="text"] { border: 1px solid #ccc; } /* type 속성이 text인 <input>에 테두리 적용 */

1.2 복합 선택자의 활용

  • 조합 선택자: 여러 선택자를 조합해 특정 조건을 만족하는 요소에 스타일 적용.

    #container .box { margin: 10px; } /* ID가 container인 요소 내부의 box 클래스에 스타일 적용 */

  • 의사 클래스: 특정 상태의 요소에 스타일 적용.

    a:hover { text-decoration: underline; } /* 마우스를 올렸을 때 밑줄 표시 */

2. HTML과 CSS 구조화

HTML과 CSS를 구조화하여 유지보수하기 쉬운 형태로 만드는 방법입니다.

2.1 HTML 구조 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Page</title>
    <link rel="stylesheet" href="styles.css"> <!-- 외부 CSS 파일 연결 -->
</head>
<body>
    <header id="main-header">
        <h1 class="title">Welcome to My Website</h1>
        <nav>
            <ul class="nav-list">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="content">
            <h2>About Us</h2>
            <p>This is a sample website created for demonstration purposes.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 My Website</p>
    </footer>
</body>
</html>

2.2 CSS 스타일링 예제

/* 공통 요소 스타일 */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #f0f0f0;
    color: #333;
}

/* 헤더 스타일 */
#main-header {
    background: #007bff;
    color: white;
    padding: 20px;
    text-align: center;
}

/* 내비게이션 스타일 */
.nav-list {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.nav-list a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.nav-list a:hover {
    text-decoration: underline;
}

/* 메인 콘텐츠 스타일 */
.content {
    background: white;
    padding: 20px;
    margin: 20px auto;
    max-width: 800px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 푸터 스타일 */
footer {
    text-align: center;
    padding: 10px;
    background: #333;
    color: white;
}

3. 디자인에서 반복적으로 쓰이는 패턴

3.1 카드 컴포넌트

<div class="card">
    <h3>Card Title</h3>
    <p>This is a simple card component with basic styling.</p>
    <button>Learn More</button>
</div>
.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px;
}

.card button {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.card button:hover {
    background-color: #0056b3;
}

3.2 반응형 레이아웃

@media (max-width: 768px) {
    .nav-list {
        flex-direction: column;
        gap: 10px;
    }

    .content {
        margin: 10px;
        padding: 15px;
    }
}

4. 선택자와 구조의 이해

  1. ID와 클래스의 역할 차이:

    • ID는 고유한 요소에 스타일 적용.
    • 클래스는 반복적으로 스타일을 적용할 때 사용.

  2. 태그 선택자의 기본 스타일링:

    • 태그 선택자는 모든 동일한 요소에 스타일을 적용하므로 일반적으로 공통 속성 설정에 사용.

  3. 반응형 스타일:

    • 다양한 화면 크기를 지원하려면 미디어 쿼리를 활용.

  4. HTML 구조화:

    • <header>, <main>, <footer>와 같은 시맨틱 태그를 사용해 문서 구조를 명확히.

'웹 개발 > 웹 개발 기초' 카테고리의 다른 글

jsp 구성요소  (0) 2025.02.03
HTML 구조이해2 - 기본틀과 추가 요소들  (2) 2025.01.31
JavaScript 기초 또는 jQuery 기본 사용법  (0) 2025.01.27
CSS와 HTML의 선택자 및 스타일링 규칙  (0) 2025.01.27
선택자란?  (0) 2025.01.27

'웹 개발/웹 개발 기초'의 다른글

  • 현재글HTML과 CSS의 구조화 및 스타일링 기본 가이드

관련글

티스토리툴바