태그

7장: CSS 예제와 프로젝트

### 7.1 간단한 웹 페이지 스타일링


이 절에서는 간단한 웹 페이지를 스타일링하는 예제를 통해 배운 CSS 개념을 실습해 보겠습니다.

#### HTML 코드:
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>간단한 웹 페이지</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>내 웹 페이지</h1>
        <nav>
            <ul>
                <li><a href="#home">홈</a></li>
                <li><a href="#about">소개</a></li>
                <li><a href="#contact">연락처</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>홈</h2>
            <p>여기는 홈 페이지입니다.</p>
        </section>
        <section id="about">
            <h2>소개</h2>
            <p>이 웹 페이지는 HTML, CSS, JavaScript를 사용하여 만들었습니다.</p>
        </section>
    </main>
    <aside>
        <h2>사이드바</h2>
        <p>여기는 사이드바입니다.</p>
    </aside>
    <footer>
        <p>&copy; 2024 내 웹 페이지. 모든 권리 보유.</p>
    </footer>
</body>
</html>

#### CSS 코드 (`styles.css`):
/* 기본 스타일 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 헤더 스타일 */
header {
    background-color: #4CAF50;
    color: white;
    padding: 1em;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

/* 메인 콘텐츠 스타일 */
main {
    padding: 1em;
}

/* 사이드바 스타일 */
aside {
    background-color: #f4f4f4;
    padding: 1em;
    margin-top: 1em;
}

/* 푸터 스타일 */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1em;
    position: absolute;
    bottom: 0;
    width: 100%;
}

### 7.2 네비게이션 바 디자인


이번 예제에서는 네비게이션 바를 디자인해 보겠습니다.

#### HTML 코드:
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>네비게이션 바</title>
    <link rel="stylesheet" href="navstyles.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#home">홈</a></li>
            <li><a href="#about">소개</a></li>
            <li><a href="#services">서비스</a></li>
            <li><a href="#contact">연락처</a></li>
        </ul>
    </nav>
</body>
</html>

#### CSS 코드 (`navstyles.css`):
/* 기본 스타일 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 네비게이션 바 스타일 */
nav {
    background-color: #333;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 14px 20px;
    display: block;
}

nav ul li a:hover {
    background-color: #575757;
    border-radius: 4px;
}

### 7.3 카드 레이아웃


카드 레이아웃을 사용하여 콘텐츠를 구성하는 예제를 만들어 보겠습니다.

#### HTML 코드:
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>카드 레이아웃</title>
    <link rel="stylesheet" href="cardstyles.css">
</head>
<body>
    <div class="card-container">
        <div class="card">
            <h3>카드 제목 1</h3>
            <p>카드 내용 1</p>
        </div>
        <div class="card">
            <h3>카드 제목 2</h3>
            <p>카드 내용 2</p>
        </div>
        <div class="card">
            <h3>카드 제목 3</h3>
            <p>카드 내용 3</p>
        </div>
    </div>
</body>
</html>

#### CSS 코드 (`cardstyles.css`):
/* 기본 스타일 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 카드 컨테이너 스타일 */
.card-container {
    display: flex;
    justify-content: space-around;
    padding: 20px;
}

/* 카드 스타일 */
.card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: 30%;
}

.card h3 {
    margin-top: 0;
}

.card p {
    color: #666;
}

### 7.4 폼 스타일링


폼을 스타일링하여 더 나은 사용자 경험을 제공하는 예제를 만들어 보겠습니다.

#### HTML 코드:
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼 스타일링</title>
    <link rel="stylesheet" href="formstyles.css">
</head>
<body>
    <form>
        <label for="name">이름:</label>
        <input type="text" id="name" name="name">
        <label for="email">이메일:</label>
        <input type="email" id="email" name="email">
        <label for="message">메시지:</label>
        <textarea id="message" name="message"></textarea>
        <button type="submit">제출</button>
    </form>
</body>
</html>

#### CSS 코드 (`formstyles.css`):
/* 기본 스타일 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

/* 폼 스타일 */
form {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: 300px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input, textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}
Labels:

댓글

댓글 쓰기