page edit

김민원·2024년 9월 23일
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #7e7d7dfd;
        }
        .banner {
            background-color: black; /* 배너의 배경색을 검정색으로 설정 */
            text-align: center; /* 중앙 정렬 */
            padding: 20px 0;
        }
        .banner img {
            max-width: 100%;
            height: auto;
        }
        header, footer {
            background-color: #333;
            color: white;
            text-align: center;
        }
        main {
            padding: 1em;
        }
        nav ul {
            list-style: none;
            padding: 0;
            text-align: center;
        }
        nav ul li {
            display: inline;
            margin-right: 10px;
        }
        nav ul li a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
        }
        .button-container {
            display: flex;
            justify-content: center;
            gap: 20px; /* 버튼들 사이의 간격 조정 */
            flex-wrap: wrap;
        }
        .button-image {
            width: 200px;
            height: 200px;
            border-radius: 15px;
            overflow: hidden;
            object-fit: cover;
        }
        .additional-button {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            gap: 20px; /* 추가 버튼들의 간격을 기존 버튼들과 맞춤 */ /* 수정된 부분 */
        }
        .youtube-container {
            display: flex;
            justify-content: center;
            padding: 20px 0;
        }
        @media (max-width: 600px) {
            .button-image {
                width: 100px;
                height: 100px;
            }
        }
    </style>
</head>
<body>
    <div class="banner">
        <img src="images/2.png" alt="배너 이미지">
    </div>
    <header>
    </header>
    <nav>
        <ul>
            <li><a href="#about">About Me</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    <main>
        <div class="button-container">
            <a href="https://blog.naver.com/whiteslash" target="_blank">
                <img src="images/blog.png" alt="블로그 버튼" class="button-image">
            </a>
            <a href="https://www.instagram.com/kimminw0n/" target="_blank">
                <img src="images/instagram.jpg" alt="인스타그램 버튼" class="button-image">
            </a>
            <a href="https://github.com/kimminw0n" target="_blank">
                <img src="images/github.jpg" alt="GitHub 버튼" class="button-image">
            </a>
        </div>
        <!-- 아래 버튼들의 간격을 조정하여 위와 맞춤 -->
        <div class="additional-button">
            <a href="https://" target="_blank">
                <img src="images/E.png" alt="링크드인 버튼" class="button-image">
            </a>
            <a href="https://velog.io/@nownim/posts" target="_blank"></a>
                <img src="images/velog.png" alt="링크드인 버튼" class="button-image">
            </a>
        </div>
    </main>
    <footer>
        <p>&copy; 2024 KMW</p>
    </footer>
</body>
</html>
<a href="https://velog.io/@nownim/posts" target="_blank"></a>
                <img src="images/velog.png" alt="링크드인 버튼" class="button-image">
            </a>
profile
개발하는 척

0개의 댓글