웹퍼블리싱 교과목 기말 프로젝트 [자기PR 페이지]
📝 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 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 학습 전으로 포함되지 않음
- 웹 개발 시작 초반에 진횅한 프로젝트라 다소 미흡한 요소 존재