[CSS] reset.css, variables.css, not, form의 action/ methods

//노마드 코더의 코코아톡 클론코딩 듣는 중//

 

//reset.css

기본 css 디폴트 값을 없애기 위해서 사용

따로 파일을 만들고., @import해서 사용할 것.

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap");
/* 기존 셋팅 값 전부 없애는 법 */
@import "reset.css";
@import "status-bar.css";
@import "variables.css";

 

//variables.css

사용하는  변인 따로 빼주기

거의 색..?

:root {
  --yellow: #fae100;
}

 

//not

/* not 뒤에 제외하고 적용 */
#login-form input:not([type="submit"]) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  transition: border-color 0.3s ease-in-out;
}

 

 

//form의 action, methods

<!-- action은 data를 어디로 보낼지 -->
    <!-- methods 두 방법 1) post; 백엔드에 정보 보냄. 서버
    2) get url에 포함되어도 상관없는 정보들을 get으로 보냄 서버 없을 때. 아이디/비번 ㄴㄴ
  get무조건 써놓을 것. 프로젝트 업로드 한 곳에서는 post 안됨-->
    <form action="friends.html" method="get" id="login-form">
      <input name="username" type="text" placeholder="Email or phone number" />
      <input name="password" type="password" placeholder="Password"/ >

- 따로 보낼 페이지 만들어 줄것. 

 

 

단축키 !!

 <!-- 단축키; 넣고 싶은 데로 만들 수 있음 nav>ul>li*4>a
    바로 링크에 쓰고 탭 누르면서 필요한 것들 쓸수 있음 -->