“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
프론드앤드 개발자 포트폴리오 만들기 vol.1
01. 비주얼스튜디오에 사이트 만들기 기본 세팅하기
- vite로 작업하기 위해 node.js가 설치 되어 있어야 한다.
- scss를 쓸 것 이므로 터미널에 [ npm install -D sass ] 작성해 준다.
02. index 세팅
<!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.0">
<title>웹표준 사이트 만들기</title>
<link rel="icon" type="image/svg+xml" href="images/webs.svg" />
<meta name="author" content="aimee">
<meta name="description" content="프론트앤드 스터디 사이트 입니다.">
<meta name="keyword" content="프론트앤드, 스터디, 웹사이트, 퍼블리셔">
<meta name="robots" content="all">
</head>- meta데이터 세팅
<body class="nanum9">
<div id="skip">
<a href="#sliderSection">슬라이드 영역 바로가기</a>
<a href="#introSection">소개 영역 바로가기</a>
<a href="#member">멤버 영역 바로가기</a>
<a href="#portSection">포트폴리오 영역 바로가기</a>
<a href="#youtubeSection">유튜브 영역 바로가기</a>
<a href="#unsplashSection">언스플래쉬 영역 바로가기</a>
<a href="#moviesSection">영화 영역 바로가기</a>
<a href="#reviewSection">리뷰 영역 바로가기</a>
</div>
<!-- //skip -->
<header id="header" class="header__wrap" role="heading">
<div class="header__inner container">
<h1 class="header__logo">
<a href="#">web <em>site</em> </a>
</h1>
<nav class="header__nav" role="navigation">
<ul>
<li><a href="#introSection">소개</a></li>
<li><a href="#member">멤버</a></li>
<li><a href="#portSection">포트폴리오</a></li>
<li><a href="#youtubeSection">유튜브</a></li>
<li><a href="#unsplashSection">이미지</a></li>
<li><a href="#moviesSection">영화</a></li>
</ul>
</nav>
</div>
</header>- skip메뉴 작성하기
- header에 최근 큰 사이트들에서 보여지는 role태그도 넣어주기