21.12.20 코코아톡

1. reset

아무런 css설정을 안해도 브라우저에서 기본적으로 제공되는 margin같은것들이 있는데

이것이 브라우저마다 또 다 다르다고 한다. 그래서 완전히 리셋 하고 처음부터 css를 만드는게 더 좋은거라고 함

코코아톡 클론코딩을 하면서 적용했던 리셋은 Eric Meyer 라는 분이 만든 Reset css 이다.

https://cssdeck.com/blog/scripts/eric-meyer-reset-css/

Eric Meyer’s “Reset CSS” 2.0 | CSS Reset

맨 아래에는 내가 하는 프로젝트에서 사용하는 리셋을 추가할 수도 있다.

 

 

2. status bar

만들고자하는 맨 위의 status-bar

이 요소들이 어떤 덩어리로 나누어져 있는지 파악하고 div에 알맞게 배치해야한다.

그리고 css flex를 이용해서 적절한 위치에 배치해야 한다.

특히 justify-content: space-between를 하면 가운데 요소가 안맞는 경우가 있다.

div의 크기가 달라서 그런듯?

이럴 경우 어떻게 해결하는지 잘 알아둬야겠다.

 

 

3.form

이번에는 아이디와 비밀번호를 입력하고 로그인하는 form을 만드는 것

 

값을 입력하는 그런것이 필요하면 form을 사용하는게 좋다. form의 attribute에 action과 method가 있는데

action은 어떤 문서를 실행할지 입력하는것이고 method는 데이터 전달방식이다. 이것들을 사용할 수 있기때문에 

form을 사용하는게 좋다.

method에는 get과 post가 있는데 데이터베이스가 있으면 post를 이용해서 서버랑 통신을 하면 되는것이지만

나는 그냥 html과 css로 모양만 흉내내는 것이므로 get방식을 이용한다. get은 보안에 매우 취약

url에 아이디랑 비밀번호가 다나온다. 하지만 지금은 상관으므로 그냥 get을 사용한다.

 

이번엔 css에 id를 사용해서 작성했는데 class로 작성한것보다 어려웠다.

class를 잘 쓰는 방법을 배워두는게 나중에 복잡한 상황에서 더 편할 것 같다.