📝 Apple macOS의 UI를 콘셉트로 제작한 자기PR 페이지

기간 2023.11 ~ 12 (1-2학기)
인원 개인
담당분야 콘텐츠 구성 및 레이아웃 배치
관련 링크 https://hwijaekim.github.io/unionpt



🔑 핵심 기술 요약

  • HTML과 CSS 기초를 배운 후 이를 이용하여 최초로 제작한 웹 사이트
  • GitHub 가입과 리포지토리 생성 방법을 숙지한 후 처음으로 배포
  • 기초CSS를 응용하고 리서치 하여 macOS 스타일의 UI를 구성하고 메뉴를 배치
  • 여러 HTML 태그를 이용하여 코드를 작성





📌 주요 코드

HTML5 시멘틱 태그

    <footer>
        <div id="footer_left">
            <p>Project Info. <br> Web Publishing Final Project | Desktop Concept Website Design.</p>
            <br>
            <p>Contact. <br> E-MAIL | kohga6007@kaywon.ac.kr <br> INSTAGRAM | Primary: @hwijae_kim &nbsp;&nbsp; Portfolio: @hwijae_portfolio</p>
        </div>

        <div id="footer_right">
            <p>Education. <br> Kaywon University of Art & Design | Digital Media Design</p>
            <br>
            <p>Copyright. <br> ©2023. KIM HWIJAE. All Rights Reserved.</p>
        </div>
    </footer>

마우스 hover, active

        .nav_a:link, .nav_a:visited {
            margin-right: 10px;
            padding: 14px 15px;
            color: white;
            text-decoration: none;
            display: inline-block;
        }
        .nav_a:hover, .nav_a:active {
            margin-right: 10px;
            padding: 14px 15px;
            color: white;
            background-color: rgba(255, 255, 255, .3);
            border-radius: 10px;
        }



🖥️ 사용 기술



⌨️ 총평

  • Good Parts
    • HTML/CSS를 이용하여 UI를 작성하고 콘셉트에 맞춘 레이아웃을 구성
    • 웹 사이트 개발의 기초를 다지고 실제 프로젝트를 진행
  • Bad Parts
    • 기초를 학습하고 처음으로 진행한 프로젝트로 CSS를 분리하지 않고 HTML 내에서 작업함
    • JavaScript 학습 전으로 포함되지 않음
    • 웹 개발 시작 초반에 진횅한 프로젝트라 다소 미흡한 요소 존재