회식하고 기분 좋으면 2차, 3차도 가잖아!
이해가 안되면 10%를 이해한 그 기쁨에 2차, 3차 반복하면서 연습하자!
따라하고 반복하며 깨닫자!

첫번째 CSS

body{
    display: flex;  /* 전체화면에서 자유롭게 움직이게 해줄게 */
    justify-content: center; /* 그 줄에서 가운데로 가*/
    height: 100vh; /* 전체 화면의 100을 다 써!*/
    align-items: center; /* 반대축으로 움직여서 가운데로 가! */
}

.main{
    display: flex;  /* main 박스야 너 내부가 자유롭게 움직이게 해줄게*/
    flex-direction: column;  /* 세로로 정렬해줄게*/
    align-items: center;
    border-style: solid;
    border-width: 2px;
    border-color: lightgray;
    border-radius: 4px;
    width: 400px;
    height: 500px;
}

.logo{
    padding: 40px;
    font-size: 60px;
    font-family: 'Lobster', cursive;
    font-family: 'Lobster Two', cursive;
    font-weight: 10px;
}

.user{
    padding: 20px;
}

input{
  width: 300px;
  height: 30px;
  background-color: #FAFAFA;
  border-width: 2px;
  border-style: solid;
  border-radius: 2px;
  border-color: #e2e2e2;
}

#num{   /* 너만 간격을 줄게 그러새 아이디로 너 하나만 줄게*/
    margin-bottom: 10px; 
}

.btn{
    width: 310px;
    height: 30px;
    background-color: #C0DFFD;
    color: white;
    border-width: 2px;
    border-style: none;
    border-radius: 2px;
    border-color: rgb(212, 208, 208); /* 스포이드로 색깔 따왔어*/
}

a{
    margin: 0px;
    margin-top: 150px;
    list-style: none; /* 이거 적용 안된거 같은데*/
    font-size: 15px;
}

• Html을 먼저 수정하면서 느낀것인데 Html의 뼈대가 예로 들어 [사람의 머리에는 머리카락, 눈, 코, 입 , 귀 로 구성되어있다.] 처럼 묶을 것은 확실히 묶어서 다뤄주는 것이 CSS를 작성할 때도 도움이 되는 것을 느꼈다.
  '나는 하나씩 다 나눠서 하나씩 스타일 적용해야지~'라고 생각했는데 물론 이것또한 스타일 작성은 가능하지만 코드가 주르륵 길어지는 것을 경험할 수 있었다. (내 키는 우유를 먹어도 158에서 멈추더니 CSS는 한 없이 길어질 수 있다니!!!)
• 위에 주석을 보면 나도 왜 이게 적용이 안되는지 알 수 없는 부분들이 있었다. 생각해야한다!

두번째 CSS

html, body, .container{
    height: 100%;
}
/* 왜 백퍼센트? 수평, 수직적으로 가운데 위치 시키고 싶어/ 키우든 줄이든 가운데 두고 싶어서 */
/* 부모 요소에 100퍼센트를 주어야지만 가운데에 위치 시킬 수 있어. */
/* 자식요소 부모요소에 높이가 같아지기때문에  */
.container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.loginbox{
    padding:20px;
    width: 400px;
    height: 500px; 
    border: 2px solid grey;
    text-align: center; 
}

.container .loginbox h1 {
    font-family: 'Lobster Two', cursive;
    font-size: 60px;
}

.loginForm {     /* 로그인폼의 전체적인 것을 조정하는 부분 */
    display: flex;
    flex-direction: column;
    margin-top: 80px;
    margin-bottom: 60px;
    font-size: 20px;
}

.loginForm input{ /*input에 관한 것을 조정한다*/
    width: 300px;
    margin-bottom: 10px;
    margin-left: 50px;
    border: 1px solid gray;
    border-radius: 5px;
    background-color: #fafafa;
    outline: none;  /*클릭 할 때 바뀌는 테두리 색상 - border하고는 또 다르다*/
    padding: 15px 0 15px 0;
}

.loginForm button{
    width: 300px;
    margin-left: 50px;
    padding: 20px 0 20px 0;
    background-color: skyblue;
    color: white;
    border: none;
    border-radius: 5px;
    outline: none;
    opacity: 0.5;
    cursor: default;
}

.loginbox a{
    color: darkblue;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

• height: 100% ... 첫번째 CSS에서 가운데에 넣겠다고 박스에 물건채우듯 이것저것 넣었었는데 이런 방법이 있었다. 멘토님께서 하나씩 만들어가면서 설명해주시는게 정말 재미있다ㅎㅎ 내가 물흐르듯 작성하고 싶은 마음을 멘토님이 설명해주시면서 샤라라 꾸며지는 것이 정말 멋지다! 나도 곧!!

• form의 input과 button의 크기 조절이 왜 한번에 들어가지 않는걸까?

• outline - 모든 외곽선 속성을 한꺼번에 지정한다.

  outline-color 외곽선의 색을 설정. 기본값 currentcolor
  outline-style 외곽선의 스타일을 설정. 기본값 none
  outline-width 외곽선의 두게를 설정. 기본값 medium

• 테두리와의 차이점

  외곽선은 요소 콘텐츠의 밖에 그려지며 절대 공간을 차지하지 않는다.

• 확실한 이름들이 CSS에서도 확실히 시간을 단축시켜주었다! 그러다 아직은 눈에 익숙하지 않기때문에 주석을 달면서 작성할 필요가 있다.