배고프다
모바일 페이지 마크업 완료
밸리데이터 검사를 통과했다!
마크업 고쳤으면 하는 부분이 있다면 알려주세용🤖
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
<!-- reset.css -->
<link rel="stylesheet" href="./common/minireset.css" />
<!-- common.css -->
<link rel="stylesheet" href="./common/commonCss.css" />
<title>이주현 웹퍼블리셔 포트폴리오</title>
</head>
<body>
<header>
<button><img src="#" alt="bunny" />홈</button>
<ul>
<!-- moblie, tablet menu -->
<li><a href="#">ABOUT</a></li>
<li><a href="#">PROJECT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</header>
<main>
<!-- main section -->
<section>
<!-- big logo -->
<h2>JUHYEON PORTFOLIO</h2>
<!-- category -->
<ul>
<li>
<a href="#"><img src="#" alt="lineBox" />ABOUT</a>
</li>
<li>
<a href="#"><img src="#" alt="lineBox" />PROJECT</a>
</li>
<li>
<a href="#"><img src="#" alt="lineBox" />CONTACT</a>
</li>
</ul>
<!-- homepage icon -->
<ul>
<li><a href="#">github</a></li>
<li><a href="#">velog</a></li>
</ul>
<!-- scroll icon -->
<a href="#">🔻</a>
</section>
<!-- about section -->
<section>
<h2>About</h2>
<!-- big text + keyword -->
<div class="aboutContainer">
<h3>디자인에서 퍼블리싱까지</h3>
<ul>
<li><img src="#" alt="blueBall" />분석력</li>
<li><img src="#" alt="redBall" />꼼꼼함</li>
<li><img src="#" alt="navyBall" />차분함</li>
</ul>
</div>
<!-- 자기소개 + 더보기 -->
<div class="info">
<!-- text -->
<p>
신입 웹 퍼블리셔 이주현입니다.<br />
탐색하고 배우며, 내 것으로 만들기를 좋아합니다.<br />
끝없이 공부하는 성장형 퍼블리셔 입니다!
</p>
<!-- expand arrow -->
<div class="expandArrow">
<a href="#">더보기</a>
<a href="#">🔻</a>
</div>
<div class="expandInfo">
<!-- pixel popup img -->
<img src="#" alt="popUp" />
<p>
안녕하세요! 시각디자인 디지털 학과를 전공한 이주현입니다.<br />
UX/UI 디자인 직무를 희망하고 있던 중,<br />
“내가 디자인한 앱/웹을 구현할 수 있다면 어떨까?”<br />
하는 생각이 들었고, 대학교에서 한 학기 동안 <br />
HTML, CSS를 배웠던 것이 떠올랐습니다.<br /><br />
디자인과 코딩을 동시에 다루는 웹퍼블리셔라는<br />
직업을 알게 되었고, 컴퓨터 작업을 좋아하는 제게<br />
잘 맞는 일이라고 판단되어 학원에서 웹 퍼블리셔<br />
과정을 이수하게 되었습니다.<br /><br />
내가 좋아하는, 새로운 것을 배우니 자연스럽게<br />
열정이 생겼습니다.<br /><br />
멈추지 않고! 끝없이 성장하는 퍼블리셔가<br />
되겠다고 다짐했습니다.
</p>
<!-- close button -->
<button>
<img src="#" alt="closeBtn" />
닫기
</button>
</div>
</div>
</section>
<!-- tool & skill section -->
<section>
<h2>Tool & Skills</h2>
<!-- publishing -->
<div class="toolContainer">
<div class="blackBoxContainer">
<img src="#" alt="blackBox" />
< > Publishing < / >
</div>
<ul>
<li><img src="#" alt="heart" />HTML5</li>
<li><img src="#" alt="heart" />CSS3</li>
<li><img src="#" alt="heartLess" />JavaScript(ES6+)</li>
<li><img src="#" alt="heartLess" />jQuery</li>
<li><img src="#" alt="heart" />Git & GitHub</li>
</ul>
</div>
<!-- design -->
<div class="toolContainer">
<div class="blackBoxContainer">
<img src="#" alt="blackBox" />
☆ --- Design --- ☆
</div>
<ul>
<li><img src="#" alt="heart" />Photoshop</li>
<li><img src="#" alt="heart" />Illustrator</li>
<li><img src="#" alt="heartLess" />Figma</li>
<li><img src="#" alt="heartLess" />Adobe XD</li>
<li><img src="#" alt="heart" />Zeplin</li>
</ul>
</div>
</section>
<!-- project section -->
<section>
<h2>Select Project</h2>
<div class="projectBox">
<ul>
<li>
<a href="#"><img src="#" alt="lineBox" />All</a>
</li>
<li>
<a href="#"><img src="#" alt="lineBox" />Publishing</a>
</li>
<li>
<a href="#"><img src="#" alt="lineBox" />Design</a>
</li>
</ul>
<!-- gameboy background img -->
<div class="gameBoy">
<img src="#" alt="projectImg" />
<ul>
<li>펫살롱</li>
<li>반려동물 미용 예약 앱</li>
<!-- br -->
<li>#UX/UI 디자인</li>
<li>#기획</li>
<li>#모바일</li>
</ul>
<div class="btnContainer">
<button>
<img src="#" alt="projectBtnLeft" />
</button>
<button>
<img src="#" alt="projectBtnRight" />
</button>
</div>
</div>
</div>
</section>
<!-- contact section -->
<section>
<h2>Contact</h2>
<ul>
<li>
<a href="#"><img src="#" alt="email" />이메일</a>
</li>
<li>
<a href="#"><img src="#" alt="phone" />전화번호</a>
</li>
<li>
<a href="#"><img src="#" alt="kakaoTalk" />카카오톡</a>
</li>
</ul>
</section>
</main>
<footer>Copyright 2023. Lee JuHyeon All rights reserved.</footer>
</body>
</html>