첫 웹 페이지 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 첫 프로필 페이지 - [여러분의 이름]</title>
    </head>
<body>
    <header>
        <h1>안녕하세요, [여러분의 이름]입니다!</h1>
        <p>웹 개발을 시작하는 초보 개발자입니다.</p>
    </header>

    <section>
        <h2>저를 소개합니다</h2>
        <p>
            저는 새로운 기술을 배우는 것을 즐기며, 특히 웹 개발에 깊은 흥미를 느끼고 있습니다.
            이 책과 함께 여러분과 함께 성장하고 싶습니다.
        </p>
        <ul>
            <li><strong>취미:</strong> 독서, 산책</li>
            <li><strong>좋아하는 것:</strong> 맛있는 커피, 새로운 지식</li>
            <li><strong>목표:</strong> 나만의 멋진 웹 서비스 만들기</li>
        </ul>
    </section>

    <footer>
        <p>&copy; 2025 [여러분의 이름]. All rights reserved.</p>
        <button id="contactButton">문의하기</button>
    </footer>

    </body>
</html>

<link rel="stylesheet" href="profile_style.css">

/* 전체 페이지에 적용될 기본 스타일 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f2f5; /* 연한 회색 배경 */
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    display: flex; /* Flexbox를 사용하여 콘텐츠를 중앙에 배치 */
    flex-direction: column;
    align-items: center;
    min-height: 100vh; /* 최소 화면 높이 */
}

/* 헤더 스타일 */
header {
    background-color: #007bff; /* 파란색 배경 */
    color: white;
    padding: 40px 20px;
    width: 100%;
    box-sizing: border-box; /* padding을 지정한 너비 안에 포함 */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

header h1 {
    margin-bottom: 10px;
    font-size: 2.8em;
}

header p {
    font-size: 1.2em;
    opacity: 0.9;
}

/* 섹션 스타일 */
section {
    background-color: white;
    margin: 30px 20px;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    max-width: 800px;
    width: calc(100% - 40px); /* 좌우 margin 20px씩 제외 */
    box-sizing: border-box; /* padding을 지정한 너비 안에 포함 */
    text-align: left;
}

section h2 {
    color: #0056b3;
    margin-bottom: 20px;
    font-size: 2em;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

section ul {
    list-style: none; /* 목록 마커 제거 */
    padding: 0;
    margin-top: 20px;
}

section ul li {
    background-color: #e9f7fe; /* 연한 하늘색 배경 */
    margin-bottom: 10px;
    padding: 12px 15px;
    border-left: 5px solid #007bff;
    border-radius: 5px;
    font-size: 1.1em;
}

section ul li strong {
    color: #004d66;
}

/* 푸터 스타일 */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
    width: 100%;
    box-sizing: border-box; /* padding을 지정한 너비 안에 포함 */
    margin-top: auto; /* 하단에 고정 */
}

footer p {
    margin-bottom: 15px;
    font-size: 0.9em;
    opacity: 0.8;
}

/* 버튼 스타일 */
#contactButton { /* ID 선택자 사용 */
    background-color: #28a745; /* 녹색 버튼 */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease, transform 0.2s ease; /* 호버 애니메이션 */
}

#contactButton:hover {
    background-color: #218838; /* 진한 녹색 */
    transform: translateY(-2px); /* 살짝 위로 */
}

<script src="profile_script.js"></script>

// '문의하기' 버튼 요소를 ID로 선택합니다.
const contactButton = document.getElementById('contactButton');

// 버튼에 클릭 이벤트 리스너를 추가합니다.
contactButton.addEventListener('click', function() {
    // 버튼이 클릭될 때 경고창(alert)을 띄웁니다.
    alert('아직 문의 기능은 개발 중입니다. 잠시만 기다려주세요! 😊');
});

// 페이지가 로드되면 실행되는 메시지 (선택 사항)
window.onload = function() {
    console.log('프로필 페이지가 성공적으로 로드되었습니다!');
    // 개발자 도구의 콘솔 탭에서 이 메시지를 확인할 수 있습니다.
};