클라이언트가 서버에 네이버에 대한 정보를 요청하면, 서버는 클라이언트에게 HTML, CSS, Javascrpit을 전달한다.
ex) 크롬, 인터넷 익스플로러, 웨일
코딩에는 수많은 태그와 문법이 존재한다. (다 외우질 못 함)
필요한 게 있으면 복사해서 가져다 쓰고 내 입맛에 맞게 고친다 (코딩의 본질)
VS CODE에서 HTML을 입력하고 자동완성되는 HTML:5를 선택한다.
<!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>
</head>
<body>
</body>
</html>
CSS를 사용하기 위해선 명찰이 필요하다.
예를 들어, 누군가를 부르기 위해 이름을 불러야 한다.
h1 태그에 명찰을 달고 (HTML)
그 명찰에 스타일을 명령한다. (CSS)
<!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>
.mytitle {
background-color: green;
width: 300px;
border-radius: 10px;
color: white;
text-align: center;
padding: 30px 0px 0px 0px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
}
.wrap {
background-color: green;
width: 300px;
margin: 20px auto 0px auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button>로그인하기</button>
</div>
</body>
</html>
구역 div은 보이지 않기 때문에 을 제일 처음 꾸밀 때는 background-color를 사용하면 편한다.
기본적으로 div은 한줄을 다 먹는다.
<style>
.mytitle {
background-color: green;
color: white;
width: 300px;
}
</style>
외부 margin, 시계 방향으로 위부터 시작 (위 - 오른쪽 - 밑 - 왼쪽)
내부 padding, 시계 방향으로 위부터 시작 (위 - 오른쪽 - 밑 - 왼쪽)
<style>
.mytitle {
background-color: green;
color: white;
width: 300px;
padding: 30px 0px 0px 0px; /* 위 - 오른쪽 - 밑 - 왼쪽 */
padding: 30px /* 4방향 모두 30px의 패딩값 */
}
</style>
<style>
display: flex;
flex-direction: column; /* column 세로 정렬, row 가로 정렬*/
align-items: center;
justify-content: center;
</style>
<style>
background-image: url('https://movie- phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
background-position: center;
background-size: cover; /*사진이 딱 맞게 나온다.*/
</style>
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
</style>
개발자에겐 보이는 컴퓨터에겐 안보이는 것
주석 단축키 : ctrl + /
/* 주석 처리할 내용 */
style.css를 내 컴퓨터에 있는 것으로 가져올 수 있지만 (파일 분리), 인터넷에 있는 코드를 가져올 수 있다 (라이브러리).
누군가가 써놓은 코드 조각을 활용해서 개발한다.
login.html 파일
<!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.css 파일을 불러오기 -->
<link rel="stylesheet" type="text/css" href="frontend/style.css">
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button>로그인하기</button>
</div>
</body>
</html>
style.css 파일
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
.mytitle {
background-color: green;
width: 300px;
border-radius: 10px;
color: white;
text-align: center;
padding: 30px 0px 0px 0px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
}
.wrap {
background-color: green;
width: 300px;
margin: 20px auto 0px auto;
}
</style>
예쁜 css 모음집
글을 쓰는 것도 이쁘게 글을 쓰는 것은 다르다.
css을 쓸 줄 알아도 이쁘게 만드는 것은 어려운 일이다.
이쁘게 만들기 쉽지 않은 개발자들을 위해 누군가 만들어 놓은 css를 가져다 쓰는 것이다.
[부스트트랩 시작 템플릿]
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>
[부스트트랩 컴포넌트 5.0]
https://getbootstrap.com/docs/5.0/getting-started/introduction/
index.html인 파일 하나만 있어야 한다.
1주차에는 정적 웹 페이지(단순 화면)을 개발해보았다.
이번 주차를 통해 모바일 청첩장 정도는 스스로 개발할 수 있어 만족한다