오늘은 잠시 스토리보드를 접고 직접 화면을 구현하는 시간을 가져보았다. 그런데 sublime text 3는 내가 원하는 개발 환경이 아니라서 visual studio code를 설치하여 초기 개발 환경을 구축하였다.
구글링을 통하여 열심히 기초 개발 환경에 대한 블로그나 공식 문서를 많이 보고 직접 따라해봤다. 생각보다 확장 프로그램을 많이 깔아야 해서 시간이 오래 걸렸다.
이후에 크롬에서 F12를 눌렀을 때 sources에서 본 웹페이지 형식을 그대로 따라하기 위해 css, js 폴더를 프로젝트 폴더에 배치하고 index.html을 생성하였다.
index.html에는 처음에 그렸던 사이트 소개 페이지를 넣을 예정이었다. 그러나 아직까지 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
26
27
28
29
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>해킹의 모든 것을 담다, SubHack</title>
<!--작성일 : 2020.05.12 ~ continuing-->
</head>
<body style="background-color: #E5E7E9">
<header>
<div style="width: 50%; margin-left: 16px;">
<img src="data/stealth2.png" width=auto height="45" style="margin-top: 7px;">
<a href="/" style="color: black; text-decoration:none;"><font size="7"> SubHack.</font></a>
</div>
<div style="float: right; margin-right:30px; text-align: center;">
<a href="login.html" style="color:black; font-weight:bold; padding: 0.5em 0.5em; border-radius: 12px; border:1px solid grey; text-decoration:none;box-shadow: 0px 0px 5px 1px grey;">{login}</a>
</div>
<div style="float: right; margin-right:30px; text-align: center; color:#7F8C8D;">
아직 계정이 없다면? <a href="register.html" style="color:black; text-decoration:none;"><strong>-가입-</strong></a>
</div>
</header>
<div style="background-color: lightskyblue">
<p style="font-weight: bold">뽀로로</p>
<p>이 애니의 주인공으로,<br>호기심이 많은 꼬마 <span style="color: blue;font-weight: bold">펭귄</span>이다.</p>
</div>
</body>
</html>
|
cs |
이정도 느낌으로 만들어 보았다.
생각보다 잘 나왔지만, 폰트가 마음에 들지 않아서 css 파일을 연결하여 구글 웹폰트에 있는 Gugi font로 바꿔보았다.
한층 사이트가 깔끔해진 느낌을 느낄 수 있었다. 안의 내용은 나중에 채워보기로 했다. 오늘은 여기까지.
'2020 Web Develop' 카테고리의 다른 글
| 웹개발 일지 7일차 (20.05.19) (0) | 2020.05.24 |
|---|---|
| 웹개발 일지 6일차 (20.05.18) (0) | 2020.05.23 |
| 웹개발 일지 4일차 (20.05.11) (0) | 2020.05.22 |
| 웹개발 일지 3일차 (20.05.04) (2) | 2020.05.22 |
| 웹개발 일지 2일차 (20.04.28) (0) | 2020.05.05 |