서버와 클라이언트
- 동작 개념 :
- 클라이언트가 서버 API(창구)에 요청
- 서버는 만들어진 파일을 보내준다.
- 클라이언트는 받아서 그려준다.
- 서버 → 클라이언트 : HTML(뼈대), CSS(꾸미기), 자바스크립트(동작), 데이터(json)
html 과 css
- html
페이지를 구성하는 '뼈대' 라고 보면 된다. head 와 body로 구성되어 있으며, head에는 페이지의 속성, body에는 페이지의 내용이 들어간다. 태그들마다 다양한 기능을 갖고 있지만, 외우려고 애쓰지 말고 필요한 것들은 구글링해서 가져다 쓰자.
- css
html의 내용을 꾸밀때 사용한다. head 안에 <style></style>로 들어가며 지칭할 이름이 필요하다.
html 과 css 사용해보기 : 간단한 로그인 페이지
왼쪽 결과를 보고 먼저 어떤 기능들이 들어갔을까 생각해보자.
먼저 정사각형의 배경이미지가 있고 모서리가 둥글다. 그 안에 크기가 다른 글씨가 흰색으로 가운데에 배치 되어있다. 밑에는 id와 pw가 텍스트로 있고 입력할 수 있는 칸이 있다. 마지막으로 로그인하기 버튼이 맨 마지막에 위치해 있다.
완성한 코드를 보며 어떻게 쓰였는지 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 상단 탭에 나오는 텍스트-->
<title>로그인페이지</title>
<!-- 구글 웹 폰트 링크-->
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Do+Hyeon&family=Stylish&display=swap" rel="stylesheet">
<!-- css가 들어가는 곳-->
<style>
* { /* '*{}' 는 전체에 적용할때 */
font-family: 'Do Hyeon', sans-serif; /*구글 웹 폰트에서 css 복붙*/
}
.mytitle { /* mytitle의 이름을 가진 묶음에만 적용 */
/*background-color: green; 작업시 묶음은 보이지 않기에 배경색을 주고 작업하면 범위가 보여서 작업하기 편하다. 작업 끝나면 지움*/
width: 300px; /* mytitle 묶음의 가로 세로 크기 */
height: 200px;
color: white;
text-align: center; /* 묶음 내에서 텍스트 가운데 정렬 */
/*div 안에 배경이미지 가운데 정렬, 대체로 3줄이 붙어다닌다.*/
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
border-radius: 10px; /* 테두리 라운드 */
padding-top: 40px; /* 묶음의 안쪽여백-상단 */
}
.wrap { /* wrap의 이름을 가진 묶음에만 적용 */
width: 300px;
margin: auto; /* 묶음 바깥쪽 여백 */
}
</style>
</head>
<body>
<!-- div로 묶고 wrap 이라고 지칭한다 -->
<div class="wrap">
<div class="mytitle">
<!-- h1 부터 h6 까지 글자크기를 줄 수 있으며, 6이 제일 작다. -->
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요.</h5>
</div>
<!-- <p>는 문단을 구분한다. 텍스트를 넣을 수 있는 박스는 이렇게 만든다-->
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<!-- 버튼 생성하기-->
<button> 로그인하기</button>
</div>
</body>
</html>여기에 설명하는 것 보다 코드를 보며 바로 알 수 있게 주석을 넣었다. div 태그는 추가 설명이 필요한 것 같아 스파르타강의자료에 이해하기 쉽게 나온 그림을 가져왔다.
부모-자식 구조라고 한다. 빨간색 div를 움직이면 안에 있는 초록색, 파란색 div도 같이 움직이게 된다.
누가 누구안에 있는지 파악하는 것이 중요하고 유용하게 쓰이는 태그 중 하나이다.
추가로 구글에 있는 웹폰트 주소이다. https://fonts.google.com/?subset=korean
이건 text로 넣을 수 있는 이모티콘들 모음 주소. https://kr.piliapp.com/facebook-symbols/
※ css 코드가 많아지면 body까지 보기 어려워지기 때문에 파일을 분리 할 수 있다. <style></style>부분.
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">부트스트랩 사용하기
부트스트랩은 만들어진 CSS 모음집 이라고 할 수 있겠다.
부트스트랩 컴포넌트5.0 주소. https://getbootstrap.com/docs/5.0/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
부트스트랩에 있는 버튼이나 박스 등 디자인들을 사용하기 위해서 넣어줘야하는 코드들이 있는데, 위 홈페이지에 들어가서 getting started 에 스크롤을 내리다보면 starter template에 넣어야할 코드가 있다. head에 이런식으로 넣으면 된다.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<title>Hello, world!</title>
</head>
▶ Javascript
- 페이지에서 동작하는 것들
- 브라우저가 알아들을 수 있는 언어
- <script></script>
- 변수, 자료형(list,dict), 함수, 조건문, 반복문
- console.log() : 콘솔에 찍어내기. 테스트시에 사용해가면서 작업하면 편함
▶ JQuery
- 자바스크립트 라이브러리
- 임포트 해야한다.
- 지칭 : id='name'
- $('#name') : name에 jquery를 적용한다
- let temp_html = `${...}` * `` 백틱
- $('#id').append(temp_html) : 문자열 상태를 html화 한다.
'AI 웹 개발 과정 > 웹 프로그래밍 기초' 카테고리의 다른 글
| 06. 원페이지 뼈대 제작부터 배포까지 (0) | 2022.04.25 |
|---|---|
| 05. AWS / git bash / filezilla / 도메인 (0) | 2022.04.25 |
| 04. Flask / POST / GET (0) | 2022.04.25 |
| 03. python / 크롤링 / 데이터베이스 / mongoDB (0) | 2022.04.24 |