6월 26일 - HTML/CSS 프로젝트 다섯째

오늘은 월요일! 주말동안 각자 작성해온 코드들을 리뷰했다.

 

📃 오늘의 목표 📃

• 팀원들과 코드리뷰
• error 잡기
• footer css 작성하기
• register css 작성하기

📃 실제로 한 것 📃

✔ 코드리뷰 후 유효성검사

✔ 에러 수정

✔ footer css 작성

✔ 회원가입 페이지 ( register ) css 작성

 

---

유효성 검사를 하고 알게 된 것 : span 안에 p 태그 안돼요🙅‍♀️🙅‍♂️, a 안에 div 태그 안돼요🙅‍♀️🙅‍♂️

 

그리고 프로젝트 넷째날 기록에 적었던 성별선택 구역과 동의 구역에서 사용했던

label + input 목록 여러개를 하나의 또 다른 label 에 연결시키는 것은 불가능 🤦‍♀️🤦‍♂️하다는 것이었다.

 

성별

남자

여자

선택안함

<div class="labels">성별</div>
<div class="gender-wrapper">
    <div class="button-text">
        <input type="radio" name="gender" id="gender__male" value="male">
        <label for="gender__male">남자</label>
    </div>
    <div class="button-text">
        <input type="radio" name="gender" id="gender__female" value="female">
        <label for="gender__female">여자</label>
    </div>
    <div class="button-text">
        <input type="radio" name="gender" id="gender__none" value="none">
        <label for="gender__none">선택안함</label>
    </div>
</div>

왼쪽의 성별 글씨를 label 태그에서 div 태그로 바꾸었고, 스타일링을 위해 왼쪽에 있는 글자 태그 전부에게 labels 라는 class 값을 주었다.

 

이용약관동의^*

전체 동의합니다.

선택항목에 동의하지 않은 경우도 회원가입 및 일반적인 서비스를 이용할 수 있습니다.

이용약관 동의 (필수)

약관보기

개인정보 수집·이용 동의 (필수)

약관보기

무료배송, 할인쿠폰 등 혜택/정보 수신 동의 (선택)

약관보기

본인은 만 14세 이상입니다. (필수)

약관보기

<div class="labels">이용약관동의<sup class="accent-new">*</sup></div>

<div>
    <div class="agree-list1">
        <div class="agree-all__text button-text">
            <input type="checkbox" name="agree" id="agree-all" class="agree-button">
            <label for="agree-all">전체 동의합니다.</label>
        </div>
        <span class="agree-all__description">선택항목에 동의하지 않은 경우도 회원가입 및 일반적인 서비스를 이용할 수 있습니다.</span>
    </div>
    <div class="agree-list2">
        <div class="button-text">
            <input type="checkbox" name="agree" id="agree1" required class="agree-button" />
            <label for="agree1">이용약관 동의 (필수)</label>
        </div>
        <a href="#" class="accent-primary see">
            약관보기
            <img src="./../imgs/Icon/Arrow-1.png" alt="" />
        </a>
    </div>

    <div class="agree-list2">
        <div class="button-text">
            <input type="checkbox" name="agree" id="agree2" required class="agree-button" />
            <label for="agree2">개인정보 수집·이용 동의 (필수)</label>
        </div>
        <a href="#" class="accent-primary see">
            약관보기
            <img src="./../imgs/Icon/Arrow-1.png" alt="" />
        </a>
    </div>
    <div class="agree-list2">
        <div class="button-text">
            <input type="checkbox" name="agree" id="agree3" class="agree-button" />
            <label for="agree3" class="agree3-text">무료배송, 할인쿠폰 등 혜택/정보 수신 동의 (선택)</label>
        </div>
        <a href="#" class="accent-primary see">
            약관보기
            <img src="./../imgs/Icon/Arrow-1.png" alt="" />
        </a>
    </div>
    <div class="agree-list2">
        <div class="button-text">
            <input type="checkbox" name="agree" id="agree4" required class="agree-button" />
            <label for="agree4">본인은 만 14세 이상입니다. (필수)</label>
        </div>
        <a href="#" class="accent-primary see">
            약관보기
            <img src="./../imgs/Icon/Arrow-1.png" alt="" />
        </a>
    </div>
</div>

마찬가지로 이용약관동의 왼쪽텍스트를 div 로 감싸주고 labels 라는 클래스명을 주었다.

안의 동의목록에 이중으로 연결해주었던 태그들도 빼고, 스타일링을 위해 감싸주는 태그를 많이 추가하였다.

 

🎈button:checked

 

https://h2s0.tistory.com/14

:checked 를 이용하여 input type radio, checkbox 클릭 시 디자인 바꿔주기

 

🎈Git

 

git switch dev
git pull origin dev                - 이 과정에서는 충돌이 일어나면 안됨
git branch heeso_footer
git switch heeso_footer
git merge dev                      - 가지고 온 최신 브랜치를 병합해줌

➡ 새로운 작업을 할 준비 완료🚀

 

 

🎈 Figma for VS Code Extension

 

그동안은 피그마에 들어가 일일히 시안을 눌러보고 margin, padding 등등의 속성값들을 적어왔었다.

미처 다 적어오지 못했던 값들, 등등을 매번 들어가서 보기가 너무 힘들었는데 강사쌤이 알려주신 이 확장자가 있으니 굉 장 히 편했다.!!! vscode 랑 figma 랑 연결이 되어 창을 여닫지 않아도 시안과 어떤 속성값들을 줬는지 한 눈에 볼 수 있을 뿐만 아니라 조금만 작성하면 완성까지.. 대신 해주었다..!!! 배치에 자신이 없었는데 배치 속성값들까지 .. 다 적혀있어서 좋았다.

하지만 되도록 있는거 엔터쳐서 완성하는것이 아닌 참고, 힌트로만 사용하고 최대한 내가 배치해보려고 노력했다.

 

 

🎈 flex 의 편리함

 

 

이번 푸터와 회원가입 페이지의 스타일 속성을 작성하면서 flex 의 편리함을 더욱 잘 알게 되었다.

배치를 어떻게 할지 막막했는데 피그마 시안에서 도움을 받을 수 있었다.

flex 에 대한 이해가 부족하다고 생각해 추가 학습을 할 예정이었는데, 어떤 예시를 만들어보아야 할지 막막했다.

이번 프로젝트로.. 굉장히 많은 flex 학습을 할 수 있었다.

flex 에 대해 따로 포스팅 해 업로드하겠다.