HTML과 CSS
브라우저:서버한테 요청하고, 결과물을 받아서 그려준다.
HTML: 뼈대 ex)사전은 뉴스 옆에 있어
CSS: 예쁘게 꾸미는거 ex) 걔는 근데 굵은 글씨야
JavaScript: 움직이는거 ex)이걸 클릭하면 움직여
html은 head와 body로 구성되어 있다. 이를 하나의 문서라고 생각하면 이해가 쉬웠다. 대충 Head는 본문에 들어가지 않는 나머지 것들, 예를 들면 폰트 속성이나, 컬러 등등..
body는 본문에 들어가는 모든 것이라고 이해했는데, 정확한지는 모르겠다! 😅
간단한 로그인 페이지 만들어 보기
html 기초에 익숙해지자! html은 부모-자식 관계가 중요하다!
결과물은 비슷했으나, 내가 처음에 쓴 코드를 살펴보면,
문단을 나누려고
<div></div> 를 쓴 것을 볼 수 있는데! (이때까지 <div>의 역할이 긴가민가 했던 것 같다)모범 답안을 보니 이럴수가!
<p> </p> 를 사용해서 중간에 요소를 추가하고 닫아주면 문단이 깔끔하게 완성되는 것이었다!
물론 코드도 아주 예쁜 것을 볼 수 있다. 결국 >div 태그는 "누구 안에 누구를 감싸고 있는지" 를 구분해주는 친구이다. 나는 이 태그를 "박스 열고-닫기" 를 해주는 친구라고 머리에 입력했다.
바구니 안에 있는 내용물은 박스가 움직이면 함께 움직이기 마련이니까!
그렇다면 CSS는 어떻게 사용할까?
CSS는
<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성한다. body의 하단부분이 아닌 head 쪽의 상단부분에서 작성한다고 생각하면 되겠다.
그리고 여기서 class 라는 친구가 등장하는데, 이 친구는 "명찰"로 기억하기로 했다. class는 또 중첩이 가능하다! 나는 이것을 명찰을 부여하고, 그 명찰을 가진 모든 친구들에게 규칙을 일괄 적용하는 것이라고 생각했다.
<div class= "mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>그리고 그 명찰 class 를 가진 친구들을 모두 부를 때는,
.mytitle { ... } 라고 써줘야 한다. 여기서 .class 는 우리가 인스타그램이나 트위터 등등에서 사람들을 언급할 때 @00 을 사용하는 것과 비슷하다고 생각하면 편하다.
CSS를 사용하여 로그인 페이지를 발전시켜보기
로그인 페이지 상단에 이미지가 들어간 박스를 만들고, 적당한 간격을 주자!
body에서 h1 로그인 페이지, h5 아이디 패스워드를 입력해주세요 라인을 div 태그로 묶고, class = mytitle 을 부여했다.
그런 다음에 head에서 style 공간을 만들고, .mytitle을 호출한 뒤에
박스 구역을 알아보기 위해서 background-color 를 초록으로 지정했고
가로 width 세로 height 값도 부여했다.
그리고 웹 폰트를 일괄 적용시키기 위해서 구글폰트에서 복사해온 웹 폰트 html 코드를 복붙하고, .* 별(아스테리크?)을 추가하여 css 코드 또한 복붙해줬다. 별은 일괄적용을 해주는 친구이다.
마지막으로 폰트 color를 white 으로, text-align을 center로 해서 가운데 정렬시켜줬다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Black Han Sans', sans-serif;
}
.mytitle {
background-color: green;
width: 300px;
height: 200px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<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>자, 이제 로그인 박스에 사진을 추가하고, 적당한 간격을 줄 것이다. 그리고 박스 테두리를 둥굴게 만들 것이다!
margin 과 padding이 여기에서 나온다!
margin은 바깥 여백, padding은 안쪽 여백으로 생각하면 된다. 다시말하면, 로그인 박스 안의 여백은 padding 값으로 조절하고, 전체 페이지 안에서의 로그인 박스 여백을 margin으로 주면 되는 것이다.
먼저 로그인 박스 뒷편에 배경 이미지를 넣어주기 위해 background-image, background-size, background-position css코드를 적었다.
다음으로 border-radius 값을 조절하여 박스 테두리를 둥굴렸다.
그리고 로그인 페이지, 아이디 패스워드를 입력해주세요 텍스트를 위에서 부터 조금 간격을 주기 위하여 padding-top 20픽셀을 주었다.
<style>
* {
font-family: 'Black Han Sans', sans-serif;
}
.mytitle {
background-color: green;
width: 300px;
height: 200px;
color: white;
text-align: center;
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: 20px;
}
</style>마지막으로 로그인하기 버튼을 중앙정렬하고, 폰트컬러를 변경해보자!
이제 wrap 이라는 class를 새롭게 만들어서, mytitle 영역을 함께 묶고,
width 300px, margin은 auto 로 부여해서 가로가 300px이고 페이지 크기에 맞춰 자동 마진 (가운데로 정렬되는 듯)이 정해지는 박스로 만들었다.
마지막으로 button태그에 mybtn이라는 class를 부여하고 width:100px margin:auto, display:block 값을 지정했다. 이때 display:block 이 하는 역할은 인라인 버튼을 블록으로 만들어서(정확하지 않음) 로그인 화면을 가운데로 가져오기 위함이다. 그리고 redfont라는 class를 중첩해서 추가하고 16px 크기의 red 폰트로 적용시켰다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Black Han Sans', sans-serif;
}
.mytitle {
background-color: green;
width: 300px;
height: 200px;
color: white;
text-align: center;
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: 20px;
}
.wrap {
width: 300px;
margin: auto;
}
.mybtn {
width: 100px;
margin: auto;
display: block;
}
.red-font {
color: red;
font-size: 16px;
}
</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 class="mybtn red-font"> 로그인하기</button>
</div>
</body>
</html>