7.2 실습 과제

약 7분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

7.2 실습 과제

이번 실습 과제에서는 반응형 웹 디자인의 원칙을 실제로 적용하여 완전한 웹 페이지를 제작해 보겠습니다. 아래의 과제를 수행하면서 CSS Flexbox, Grid, 미디어 쿼리와 같은 기법들을 활용해 보세요.

실습 과제 제목: 기업 홈페이지 제작

요구 사항:

기본 레이아웃 구성
- 헤더, 메인 콘텐츠, 사이드바, 푸터로 구성
- Flexbox 또는 Grid 레이아웃 사용
반응형 디자인
- 뷰포트에 따라 레이아웃이 조정되어야 함
- 스마트폰, 태블릿, 데스크톱 화면 크기에 맞게 디자인
미디어 쿼리 사용
- Breakpoint를 설정하여 화면 크기에 맞게 스타일 적용
타이포그래피와 색상
- 가독성이 좋은 폰트 사용
- 접근성을 고려한 색상 조합
인터랙티브 요소
- 햄버거 메뉴 구현
- 버튼에 마우스 오버 효과 적용

제출 방법:

코드를 GitHub에 업로드 후 링크 제출
각 컴포넌트 및 전체 페이지 기능에 대한 간단한 설명 포함

코드 html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet">
    <title>기업 홈페이지</title>
</head>
<body>
    <header>
        <h1>기업 로고</h1>
        <nav>
            <button id="menu-toggle">☰</button>
            <ul id="nav-list">
                <li><a href="#about">회사 소개</a></li>
                <li><a href="#services">서비스</a></li>
                <li><a href="#contact">연락처</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="about">
            <h2>회사 소개</h2>
            <p>내용...</p>
        </section>
        <section id="services">
            <h2>서비스</h2>
            <p>내용...</p>
        </section>
    </main>
    <footer>
        <p>© 2023 기업 이름</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

코드 css

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}
header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #333;
    color: white;
}
nav {
    display: flex;
    align-items: center;
}
#nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav-list li {
    margin-left: 20px;
}
main {
    padding: 20px;
}
footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: white;
}
@media (max-width: 600px) {
    #nav-list {
        display: none;
        flex-direction: column;
    }
    #menu-toggle {
        display: inline-block;
    }
}
@media (min-width: 601px) {
    #menu-toggle {
        display: none;
    }
}

코드 javascript

document.getElementById('menu-toggle').addEventListener('click', function() {
    const navList = document.getElementById('nav-list');
    navList.style.display = navList.style.display === 'flex' ? 'none' : 'flex';
});

7.2 실습 과제

7.2 실습 과제

실습 과제 제목: 기업 홈페이지 제작

요구 사항:

제출 방법:

댓글 0