2024. 10. 31. 06:06ㆍHTML 정리
1. HTML 예제를 만들어보자
우선적으로 vscode 랑 git 연동시 index.html이라는 파일로 통일해야 404에러가 안뜬다.
(에러나서 다시 rename 하였다.ㅜㅜ)
예시)메인.html (X)
index.html (O)
이런식으로 인덱스를 설정해주어야 커밋하였을때 첫 메인화면이 잘 뜬다.
#index.html 작업 파일 1일차
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chaeyeon's Portfolio</title>
<meta name="description" content="세상에서 가장 사랑스러운 AI 개발자">
<meta name="author" content="Chaeyeon">
<link rel="shortcut icon" href="images/me.ico" type="images/x-icon">
<!--OG (Open Graph Data)-->
<meta property="og:title" content="Chaeyeon의 포트폴리오">
<meta property="og:type" content="website">
<meta property="og:url" content="배포후 생성된 URL">
<meta property="og:image" content="배포후 생성된 이미지 URL">
<!--Web Fonts-->
<link rel="stylesheet" href="./CSS/style.css">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/d0ac420455.js" crossorigin="anonymous">
</script>
</head>
<body>
<!--Header-->
<header class="header">
<!--BEM-->
<div class="header__logo">
<img class="header__logo__img" src="images/me.ico" alt="logo">
<h1 class="header__logo__title"><a href="#">Chaeyeon</a></h1>
</div>
<nav class="header__nav">
<ul class="header__menu">
<li><a href="#home" class="header__menu__item active">홈으로</a></li>
<li><a href="#about" class="header__menu__item">채연</a></li>
<li><a href="#skills" class="header__menu__item">스킬</a></li>
<li><a href="#work" class="header__menu__item">경험</a></li>
<li><a href="#licence" class="header__menu__item">자격증</a></li>
<li><a href="#contact" class="header__menu__item">연락처</a></li>
</ul>
</nav>
</header>
<!--main-->
<main>
<!--home-->
<section id="home">
<img src="./images/me.ico" alt="Chaeyeon's Profile">
<h2>안녕하세요 김채연입니다.</h2>
<p>세상에서 가장 사랑스러운 대한민국 AI 개발자입니다.</p>
<a href="#contact">연락처</a>
</section>
<!--about-->
<section id="about" class="section max-container">
<h2 class="title">김채연</h2>
<p class="description">자기소개 Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, placeat corporis alias est ullam esse explicabo temporibus quos libero itaque nulla cumque qui, debitis ducimus nemo nam distinctio consequatur eligendi?</p>
<ul>
<li>
<i class="fa-brands fahtml5"></i>
<p>front-end</p>
<p>HTML, CSS, Javascript, Node.js, React</p>
</li>
<li>
<i class="fa-solid faa-mobile"></i>
<p>React-Native, Andriod, iOS, Kotlin</p>
<p></p>
</li>
<li>
<i class="fa-solid fa-server"></i>
<p>Back-end</p>
<p>Node.js, fastAPI, Java, GraphQL</p>
</li>
</ul>
<ul>
<li>
<img src="./images/logo.jpg" alt="LG logo" width="200" height="200">
<div>
<p>LG 시스템 엔지니어</p>
<p>2018~2023</p>
</div>
</li>
</ul>
</section>
<!--skills-->
<section id="skills" class="section">
<div class="max-container">
<h2 class="title">skills</h2>
<p class="description">언어 및 도구</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet perferendis reprehenderit quae saepe aperiam cupiditate architecto! Numquam corrupti asperiores adipisci tempora explicabo eum laudantium sapiente quam consequatur vitae, hic reiciendis.</p>
<div>
<section>
<h3>언어</h3>
<ul>
<li>
<div><span>HTML</span><span>98%</span></div>
<div><div style="width: 98%;"></div>
</li>
<li>
<div><span>CSS </span><span>90%</span></div>
<div><div style="width: 98%;"></div>
</li>
<li>
<div><span>Javascript </span><span>89%</span></div>
<div><div style="width: 98%;"></div>
</li>
<li>
<div><span>React </span><span>88%</span></div>
<div><div style="width: 98%;"></div>
</li>
<li>
<div><span>Node.js </span><span>80%</span></div>
<div><div style="width: 98%;"></div>
</li>
</ul>
</section>
</div>
</section>
<section>
<div class="section max-container">
<h3>도구</h3>
<ul>
<li>Visual Studio Code</li>
<li>Pycharm</li>
<li>Jupyter notebook</li>
<li>Colab</li>
<li>Xcode</li>
</ul>
</section>
<!--and so on-->
<section>
<div class="section max-container">
<h3>기타</h3>
<ul>
<li>Git</li>
<li>SVN</li>
</ul>
</section>
</div>
</section>
</div>
<!--work-->
<section id="work" class="section">
<div class="section max-container">
<h2 class="title">포트폴리오</h2>
<p class="description">Project</p>
<ul>
<li><button>ALL <span>10</span></button></li>
<li><button>Front-end <span>3</span></button></li>
<li><button>Mobile <span>5</span></button></li>
<li><button>Back-end <span>2</span></button></li>
</ul>
<ul>
<li>
<a href="#" target="_blank">
<img src="./images/car.jpg" alt="project">
<div>
<h3>Project #1</h3>
<p>클론코딩 사이트</p>
</div>
</a>
</li>
</ul>
<ul>
<li>
<a href="#" target="_blank">
<img src="./images/car.jpg" alt="project">
<div>
<h3>Project #1</h3>
<p>클론코딩 사이트</p>
</div>
</a>
</li>
</ul>
<ul>
<li>
<a href="#" target="_blank">
<img src="./images/car.jpg" alt="project">
<div>
<h3>Project #1</h3>
<p>클론코딩 사이트</p>
</div>
</a>
</li>
</ul>
<ul>
<li>
<a href="#" target="_blank">
<img src="./images/car.jpg" alt="project">
<div>
<h3>Project #1</h3>
<p>클론코딩 사이트</p>
</div>
</a>
</li>
</ul>
<ul>
<li>
<a href="#" target="_blank">
<img src="./images/car.jpg" alt="project">
<div>
<h3>Project #1</h3>
<p>클론코딩 사이트</p>
</div>
</a>
</li>
</ul>
</div>
</section>
<!--licence-->
<section id="licence" class="section">
<div class="max-container">
<h2 class="title">자격증</h2>
<p class="description">국가 기술 자격증</p>
<img src="./images/licence.jpg" alt="정보처리기사" width="200" height="200">
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, laudantium accusantium. Eligendi ducimus porro beatae hic sint quia nihil. Doloremque eaque recusandae dignissimos ipsa iste unde corrupti laborum reiciendis nesciunt?</p>
</div>
<img src="./images/licence.jpg" alt="정보처리기사" width="200" height="200">
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, laudantium accusantium. Eligendi ducimus porro beatae hic sint quia nihil. Doloremque eaque recusandae dignissimos ipsa iste unde corrupti laborum reiciendis nesciunt?</p>
</div>
<img src="./images/licence.jpg" alt="정보처리기사" width="200" height="200">
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, laudantium accusantium. Eligendi ducimus porro beatae hic sint quia nihil. Doloremque eaque recusandae dignissimos ipsa iste unde corrupti laborum reiciendis nesciunt?</p>
</div>
</div>
</section>
<!--contact-->
<section id="contact"></section>
<!--Arrow up-->
<aside>
<a href="#home" title="위로">
<i class="fa-solid fa-arrow-up"></i>
</a>
</aside>
</main>
<!--footer-->
<footer id="contact" class="section">
<div class="max-container">
<h2 class="title">연락주세요!</h2>
<p class="description">bablove12@naver.com</p>
<ul>
<li><a href="https://github.com/bablove127" target="_blank" title="깃허브"><i class="fa-brands fa-github"></i></a></li>
<li><a href="https://github.com/bablove127" target="_blank" title="깃허브"><i class="fa-brands fa-github"></i></a></li>
</ul>
<p>ⓒChaeyeon - All right reserved</p>
</div>
</footer>
</body>
</html>
#style.css 파일 1일차
@font-face {
font-family: 'GangwonEduPowerExtraBoldA';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Global */
:root {
/* Main colors */
--color-primary: var(--color-black);
--color-primary-variant: var(--color-gray);
--color-accent: var(--color-orange);
--color-accent-variant: var(--color-blue);
--color-text: var(--color-white);
/* colors */
--color-white: #fff;
--color-black: #050A13;
--color-blue: #03E8F9;
--color-orange: #FD6413;
--color-gray: #1B1E26;
/*size */
--size-max-width: 1200px;
}
* {
box-sizing: border-box;
}
body {
font-family: 'NanumSquareRound', sans-serif;
margin: 0;
}
h1,h2,h3,p,ul { margin: 0; }
ul {list-style: none; padding: 0; }
a { text-decoration: none; color: var(--color-text); }
button {
background-color: transparent;
outline: 0;
border: 0;
}
button:focus { outline: 1px solid var(--color-accent); }
.section { padding: 4rem; text-align: center;}
.max-container {
max-width: var(--size-max-width);
margin: auto;
}
.title {
font-size: 2.5rem;
margin: 1rem 0;
}
.description {
font-size: 1.5rem;
margin: 0.5rem 0;
}
/* Header */
.header {
background-color: var(--color-primary);
position: fixed;
top: 0;
width: 100%;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
}
.header__logo {
display: flex;
align-items: center;
gap: 8px;
}
.header__logo__img {
width: 36px;
height: 36px;
}
.header__logo__title {
font-size: 1.8rem;
}
.header__menu {
display: flex;
gap: 4px;
}
.header__menu__item {
padding: 8px 16px;
}
.header__menu__item:hover {
border-bottom: 1px solid var(--color-accent);
}
.header__menu__item.active {
border: 1px solid var(--color-accent);
border-radius: 4px;
}
1. 우선 git과 연동하기전에 폴더를 생성해준다
2. 작업할 파일들을 생성해준다
3.github사이트에 들어가서
4. repository를 생성해준다
5. 생성 후 publish to GitHub를 클릭해준다
6. 파일들을 만들어준뒤
7.클릭 후 commit을 눌러 git과 연동해준다. 터미널을 열어서 명령어줘도 된다.
메시지를 입력하지않으면 안넘어가므로 주의!
넘어가면 change를 눌러 싱크를 맞춘다.
8.그러면 이렇게 파일이 올라간다
9.올라간 파일들 확인 후
settings->pages의 branch에서 1. main 2. /root 로 설정 후 save 누르면 배포가 가능해진다
파일이 서버로 올라가게 되면 자동으로 링크 생성이 되다.
링크 클릭하면 내가 작업한 사이트를 구경 할 수 있다.
이상 끝^-^
# git 명령어 필요시 참고!!
