💭 오늘의 생각

1. 금요일 저녁부터 토요일까지 먹고 자고 쉬기만 했더니 컨디션이 완전 괜찮아졌다!! 그리하여 주간에 진행된 과제들을 다시 작성해보기로 했다. 일단 벤딩머신보다 모달창 이해가 부족한 것 같아서 로그인 모달창을 다시 만들었다. 강사님은 자신만의 스타일대로 쓰는게 좋다고 하셨지만 일단은 강사님의 깔끔한 코드를 베끼면서(?) 공부하는 것도 도움이 될 것 같아서 최대한 강사님과 비슷하게 작성하기 위해 코드를 꼼꼼히 봤다.
   분명히 코드 볼 때는 다 이해해서 아 ㅇㅋㅇㅋ했는데 막상 처음부터 다시 하려니까 구조 어떻게 잡으셨지..? 이러고 있다ㅋㅋㅋㅋ 하... 심지어 거의 만들고 훑어보는데 내가 절대 잊지 않고 작성해야지 했던 부분을 또❕❕ 놓쳤다. 로그인 닫기 버튼을 웹 접근성을 위해 로긴에 대한 정보를 다 듣고나서 위치시키고 스타일링으로만 위 쪽에 배치해야지<<코드 리뷰하면서 이거 놓치지 말자고 계속 생각했는데 막상 코드는 또 눈에 보이는 순서대로 작성한거다🤦🏽‍♀️ (이 정도면 진짜 바보.. 아니 바보한테 미안함)
   
   

2. input으로 만든 로그인 유지 체크박스는 스타일링이 어려우니까 label로 꾸며주는 부분을 잊지않고 만들었다. input은 txt-hide 클래스로 숨겨주고 label의 before에 background-image를 이용해서 체크박스 이미지를 넣어줬다.
   또 웹 접근성을 위해, 탭 했을 때 focus될 수 있게 label의 before에서 아웃라인을 만들어줬다. 이 부분은 inp-login-hold가 focus됐을 때 다음 형제요소인 labl-hold-login의 before에 아웃라인이 생기는거니까 다음과 같이 작성해줬다. 호우 선택자가 약간 헷갈렸지만 구현이 잘 돼서 굉장히 뿌듯했던 부분.

.inp-login-hold:focus+.labl-hold-login::before {
	content: '';
    	display: inline-block;
        outline: 2px solid black;
        border-radius: 50%;
}

3.
처음 만들었을 때, 빨간 박스의 '또는'을 p로 작성하고 가상 요소 선택자로 저 막대기를 만들었다. 그런데 굳이 p로 만들지 않고 다음 부분인 link-sns-login 박스의 가상요소로 전부 해결할 수 있었다. 컨텐츠의 크기를 글자의 마진을 포함해서 만들고 z-index로 가장 앞으로 나오게 만든 부분.

.cont-sns-login::before{
    content:'또는';
    display: block;
    width:52px;
    height:18px;
    position: absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    text-align: center;
    background-color: #fff;
    z-index: 10;
    color:#767676;
}

.cont-sns-login::after{
    content:'';
    display:block;
    width:calc(100% - 48px);
    position:absolute;
    top:9px;
    height:1px;
    background:#C4C4C4;
}

4. 최대한 강사님 코드의 포인트를 되짚으며 작성해봤는데, 복습도 하고 놓친 부분도 다시 알게되면서 도움이 많이 됐다. 앞으로 주말에는 과제를 이런식으로 복습해야겠다.