7.1 웹사이트 구성요소 구현

약 7분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

7.1 웹사이트 구성요소 구현

이 단원에서는 기본적인 웹사이트의 구성요소를 실제로 구현해보는 시간을 가지겠습니다. 웹사이트는 다양한 구성요소로 이루어져 있으며, 이들을 조화롭게 배치하는 것이 중요합니다. 우리는 HTML과 CSS를 사용하여 간단한 웹페이지 레이아웃을 작업해볼 것입니다.

웹사이트의 기본적인 구성요소는 다음과 같습니다:

헤더 (Header): 사이트의 제목 및 내비게이션 바를 포함합니다.
메인 콘텐츠 (Main Content): 웹사이트의 주된 내용을 담고 있는 영역입니다.
푸터 (Footer): 저작권 정보나 기타 링크를 포함하는 하단 영역입니다.

예제

이번 예제를 통해 각 구성요소를 함께 만들어보겠습니다. 아래의 코드를 사용해 간단한 웹 페이지를 구성해보세요.

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="#">홈</a></li>
                <li><a href="#">소개</a></li>
                <li><a href="#">연락처</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>환영합니다!</h2>
        <p>이곳은 나의 첫 웹사이트입니다. 다양한 정보들이 준비되어 있습니다.</p>
    </main>
    <footer>
        <p>&copy; 2023 나의 웹사이트</p>
    </footer>
</body>
</html>

CSS 코드

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

header {
    background: #008080; /* 다크터쿼즈 배경 */
    color: #fff; /* 흰색 글자 */
    padding: 10px;
    text-align: center;
}

nav ul {
    list-style-type: none; /* 글머리 기호 제거 */
    padding: 0;
}

nav ul li {
    display: inline; /* 가로 정렬 */
    margin-right: 15px;
}

main {
    padding: 20px;
}

footer {
    background: #333; /* 어두운 배경 */
    color: #fff;
    text-align: center;
    padding: 10px;
    position: relative; /* 위치 지정 */
    bottom: 0;
    width: 100%; /* 전체 가로 100% 차지 */
}

실습

위의 HTML과 CSS 코드를 복사하여 index.html과 styles.css 파일로 저장하세요.
웹 브라우저에서 index.html 파일을 열어 결과를 확인하세요.
각 구성요소(헤더, 메인, 푸터)에 배경색을 추가해 보세요. 각 색상은 상상하는 어떤 색상이라도 괜찮습니다.

실습 결과 화면 설명

자주 발생하는 오류 및 해결 방법

파일이 연결되지 않음: CSS 파일이 제대로 연결되지 않았을 경우, 스타일이 적용되지 않습니다. HTML 파일의 <link> 태그가 옳게 작성되었는지 확인하세요.
문법 오류: HTML과 CSS 코드에서 세미콜론이나 괄호 등이 빠지는 것이 자주 발생합니다. 에디터에서 문법 오류를 확인하고 수정하세요.

정리

이번 실습을 통해 웹사이트의 기본적인 구성요소를 이해하고 구현하는 데 필요한 HTML과 CSS 코드를 배웠습니다. 웹사이트의 각 요소를 효과적으로 배치하는 것은 웹 개발의 시작입니다. 다음 실습에서는 이러한 구성요소를 더욱 기능적으로 확장해 볼 예정입니다.

7.1 웹사이트 구성요소 구현

7.1 웹사이트 구성요소 구현

예제

HTML 코드

CSS 코드

실습

실습 결과 화면 설명

자주 발생하는 오류 및 해결 방법

정리

댓글 0