과제 리뷰_11/5

🚩금요일은 한재현 선생님의 수업 레이아웃 위주의 수업이 진행됐다.
레이아웃을 위해 그 중심이 되는 박스모델과 정렬이 매우매우매우 중요한거 같다!
과제(?)는 아니었지만, 수업중에 네이버 회원가입란을 만들었다.
엄청 간단해 보이던 레이아웃인데, 하나를 고치면 하나가 달라지고....
그게 11월 5일 리뷰를 11월 6일에 올리는 이유이기도 하다.

링크텍스트

---

우선 어려웠던 부분들을 살펴보면,

1. 그림이 안들어 간다.

아이디 비밀번호 찾기 앞에 자물쇠 모양의 그림이 있다.
처음에 가상요소 선택자로 ::before을 써서 올리고 싶었다.

.find_id::before {}
	

그런데, 그림이 안보인다??
분명 코드안에도 있고, 화면으로 클릭도 되는데 사진이 안보였다.
이유는? 사진이 너무 커서 하얀 바탕 부분만 나온것이다.

💡background-size:contain
background-size:contain 컨텐츠의 가로세로 비를 유지하면서 콘텐츠가 박스 내부에 들어가도록 크기를 조율해 준다!

---

2. button과 a 뭘 넣어야 되나??

로그인 할때 해당 버튼을 누르면 아이디와 비밀번호를 입력할 수 있는 란으로 넘어간다.
당연히 버튼이니 버튼을 쓸까?

💡button과 a태그의 차이점
강사님께서 button과 a의 차이점을 알려주셨다.
button은 기능적으로 뭔가 제출하거나, 리셋하는 등의 기능을 작동해야 할때 쓴다.
a는 다른 페이지로 이동해야 할때 쓴다.

화면을 보면, 저 버튼을 클릭하면 화면이 이동한다.
그래서 a 태그를 사용했다.

<a href="" class="link-login"><img src="../images/title.png" alt="네이버" class="naver">로그인</a>
        <section class="find">
            <img src="../images/lock.png" alt="" class= "lock">
            <a href="#" class="find_id">아이디</a>
            <a href="#">비밀번호찾기</a>
        </section>
        <section class="login">
            <img src="../images/user.png" alt="사용자" class="user">
            <a href="#">회원가입</a>
        </section>

    </article>
</body>
</html>

---

3.정렬문제

아니...
가장 머리가 아팠던 문제였다.
html로 구조를 짜고, css로 스타일을 만드는데, 하나를 추가하면 하나가 가까이 붙어 있고,
margin이나 padding으로 조절하려고 하면 전체적인 크기가 달라지거나, 무너지거나..
계속 꾸준히 당황스러운 상황이었다...

💡vertical-aligh
이번에 새로 알게된 수직 정렬을 할 수있는 기능이다.
vertical-aligh:top으로 두고, margin-top으로 조율하면 위에서 부터 요소가 떨어지는 거리를
조율할 수 있다.

 .naver {
            width: 60px;
            height: 12px;
            vertical-align: top;
            margin-top: 3px;
            margin-right: 5px;
          }

*******

이번에 공부하면서 다른 분들 코드를 많이 볼 수있어서 좋았다.
그러면서 아예 새로운 방향으로 전개할 수도 있어서 좀 신선하고, 재밌었다.
그러면서 스터디의 필요성을 느끼게 되고... 다음주부터는 시작할 수 있는 스터디를 구성했다.
다들 윈윈 할 수 있는 스터디가 되기를!!!