스파르타/웹개발

22.01.18 HTML, CSS (로그인 페이지 만들기)

h.단디 2022. 1. 19. 23:48

 

 

 

코딩은 외워서 하는게 아니라 이것 저것 바꿔가면서 하는 것, 당장 모든 걸 알지 못한다고 해서 좌절하지 말기!

가져다가 쓰는거임

 

 

frontend

 

html -> 뼈대가 됨. 문서 형태.

CSS -> 꾸미기.

JAVA Script -> 움직임을 줌.

 

 

 

 

 

HTML 

-  <>열고 </>닫고 

-  <head>  CSS, JAVAscript는 다 여기 포함됨! 

 

- 자주 쓸 것 같은 거

    <div> 단위로 묶음! 한번에 이동하거나 할 때 씀

    <h1> 하나는 꼭 포함해야 구글 검색 잘 된담. 

    <p> 로 줄바꾸기

 

💡 줄 맞추는 단축키 : ctrl+A -> command+alt+L 

💡 코딩하다가 이상하게 자동완성되는 건 그때그때 지워줘야함.

 

 

 

CSS

 

class="OOOO" : 꾸밀 대상에 명찰달기 

.OOOO {       } : 지칭해서 꾸미기         -> <head>       <style></style>에 해야함 !!

 

background-color 로 배경색 설정하고 작업하면 보기 편함

 

이미지는 아래 3개가 거의 항상 같이 쓰임

background-image: url("http://~");
background-size: cover;                (이미지를 사이즈에 맞춤)
background-position: center;

 

margin -> 바깥 여백

padding -> 안쪽 여백

윗쪽부터 시계 방향으로  상, 우, 하, 좌 px 한방에 조절가능     ex)  padding: 20px 30px 40px 100px;

가운데 정렬 -> div에 class 붙여서, margin : auto; 하면 좌우 여백 똑같이 해서 가운데로 위치함. 

display: block;   -> 글 속성이라서 안 먹히는 class에 추가하면 강제로 먹힘!

이미 있는 class에 중첩하면 스타일 중복으로 먹힘.             ex) class="mm"-> class="mm red-font"

 

💡 {},. 은 어디에 쓰고 이런거 원리를 외우려고 하지 말고, 그냥 상황상황에서 배워서 익숙해지자

 

 

 

Font 꾸미기

 

구글 폰트에서 복사해 온 링크를 <head>에 있는 <title> 아래에 붙임.

* {font-family:~~~~~}              *= 모든 폰트에 다 붙인다는 뜻

주석 : ctrl+/     컴퓨터는 못 읽게, 작업자는 읽게

 

 

 

 

 

 

로그인 페이지 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Nanum Myeongjo', serif;
        }
        .mytitle {
            background-color: green;

            width: 300px;
            height: 200px;

            color: white;
            text-align: center;

            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;

            padding-top: 20px;
        }
        .wrap {
            width: 300px;
            margin: auto;
        }
        .mybtn {
            width: 100px;
            margin: auto;
            display: block;

        }
    </style>
</head>
<body>
    <div class="wrap">
           <div class="mytitle">
              <h1>로그인 페이지</h1>
              <h5>아이디, 패스워드를 입력해주세요</h5>
        </div>

            <p>ID: <input type="text"/></p>
            <p>PW: <input type="text"/></p>
            <button class="mybtn">로그인하기</button>
    </div>

</body>
</html>