profile.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>실습 예제: 취업용 프로필 페이지 제작</title>
<link rel="stylesheet" href="css/style.css" />
<script
src="https://kit.fontawesome.com/ccbe8c103f.js"
crossorigin="anonymous"
></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Gowun+Batang&family=Noto+Sans+KR:wght@100..900&family=Orbitron:wght@400..900&display=swap"
rel="stylesheet"
/>
<script type="module" src="js/common.js"></script>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=e9fe1412f4054f7a41e864440620cadf"
></script>
<script defer src="js/map.js"></script>
</head>
<body>
<div class="wrap">
<header>
<h1><a href="index.html" title="인트로 페이지 이동">SANG-DO NAM</a></h1>
<nav>
<a href="profile.html">About me</a>
<a href="works.html">My works</a>
<a href="blog.html">Diary</a>
<a href="join.html">Join</a>
<a href="login.html">Login</a>
</nav>
<div class="btnToggle">
<p></p>
<p></p>
<p></p>
</div>
</header>
<main class="profile">
<figure>
<img src="img/picUser.jpg" alt="남상도 프로필 이미지" />
</figure>
<article>
<p>
<!-- lorem10 -->
저는 기업용 솔루션 기획 및 운영 경험을 바탕으로 AI 프로젝트 매니저에
도전하는 지원자입니다. 한국자산평가 솔루션기획팀에서 서비스기획,
고객기술지원, 데이터관리 업무를 수행하며 금융 솔루션에 대한 실무
경험을 쌓았습니다. 특히 8개 금융사의 문서 자동화 프로젝트를
성공적으로 완수하며 기획 역량과 프로젝트 수행 능력을 입증했습니다.
현재 알파코캠퍼스 AI 개발자 과정을 통해 CV, NLP, 웹 개발, 클라우드
등 AI 기술을 집중적으로 학습하며, 프로젝트 관리뿐만 아니라 AI
엔지니어링까지 갖춘 전문가로 성장하고 있습니다. 프로젝트 전체를
조망하는 통찰력과 문제해결 능력을 바탕으로 기업의 AI 솔루션 도입과
디지털 혁신을 주도하는 프로젝트 매니저가 되겠습니다.
</p>
<a href="works.html" title="남상도의 작업물 페이지로 이동"
>My works</a
>
</article>
<div id="map"></div>
</main>
<footer>
<ul>
<li>
<a href="#" target="_blank"><i class="fa-brands fa-youtube"></i></a>
</li>
<li>
<a href="https://sd-ux.blogspot.com/" target="_blank"
><i class="fa-brands fa-google"></i
></a>
</li>
<li>
<a href="#" target="_blank"
><i class="fa-brands fa-square-facebook"></i
></a>
</li>
</ul>
<p>2025 nam sang do © All right reserved.</p>
</footer>
</div>
<aside class="mobileMenu"></aside>
</body>
</html>
_map.js
// 필요한 전역변수 술정
const mapContainer = document.querySelector('#map');
const mapOption = {
center: new kakao.maps.LatLng(37.51234769667704, 126.90841343311608)
};
// 문서 로딩 이벤트 바인딩
renderMap();
// 리사이즈 이벤트 바인딩
window.addEventListener('resize', renderMap);
function renderMap() {
mapContainer.innerHTML = '';
const map = new kakao.maps.Map(mapContainer, mapOption);
// 마커의 위치 값을 우선 세팅
const marker = new kakao.maps.Marker({ position: mapOption.center });
marker.setMap(map);
}
// 구글맵에서 찍은 위도, 경도는 실제 카카오 지도와의 오차 범위가 큼 (오차범위를 줄여야 함)
// 구글맵에서 위도, 경도 확인 > Kakap Maps API Sample > 클릭한 위치에 마커 표시하기
_profile.scss
@use 'variable';
.profile {
margin-bottom: 40px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
figure {
width: 35%;
height: 400px;
margin-bottom: 30px;
overflow: hidden;
background-color: var(--point-lch);
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 1s;
&:hover {
transform: scale(1.5);
opacity: 0.5;
}
}
}
article {
width: 55%;
text-align: left;
p {
line-height: 1.5;
margin-bottom: 30px;
text-align: justify;
opacity: 0.5;
}
a {
background-color: black;
font-weight: bold;
font-size: 0.7rem;
color: white;
width: 100px;
height: 30px;
display: inline-block;
text-align: center;
line-height: 30px;
border-radius: 15px;
transition: 0.5s;
&:hover {
width: 150px;
background-color: var(--point-lch);
}
}
}
}
#map {
width: 100%;
height: 60vh;
background: black;
filter: saturate(0) invert(0) contrast(0.4);
&:hover {
filter: saturate(1);
}
}
// tablet
@media screen and (max-width: variable.$wid_tablet) {
.profile {
flex-wrap: wrap;
figure {
width: 100%;
height: 50vw;
}
article {
width: 100%;
}
}
}
// m.p
@media screen and (max-width: variable.$wid_mp) {
.profile {
figure {
height: 70vw;
}
}
}
Tags:
웹개발_교육
