5.1 기업 홈페이지

약 5분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

5.1 기업 홈페이지

이번 실습에서는 반응형 기업 홈페이지를 제작해 보겠습니다. 실무에서 많이 사용되는 레이아웃과 기법을 반영하여 HTML, CSS, JavaScript를 활용한 실전 구현을 목표로 합니다. 기업 홈페이지는 보통 방문자의 관심을 끌고, 브랜드 이미지를 증대시키며, 다양한 정보를 제공하는 역할을 합니다. 여러분은 이 실습을 통해 직관적이고 사용하기 쉬운 디자인을 만드는 방법을 배울 수 있습니다.

1. HTML 구조 작성

기업 홈페이지를 위한 HTML 구조를 작성합니다. 이 구조에는 헤더, 네비게이션 바, 메인 콘텐츠, 사이드 바, 푸터가 포함됩니다.

2. CSS 스타일링

이제 Flexbox와 Grid를 활용하여 반응형 디자인을 적용할 수 있습니다. 디자인 요소로는 색상, 폰트, 여백 등이 포함되며, 최적의 사용자 경험을 제공하기 위해 미디어 쿼리를 사용합니다.

3. JavaScript 기능 추가

사용자 인터랙션을 위해 JavaScript를 사용하여 동적인 요소를 추가해보겠습니다. 예를 들어, 네비게이션 메뉴의 클릭 이벤트나 스크롤 시 애니메이션을 적용할 수 있습니다.

4. 실습 구현

아래는 기본 HTML과 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="#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>
        <section id="contact">
            <h2>연락처</h2>
            <p>연락처 정보가 들어갑니다.</p>
        </section>
    </main>
    <footer>
        <p>© 2023 기업 이름. All rights reserved.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

5.1 기업 홈페이지

5.1 기업 홈페이지

1. HTML 구조 작성

2. CSS 스타일링

3. JavaScript 기능 추가

4. 실습 구현

댓글 0