2023.08.30 - [무작정 따라하기] - 무작정 따라하기 (랜딩페이지) Step.01
무작정 따라하기 (랜딩페이지) Step.01
HTML, CSS, javascript 에 관한 기초 지식이 없으시면 이전 글을 한번 보신 후 어느정도 이해하시고 진행하시는 것을 추천드립니다. 2023.08.25 - [Web/html] - 01.HTML의 개요 01.HTML의 개요 HTML은 웹 페이지를
selfda.life
이제부터 앞 글에서 보여준 디자인을 토대로 코딩을 진행해 보겠습니다.
피그마를 통해 디자인 파일을 올려두었습니다.
Figma
Created with Figma
www.figma.com
디자인에 사용된 이미지들은 상업적 용도로 사용하실 수 없습니다.
먼저 html 파일을 만들어줍니다.
저는 Bracktes 이라는 프로그램을 활용하여 작업하겠습니다.
해당 편집 툴이 없으신 분들은 아래 링크에 에디터 프로그램에 관하여 포스팅 하였으니 참고 부탁드립니다.
2023.08.25 - [Web] - 시작 전 코딩을 위한 준비물
시작 전 코딩을 위한 준비물
먼저 코딩을 하기 전에 내가 작성한 코드가 실제 웹 화면을 통해 결과물을 보면서 코딩을 할 프로그램이 필요할 것 입니다. 코딩을 한 결과물을 웹에서 보기 위해선 다양한 에디터 프로그램을
selfda.life
index.html 이라는 파일을 생성 하였습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<!--HTML 문서의 문자 인코딩 방식-->
<title>셀프다 교육용</title>
<!--타이틀입니다.-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--IE 9에서의 렌더링이 호환성보기를 무시하게됩니다-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<!--반응형 작업을 위한 viewport 값을 성정하였습니다. -->
</head>
<body>
</body>
</html>먼저 기본적인 html의 구조를 생성하였습니다.
이제 css와 js 파일을 생성하여 랜딩 페이지에서 불러올 수 있도록 하겠습니다.
저는 랜딩 페이지가 작동하는 root폴더 안에 css(css관리 폴더)와 js(js관리 폴더), images(이미지 폴더) 라는 폴더를 새로 만들어 정리하였습니다.
먼저 css 폴더 안쪽으로 common.css라는 폴더를 생성해줍니다.
css는 html에 사용되는 태그들의 모양을 변형할 수 있는 문서입니다.
기본적으로 html태그들은 고유의 속성을 가지고 있기 때문에 내가 원하는 css를 작성하려면 css문서를 통해 css를 초기화 해주는 것이 좋습니다.
css 문서 를 켜고 아래 작성된 코드를 복사해서 먼저 초기값을 셋팅해주겠습니다.
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;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}html 문서에 준비된 css를 불러오도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>셀프다 교육용</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/slick.css"> <!--앞으로 사용할 슬라이드의 오픈소스입니다.-->
</head>
<body>
<!--스크립트-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <!--jquery의 최신버전 입니다.-->
<script type="text/javascript" src="js/common.js"></script> <!--자바스크립트를 작성할 문서입니다.-->
<script type="text/javascript" src="js/slick.js"></script> <!--앞으로 사용할 슬라이드의 오픈소스입니다.-->
</body>
</html>자 여기까지 되셨으면 html, css, js를 이용하여 코딩할 준비가 되셨습니다.!!
다음 포스팅에서는 공통 헤더의 영역을 만들어 보도록 하겠습니다.
'무작정 따라하기' 카테고리의 다른 글
| 무작정 따라하기 (랜딩페이지) Step.04 (0) | 2023.09.08 |
|---|---|
| 무작정 따라하기 (랜딩페이지) Step.03 (0) | 2023.09.06 |
| 무작정 따라하기 (랜딩페이지) Step.01 (0) | 2023.08.30 |