웹퍼블리싱 교과목 기말 프로젝트 [자기PR 페이지]

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

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

🔑 핵심 기술 요약

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

📌 주요 코드

HTML5 시멘틱 태그

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
    <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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
        .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 학습 전으로 포함되지 않음
- 웹 개발 시작 초반에 진횅한 프로젝트라 다소 미흡한 요소 존재