금일 오전에 일어나 기존에 배웠던 SQL 5강을 복습하고 ChatGPT로 웹 개발하기 수업을 시작했다.
어제 자기전에 ChatGPT로 웹 개발하기를 수강시작했는데
약 4일간 SQL문을 공부했다면, 여기선 VS CODE 프로그램을 사용한다.
금일 공부한 내역은 VSCODE로 데일리모토 프로젝트를 진행했고
<!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>Document</title>
<style>
body {
background-size: cover;
color: white;
}
.navbar {
display: flex;
justify-content: space-between;
margin-right: 30px;
align-items: center;
}
.weather {
display: flex;
align-items: center;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
font-weight: bold;
padding: 20px 0;
}
.greeting {
margin-bottom: 50px;
}
.motto {
margin-bottom: 100px;
}
.logo {
margin-left: 30px;
height: 32px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="weather">
<p>날씨 맑음, 20ºC</p>
</div>
</nav>
<div class="container">
<div class="greeting">
<h1>Hello, My name!</h1>
<h1>12:30</h1>
</div>
<div class="motto">
<h3>My life's motto</h3>
<h2>웃으면 행복해집니다.</h2>
</div>
</div>
<!-- footer -->
<div class="footer">
<p>- 작자 미상 -</p>
<p>멋진 명언입니다. 아이스크림을 먹으면 행복해져요.</p>
</div>
</body>
</html>
이와 같은 관련코드와,
위와 같은 출력물을 얻는시간이었다.
그 외에도 로그인 만들기 등 제작하며, 기초적인 이론을 습득할 수 있었다.
※ 웹 브라우저 원리
- 브라우저는 1) 요청을보내고
2) 받은 HTML을 그려준다.
※ 요청을 어디로 보내는가?
- 서버가 만들어놓은 API에 요청을 보냄
- 주소창에 주소를 입력하고 엔터를 입력하는것으로 요청함
※ 항상 HTML로 보내주는가?
- 데이터만 보내줄 때가 더 많음
※ HTML은 뼈대, CSS는 꾸미기의 개념이며, https://html-css-js.com/ 이 사이트에서 대강 어느느낌인지 제대로 확인되었다.
※ Head -> <Style> </Style>
- 색상, 사이즈, 여백을 변경할 수 있다.
- /* */로 다른 개발자들이 볼수있게 주석 생성 가능
- .mytxt 같은 명령어로 바디/클래스를 동일하게 적용가능
※ HTML로 레이아웃 만들기
- HTML 태그는, "누가 누구안에 있느냐"가 가장 중요
- 나를 감싸고 있는 내용이 바뀌면, 모두 영향을 받는다.
- 부모/자식 관계로 구분지으면 이해하기 쉬움
※ Flex ( 부모태그에 작성 )
- 가장 중요한 규칙
- HTML은 BOX형태이며 레고처럼 쌓이는 형태이다 (탑다운이라고 생각했으나 조금 미묘하게 다른거같다.)
- BLOCK 1줄 (가로던, 세로던 한 라인 자체를 레이아웃함)
- INLINE -> 글자 (왼쪽에서 오른쪽으로 한 글자씩 취급)
-세로는 Aline-items로 지정 가능하고, 가로는 Justify_Content로 지정 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
background-color: rgb(216, 216, 219);
margin: 10px;
padding: 7px;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.box {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<span>text</span>
<span>text</span>
<span>text</span>
</div>
</body>
</html>
display : Flex;
justify-content : center;
aline-items : cetner;
위 명령어는 기초적인 정 센터 구문으로 확인하면 될것이다.
