개발일지 HTML로 로그인 페이지 만들기, 폰트 바꾸기

개발일지 1주차

 

로그인 페이지 만들기!

내가 만든 로그인 페이지

로그인 페이지 HTML 코드

<h1>로그인 페이지</h1> ID: <input type="text"/> <p></p> PW: <input type="text"/> <p></p> <button> 로그인하기</button>

 

<이해하기>

<h1>: 제목 입력

input 태그 앞에 ID, PW 입력

로그인하기 버튼은 <button> 사용

<p> 파라그래프 태그를 넣어줘야 세로로 구현됨. (문단 변경)

input 태그

<h1 class="mytitle">로그인 페이지 </h1>

여기서 class="mytitle" 은 h1의(로그인 페이지) 명찰을 달아준 것이다. 그리고 이 명찰을 사용해서 지칭해줄 수 있다. 

 

예를 들어서

<style>
      .mytitle {
            color: red;
            font-size: 40px;
      }
</style>

 

이렇게 하면 mytitle을 색깔은 빨강, 폰트 크기는 40px로 해줘. 라는 말이 됨.

명찰을 불러올 땐 앞에   .   을 찍고 명찰 이름 쓰고   {   <-대괄호 입력해준다.

바뀐 화면

            color: red;
            font-size: 40px;

여기서 끝에 세미콜론은 꼭 입력해줘야 한다고 함. 

 

<이미지 넣는 코드>

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;

border-radius: 10px;

-> 모서리 부분 조절하는 코드

이미지를 가운데로 옮기고 싶을 때 background-color: green;

을 입력해서 옮길 수 있는 범위가 어느 정도 있는지 확인을 먼저 해야 한다. (색이 꽉 차있음=공간 없음.)

그다음 width: 300px; 를 입력해서 그 범위를 줄여준다. 

그 후 margin: auto; 를 입력하면 자동으로 좌우 빈 공간이 같도록 맞춰준다. 

다 되면 background-color: green; 이거를 지워준다.

 

여기서 .wrap은 div로 묶어서 wrap으로 명찰을 준 것을 불러온 것이다. (같이 변경되게끔)

.wrap은 <style> 스타일 코드 안에서 입력한다.

div로 묶어서 wrap으로 명찰을 줌

 

버튼을 가운데로 옮기고 싶다면 

아래 사진처럼 먼저 버튼을 불러올 수 있게끔 버튼의 이름을 지정해준다. (이름 지정: class="  ")

여기서는 mybtn이라고 지정해 주었다. 

그리고 또 <style> 태그 아래에 .mybtn {    이렇게 입력한다. 

하지만 글자는 박스와 달리 가로세로의 개념이 존재하지 않기 때문에 margin: auto; 이렇게 코드를 

입력해도 저절로 바뀌지 않는다. 그래서 display: block;    이라고 입력해줘야 중간으로 옮겨진다.

class 는 중첩해서 이름을 붙일 수 있다. 그래서 밑줄 친 것처럼 적어놓고

<style> 태그 아래에 .red-font {   이렇게 입력하고 불러오면 된다. 그리고 나서 color: red; 라고 입력하면 글자색이 빨간색으로 바뀐다. 근데 굳이 이렇게 안 해도 아까 .mybtn {  여기서 입력해도 똑같이 바뀐다.ㅎㅎ

 

* { } : 별 태그는 모든 태그에 다 적용한다는 뜻

 

<폰트 바꾸기>

구글 웹 폰트 사이트: https://fonts.google.com/?subset=korean 

Google Fonts

여기 링크에 들어가서 

위에 있는 코드를 복사해서 타이틀 코드 밑에 붙여 넣기 한다. 

그리고 <style> 코드 밑에 css 코드를 복사해서 

* {

   font-family: 'Noto Serif KR', serif;

}

이렇게 붙여 넣는다. 

그러면 폰트가 바뀐다!!

 

주석이란?

사람은 읽을 수 있지만 컴퓨터는 못 읽게 해서 적용을 못하게 하는 거. 예를 들면 메모를 하고 싶을 때!

그 코드를 드래그해서 단축키 ctrl+/ 를 누른다.

주석을 풀고 싶을 땐 다시 똑같이 하면 된다.

 

구현된 로그인 페이지

 

알아두면 유용한 TIP!

-코드 줄 정리 하고 싶을때 ctrl+a 해서 모두 선택 한 후 ctrl+alt+L 눌러주면 정리됨.

-글 속성은 display: block; 으로 하기.

 

ㅋㅋ너무 신기하고 재밌다. 이제 나도 조금 할 줄 안다!!

근데 복습 안 하면 잊어버릴 것 같다. 

이걸로 티스토리 글씨체 변경해봐야겠다. 히히