개발일지 1주차
로그인 페이지 만들기!
로그인 페이지 HTML 코드
<h1>로그인 페이지</h1> ID: <input type="text"/> <p></p> PW: <input type="text"/> <p></p> <button> 로그인하기</button> |
<이해하기>
<h1>: 제목 입력
input 태그 앞에 ID, PW 입력
로그인하기 버튼은 <button> 사용
<p> 파라그래프 태그를 넣어줘야 세로로 구현됨. (문단 변경)
<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> 스타일 코드 안에서 입력한다.
버튼을 가운데로 옮기고 싶다면
아래 사진처럼 먼저 버튼을 불러올 수 있게끔 버튼의 이름을 지정해준다. (이름 지정: class=" ")
여기서는 mybtn이라고 지정해 주었다.
그리고 또 <style> 태그 아래에 .mybtn { 이렇게 입력한다.
하지만 글자는 박스와 달리 가로세로의 개념이 존재하지 않기 때문에 margin: auto; 이렇게 코드를
입력해도 저절로 바뀌지 않는다. 그래서 display: block; 이라고 입력해줘야 중간으로 옮겨진다.
class 는 중첩해서 이름을 붙일 수 있다. 그래서 밑줄 친 것처럼 적어놓고
<style> 태그 아래에 .red-font { 이렇게 입력하고 불러오면 된다. 그리고 나서 color: red; 라고 입력하면 글자색이 빨간색으로 바뀐다. 근데 굳이 이렇게 안 해도 아까 .mybtn { 여기서 입력해도 똑같이 바뀐다.ㅎㅎ
* { } : 별 태그는 모든 태그에 다 적용한다는 뜻
<폰트 바꾸기>
구글 웹 폰트 사이트: https://fonts.google.com/?subset=korean
여기 링크에 들어가서
위에 있는 코드를 복사해서 타이틀 코드 밑에 붙여 넣기 한다.
그리고 <style> 코드 밑에 css 코드를 복사해서
* {
font-family: 'Noto Serif KR', serif;
}
이렇게 붙여 넣는다.
그러면 폰트가 바뀐다!!
주석이란?
사람은 읽을 수 있지만 컴퓨터는 못 읽게 해서 적용을 못하게 하는 거. 예를 들면 메모를 하고 싶을 때!
그 코드를 드래그해서 단축키 ctrl+/ 를 누른다.
주석을 풀고 싶을 땐 다시 똑같이 하면 된다.
알아두면 유용한 TIP!
-코드 줄 정리 하고 싶을때 ctrl+a 해서 모두 선택 한 후 ctrl+alt+L 눌러주면 정리됨.
-글 속성은 display: block; 으로 하기.
ㅋㅋ너무 신기하고 재밌다. 이제 나도 조금 할 줄 안다!!
근데 복습 안 하면 잊어버릴 것 같다.
이걸로 티스토리 글씨체 변경해봐야겠다. 히히
'삶에 도움이 되는 지식 > 코딩' 카테고리의 다른 글
open api 예쁘게 보는 방법(JSONView) (0) | 2021.07.18 |
---|---|
티스토리 블로그 글씨체 변경하는 방법 (5) | 2021.06.29 |
코딩 개발 일지(HTML,CSS,태그) (0) | 2021.06.28 |