html + css로 깨깨오톡 로그인 페이지 만들어보기

1. html part

- 첫 페이지 명은 Index.html 로 작성

   모든 웹서버가 Index.html 페이지를 먼저 찾게 되니 index.html 명으로 작성 필요

- icon 쓴 웹:

    1) heroicon(svg -> copy html address)

     2) fontawesome

      * font를 외부에서 가져올 때에, 해당 페이지의 script를 가져오고 <script>는 마지막 </body> 와 </html> 사이에 작성해두기

- link:css 치면 바로 위로 자동완성됨

- head와 header는 다른 것 

   1) head: created before body comes

   2) header: inside the body tag

 

2. CSS part

- [reset.css] 웹브라우저에서 default 설정을 없애기 위해서 reset.css 파일을 새로 만들어야 됨 

    1) search for reset.css file in google and c&p

- [styles.css] 메인 css 페이지 where all the imports are combined as below:

    1) @import "폴더이름/파일이름"

@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:ital,wght@0,100;0,200;1,100;1,200&family=Open+Sans:wght@400;600&display=swap');

@import "reset.css";

@import "variables.css";

/* components */

@import "components/status-bar.css";

/* Screens */

@import "screens/login.css";

body{

font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

- [variables.css] 색깔을 새로 지정하고 싶을 때에는 새로운 페이지 variables.css 파일을 작성해서 색깔 variable 을 지정해준다. 

:root{

--yellow: #FAE100;

}

- [status.css] status bar is inside the components folder because it will be used for many pages 

-[login.css]

 

오늘은 대망의 배운 거 써먹는 날! 

드디어 깃헙에도 커밋을 해봤다. ㅎㅎ 

일단 만든 페이지는 이렇다. 하찮긴 하다.

 

깨똑 로그인 페이지

로그인 하고 submit누르면 들어가는 페이지

 

내일은 생각하면서 혼자 만들어봐야겠음

- via nomad coders