프로젝트 백업을 위한 깃허브 저장소 생성하기
프로젝트를 진행하면서 작업순서를 기억하고, 혹시나 모르는 데이터 손실 상황에 대비하기 위하여 깃허브 저장소를 생성하고 해당 저장소에 백업을 할 수 있도록 준비한다.
프로젝트 루트 디렉토리 생성하기
프로젝트 코드가 저장될 루트 디렉토리를 생성한다.
프로젝트 구조 잡기
프로젝트 루트 디렉토리 내부에 위와 같이 index.html 파일과 html, css, js. imgs 폴더를 생성한다.
index.html 기본뼈대 코드 생성하기
<!DOCTYPE html>
<html lang="en">
<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>Sunrise 블로그</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/landing.css">
</head>
<body>
<script src="js/scroll.js"></script>
<script src="js/landing.js"></script>
</body>
</html>index.html 은 웹사이트에서 다른 페이지로 이동하기 위한 안내 페이지다. 뼈대 코드를 위와 같이 생성한다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />아이콘 사용을 위하여 위의 CDN 링크를 index.html 파일의 head 부분에 추가한다.
<link rel="stylesheet" href="css/landing.css">랜딩페이지의 디자인을 위하여 위와 같은 css 파일 링크를 head 부분에 추가한다.
<script src="js/landing.js"></script>랜딩페이지의 동적인 기능을 구현하기 위하여 위 코드를 body 하단에 추가한다.
<script src="js/scroll.js"></script>스크롤 기능을 위하여 위 코드를 body 하단에 추가한다. 스크롤 기능은 페이지 전체에 걸쳐서 재사용되므로 따로 파일로 만들어 사용할 예정이다.
크로스브라우징을 위한 CSS 노멀라이즈 & 리셋
https://www.daleseo.com/css-normalize-reset/#google_vignette
CSS Normalize와 CSS Reset
Engineering Blog by Dale Seo
www.daleseo.com
https://meyerweb.com/eric/tools/css/reset/
CSS Tools: Reset CSS
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter
meyerweb.com
css 폴더에 reset.css 파일을 생성하고 아래 코드를 붙여넣기 한다.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
a{
color: inherit;
text-decoration: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}브라우저들마다 디폴트 스타일이 존재하고 브라우저마다 모두 다르다. 그렇기 때문에 내가 동일한 스타일을 적용해도 UI는 다르게 보일수 있다. 이러한 서로 다른 디폴트 스타일을 제거하여 모든 브라우저에서 동일한 스타일을 적용하면 통일성 있는 UI를 만들수 있다.
글로벌 스타일 작성하기
글로벌 스타일은 웹사이트 전체에 걸쳐 공통적으로 재사용되는 스타일을 정의한다. 웹페이지를 대표하는 브랜드 색상이나 모든 태그에 공통적으로 적용되는 스타일을 작성한다. 또한, 웹사이트 전체 폰트도 해당 파일에서 임포트한다.
@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300&family=Nanum+Gothic+Coding&display=swap');
/* 브랜드 색상 */
:root{
--primary-color: orange;
--secondary-color: darkorange;
--header-height: 80px;
}
*{
box-sizing: border-box;
}
/* 마우스 드래그시 배경색 설정 */
*::selection{
background: var(--primary-color);
color: #fff;
}
/* 수평 스크롤 제거 */
html{
font-family: 'Nanum Gothic Coding', monospace;
overflow-x: hidden;
scrollbar-width: none; /* Firefox */
}
/* 스크롤바 제거 (스크롤 기능은 여전히 가능함) */
body {
-ms-overflow-style: none; /* IE and Edge */
}
body::-webkit-scrollbar{ /* WebKit-based browsers */
display: none;
}css 폴더에 global.css 파일을 추가하고 위와 같이 작성하자!
웹사이트 텍스트에 마우스를 드래그할때 배경색을 지정하고, 스크롤바가 보이지 않도록 가린다. 또한, 모든 태그의 box-sizing 속성을 border-box 로 지정한다.
프로젝트에 필요한 이미지 준비하기
https://github.com/sssssqew/blog-static/tree/main
GitHub - sssssqew/blog-static: blog site (static)
blog site (static) . Contribute to sssssqew/blog-static development by creating an account on GitHub.
github.com
위 링크에서 imgs 폴더의 이미지를 다운로드하고 비주얼 스튜디오 편집기의 imgs 폴더로 드래그해서 추가한다.
'프로젝트 > 블로그 사이트' 카테고리의 다른 글
| 5. 포스트 페이지 구현하기 (0) | 2023.07.16 |
|---|---|
| 4. 홈페이지 구현하기 (0) | 2023.07.09 |
| 3. 스토리 페이지 구현하기 (0) | 2023.07.08 |
| 2. 랜딩 페이지 구현하기 (0) | 2023.07.07 |