처음부터 창조하기보다는 역시 남의 것을 습득하는 게 간편하고 빠르다.
Github에서 포트폴리오 템플릿을 다운 받아서 내가 필요한 것만 가져오면 된다.
여기 양식이 다양하고 애니메이션도 있어서 가져올 것들이 많아서 참고 많이 했다.
github.com/webstoryboy/portfolio
webstoryboy/portfolio
포트폴리오 샘플 소스입니다. Contribute to webstoryboy/portfolio development by creating an account on GitHub.
github.com
일단 [assets] 폴더에 [css], [font], [img] 폴더를 각각 만들어준다.
내가 참고할 템플릿에서 요소를 빼서 수정하는데 html은 내가 쓸 부분만 옮긴다. 나는 html과 마찬가지로 필요한 것만 가져오긴 했지만 css파일은 통채로 넘겨주고 필요한 부분만 수정해도 상관 없을 것 같다.
이미지는 내가 원하는 이미지파일로 다 바꿔줬다.
index.html 파일을 각각 visual studio와 크롬으로 열어서 수정했다.
visual studio에서 html을 짜고 저장한 후 크롬에서 새로고침하면 내가 짠 코드가 반영된 것을 확인할 수 있다. github에서 만든 웹이 아니라 로컬 파일로 볼 수 있어서 여러번 수정할 때 빠르고 편하다.
html과 css를 공부하진 않아서 한 줄씩 지워보고 뭐가 변했는지 확인하느라 에너지 다 소모함...
1. 헤드 부분
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<head>
<meta charset="UTF-8"> <!-- 한글 깨짐 방지 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0, width=device-width"> <meta name="author" content="HADAN">
<title>HADAN | Portfolio</title> <!-- 탭에 표시되는 사이트 이름 -->
<!-- style: css파일을 html파일에 연결해줌. 링크는 파일 경로 -->
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style4.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<!-- 웹 폰트 -->
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Chau+Philomene+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina" rel="stylesheet">
</head>
|
cs |
2. 바디 부분
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!--class=""는 css파일의 .00{}와 연결. id=""은 #00{}와 연결됨.
target="_blank는 새창으로 열기--> <body class="active"> <header id="headers">
<div class="header_text"><img src="assets/img/hadan4.png" alt="PORTFOLIO"></div>
</header>
<!-- //headers -->
<div class="mainImg"><img src="assets/img/복병icon.png" alt=""></div>
<div class="mainImg2"><img src="assets/img/그림1.png" alt=""></div>
<!-- //main -->
<section class="table">
<div class="github hoverjello"><a href="https://github.com/hadan-HwH" target="_blank">
<img src="assets/img/github.png" alt="github"></a><span>github</span>
</div>
<div class="tistory hoverjello"><a href="https://spaceunderthe.tistory.com/" target="_blank">
<img src="assets/img/tistory.png" alt="tistory"></a><span>tistory</span>
</div>
<div class="blogger hoverjello"><img src="assets/img/blogger.png" alt="blogger">
</a><span>secret</span> </div>
</section>
|
cs |
3. css
css파일이 건들이기 어려웠는데 애니메이션 부분은 그대로 복붙했고 html에서 사용한 것만 따온 후에 내가 원하는 대로 수정했다. 하나씩 건들여보느라 바빠서 각주 못달았음...ㅠㅠ
복잡해보였는데 생각보다 직관적이고 구글링하면서 고치면서 하니까 나름 할만했다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
/* 레이아웃 */
body {width: 100vw; height: 100vh; overflow: hidden; background-image:
linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);} #wrap { }
#headers {width: 100%; height: 40px; background-color:#f1f1f1; border-bottom: 2px solid #000;}
#contents {}
/* 헤더 */
.header_text {width: 50px; position: absolute; left: 30px; top: 1%;}
/* 메인 */
.mainImg {width: 200px; position: absolute; left: 50%; top: 40%; z-index: 0; transform:
translate(-50%, -50%);} .mainImg2 {width: 600px; position: absolute; left: 50%; top: 50%; z-index: 0; transform:
translate(-50%, -50%);} /* 테이블 */
.table {width: 1200px; height: 100vh; position: absolute; left: 50%; transform: translateX(-50%);
background: url(../img/table3.svg) no-repeat center;} .table > div {position: relative; text-align: center;}
.table > div > span {position: absolute; left: 50%; top: -20px; transform: translateX(-50%);
display: block; border-radius: 5px; width: 50%;padding: 3px 10px 0 10px; opacity: 0; background: #fff; border: 2px solid #000; transition: opacity 0.3s ease;} .table > div:hover > span {opacity: 1;}
.table {height:100px; max-width: 100%; min-width: 100%; position: absolute;
transform: translateX(-50%); background: url(../img/table3.svg) no-repeat center;} .table .github {width: 70px; position: absolute; left: 40%; bottom: 12px; z-index: 2;}
.table .tistory {width: 60px; position: absolute; left: 50%; bottom: 15px; z-index: 2;}
.table .blogger {width: 60px; position: absolute; left: 60%; bottom: 15px; z-index: 2;}
|
cs |
이렇게 하고 github에 커밋.
HADAN | Portfolio
hadan-hwh.github.io
웹 사이즈가 바뀔 때마다 이미지가 자연스럽게 움직일 수 있도록 수정하는 것에 생각보다 시간을 많이 썼다.
아래 아이콘을 누르면 내가 지정한 사이트로 간다. 애니메이션도 넣었는데 마우스 올리면 띠용~하면서 움직임.
뿌듯...하긴 한데 그래서 resume는 어디다 써..?
'Project > Github Web - HTML,CSS' 카테고리의 다른 글
| [Git hub]깃허브로 웹페이지 만들기(4) - Modal 팝업창 (0) | 2020.09.11 |
|---|---|
| [Git hub]깃허브로 웹페이지 만들기(3) - 메인보드 추가 (0) | 2020.09.09 |
| [Git hub]깃허브로 웹페이지 만들기(1) - 웹페이지 생성 (0) | 2020.09.06 |