# 개요
블로그를 보시고 포트폴리오 만들기를 진행하시려는 분들께 제공하는 기초 문서입니다.
매번 게시글마다 폴더 하나하나를 설명해 드리기에는 내용이 길어질 듯하여 한 번에 정리하여 설명해 드립니다.
파일을 다운로드하시면 index.html과 assets 폴더로 이루어져 있습니다.
assets 폴더는 저희가 사용하게 될 CSS, JS, framework, img 등이 올라갈 공간입니다.
제 블로그는 다년간의 노하우로 작성하는 만큼 실무에서 사용하는 방식을 최대한 반영하여 서술하려고 합니다.
이해나 설명이 부족하다고 느낀다면 댓글이나 카카오톡 상담으로 문의하시면 최대한 도움을 드리겠습니다.
# CSS
모든 .css 확장자를 저장하는 폴더입니다.
# animation.css
CSS 애니메이션을 작성하는 곳입니다.
애니메이션 액션을 하나 만들어두고 다른 부분에서도 사용을 할 수 있기에 한곳으로 모아두었습니다.
현재는 페이지 로딩 시 생기는 로딩 관련 애니메이션이 들어있습니다.
# common.css
스타일의 개인 설정 클래스를 작성해주는 곳입니다.
특정한 레이아웃 스타일 등을 미리 저장하여 하나의 클래스로 사용해줍니다.
# fonts.css
웹 폰트를 설정해주는 CSS입니다.
현재 "Pretendard" 웹 폰트가 설정되어있습니다.
# index.css
저희가 index.html 에서 사용할 css 를 작성해주는 곳입니다.
# layout.css
홈페이지의 레이아웃 CSS를 작성할 공간입니다.
header, main ,footer 등에서 공통으로 사용할 css 를 작성해줍니다.
# reset.css
태그들은 자신의 고유 스타일을 가지고 있습니다.
불필요한 기본 스타일을 제거해줍니다.
#variables.css
자신만의 고유한 클래스를 제작하여 모든 페이지에서 공통으로 사용할 class 입니다.
# JS
모든 .js 확장자를 저장하는 폴더입니다.
# common.js
모든 페이지에서 공통으로 사용할 Javascript(JQuery)를 작성할 공간입니다.
# index.js
index.html 페이지에서 사용하게 Javascript(JQuery)를 작성할 공간입니다.
# {pagename}.js
추후 index.html이 아니라 다른 서브 페이지가 추가될 경우 해당 html의 파일명을 따라 JS 파일을 생성합니다.
# Fonts
사용하고자 하는 웹 폰트는 이곳에 저장하시면 됩니다.
# Pretendard
무료 공개 폰트로 작업물의 퀄리티를 올리기 위해 준비했습니다.
(참조)
# Img
이미지를 저장할 공간입니다.
# framework
모든 프레임워크를 저장하는 공간입니다.
# Bootstrap
반응형 레이아웃이나, CSS 함수 등 기본 설정 값들을 편하게 사용하기 위해서 준비했습니다.
(참조)
# Library
모든 라이브러리를 저장하는 공간입니다
# AOS (Animate On Scroll Library)
스크롤 시 FadeIn, FadeOut 등 부드럽게 나타나고 사라지는 효과를 위해서 준비했습니다.
(참조)
# Jquery
바닐라 자바스크립트 뿐만 아니라, 빠른 작업 속도 및 퀄리티를 위해서 준비했습니다.
(참조)
# Slick
사이트마다 꼭 있는 슬라이더를 사용하기 위해 준비했습니다.
(참조)
# index.html
저희가 실제로 코딩을 진행할 공간입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 기본 레이아웃 및 프레임워크 </title>
<!--
같은 class에 스타일을 줄 경우 최하단에 작성한 css 를 불러오기에
기본 프레임워크를 불러오고 하단의 css 에서 가공하거나 변경해준다.
-->
<!-- Bootstrap CSS -->
<link href="assets/frameworks/bootstrap/bootstrap.min.css" rel="stylesheet">
<!-- AOS CSS -->
<link href="assets/frameworks/aos/aos.css" rel="stylesheet">
<!-- Slick CSS -->
<link href="assets/frameworks/slick/slick.css" rel="stylesheet">
<!-- 웹 폰트 CSS -->
<link href="assets/css/fonts.css" rel="stylesheet">
<!-- 페이지 기본 설정 CSS -->
<link href="assets/css/common.css" rel="stylesheet">
<!-- 페이지 기본 레이아웃 CSS -->
<link href="assets/css/layout.css" rel="stylesheet">
<!-- 애니메이션 CSS -->
<link href="assets/css/animation.css" rel="stylesheet">
<!-- Jquery를 불러온다. -->
<script src="assets/frameworks/jquery/jquery-3.6.4.min.js" ></script>
</head>
<body>
<div id="pageLoading">
<div>
<div class="loading-container black">
<div class="loading"></div>
<div class="loading-text">Kaheal</div>
</div>
</div>
</div>
<div class="body">
<div class="body-inner">
<header>
<div class="container">
로고, 네이버게이션 등이 위치할 부분입니다.
</div>
</header>
<main>
<div class="container">
본문 내용이 들어갈 부분입니다.
</div>
</main>
<footer>
<div class="container">
<p>Copyright © Developer Kaheal. All rights Reserved.</p>
<address>제공자 블로그 : <a href="https://kaheal.tistory.com/" target="_blank">Developer Kaheal</a></address>
</div>
</footer>
</div>
</div>
<!-- Bootstrap JS -->
<script src="assets/frameworks/bootstrap/bootstrap.min.js" defer></script>
<!-- AOS JS -->
<script src="assets/frameworks/aos/aos.js" defer></script>
<!-- Slick JS -->
<script src="assets/frameworks/slick/slick.min.js" defer></script>
<!-- 페이지 기본 설정 JS -->
<script src="assets/js/common.js"></script>
<!-- index에서 사용할 JS -->
<script src="assets/js/index.js"></script>
</body>
</html>
# 준비물 다운로드
우측의 초록색 Code 버튼을 누르고 Download ZIP을 누르시면 쉽게 다운로드가 가능합니다.
GitHub - kahealblog/material: 포트폴리오 준비물
포트폴리오 준비물. Contribute to kahealblog/material development by creating an account on GitHub.
github.com
# 기타 프로그램
# 비주얼 스튜디오 코드
처음 시작 하시는 분들을 위해 쉽고 편리한 에디터를 추천드립니다.
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
# 사용 샘플 사이트
해당 프레임워크들이 많이 사용된 예시 홈페이지입니다.
로또번호 무료 생성 서비스 | 로또메이커
로또 번호 무료 생성 서비스 입니다. 로또 1등을 향한 회원님의 현명한 시도 무료로 모든 기능을 이용해보세요. 이번주로또예상번호, 무료로또번호, 로또당첨번호 | 로또메이커
lottomaker.co.kr
# 무료강의
# 무료상담
- 이제 막 공부를 시작하신 분
- 하다가 막히신 분
- 궁금하신 것이 있는분
- 모두 무료로 질문에 답변을 드립니다.
- 단, 너무 많은 질문이 발생한 경우 확인하는 대로 답변드립니다!
카힐님의 오픈프로필
풀스택 10년차 프리랜서 카힐
open.kakao.com