6월 25일 - HTML/CSS 프로젝트 넷째날

프로젝트 넷째날, 어제의 회고로 깨달은 목표 구체적으로 짜기! 를 반영하여 작성한..

 

📃 오늘의 목표 📃

• label, input 태그, 속성값 학습
• 아이패드로 구조 그리기
• 회원가입 페이지 마크업하기
• css footer 구조 배치하기

📃 실제로 한 것 📃

✔ input 태그 학습

✔ 구분선 작성법

✔ form, fieldset, legend 태그 뜻과 기본 속성값 학습

✔ 구조 그려보기

✔ 회원가입 페이지 마크업

---

🎈관련 태그 학습

 

구조를 그려보기 전에 불필요한 수정을 최대한 막기 위해 관련 요소들을 학습하였다.

사용해본 적 없는 성별 선택, 생년월일 칸의 예시를 찾아보았다.

 

https://h2s0.tistory.com/9

<input> 태그

https://h2s0.tistory.com/10

구분선을 넣어주는 <hr> 태그

https://h2s0.tistory.com/11

정보를 입력하는 form 태그와 fieldset, legend 태그

 

학습한 내용들을 잊어버리지 않게 간단하게 포스팅해보았다.

수정 / 추가해야 할 내용들이 아직도 많다.

 

input id 값과 label for 의 값을 일치시켜 input 과 label 을 연결시켜준다.

 

학습, 메모한 내용들을 참고해 아이패드에 대략의 구조를 그려보았다.

 

 

 

 

성별 남자 여자 선택안함

 

 

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

 

성별선택 구역을 만드는데 시간이 굉장히 많이 걸렸다.

이제까지 왼쪽에 있는 글씨를 label 로 하고 입력값을 input 으로 해서 연결시켜주면 되었는데,

 

왼쪽의 성별 글씨도 label, 오른쪽의 선택칸도 label 을 줘야해서 input 과의 연결이 꼬였다.

덕분에 name, id 에 대해 더 학습한 후 이해할 수 있었다.

 

전체 선택박스들은 gender label 과 연결시켜주기 위해 name 값을 주고

각 선택박스들의 input 요소와 연결시켜주기 위해 id 값을 선택박스들의 label for 값과 일치시켜주었다.

 

 

이용약관동의^* 전체 동의합니다. 선택항목에 동의하지 않은 경우도 회원가입 및 일반적인 서비스를 이용할 수 있습니다. 이용약관 동의 (필수) 약관보기 개인정보 수집·이용 동의 (필수) 약관보기 무료배송, 할인쿠폰 등 혜택/정보 수신 동의 (선택) 약관보기 본인은 만 14세 이상입니다. (필수) 약관보기

<div class="agree">
    <label for="agree">이용약관동의<sup class="accent-primary">*</sup></label>

    <input type="checkbox" name="agree" id="agree-all">
    <label for="agree-all">전체 동의합니다.</label>
    <span>선택항목에 동의하지 않은 경우도 회원가입 및 일반적인 서비스를 이용할 수 있습니다.</span>

    <input type="checkbox" name="agree" value="1" required />
    <label for="agree">이용약관 동의 (필수)</label>
    <a href="#" class="accent-primary">
        약관보기
        <img src="./../imgs/Icon/Arrow-1.png" alt="" />
    </a>

    <input type="checkbox" name="agree" value="2" required />
    <label for="agree">개인정보 수집·이용 동의 (필수)</label>
    <a href="#" class="accent-primary">
        약관보기
        <img src="./../imgs/Icon/Arrow-1.png" alt="" />
    </a>

    <input type="checkbox" name="agree" value="3" />
    <label for="agree">무료배송, 할인쿠폰 등 혜택/정보 수신 동의 (선택)</label>
    <a href="#" class="accent-primary">
        약관보기
        <img src="./../imgs/Icon/Arrow-1.png" alt="" />
    </a>

    <input type="checkbox" name="agree" value="4" required />
    <label for="agree">본인은 만 14세 이상입니다. (필수)

    </label>
    <a href="#" class="accent-primary">
        약관보기
        <img src="./../imgs/Icon/Arrow-1.png" alt="" />
    </a>

</div>

 

위의 방법으로 동의 칸도 작성할 수 있었다.

왜...인지 모르게 한 줄에 작성이 되어버리지만.... css 로 바꿀 수 있을거라고 믿는다.....

---

요소들을 학습하느라 시간이 너무 오래 걸린 것 같다.

비록 css 를 작성할 때는 더 오랜 시간이 걸리겠지만 확실히 내가 잘 이해하지 못했던 태그들이 많이 쓰이는 페이지를 선택하니 학습에 많은 도움이 되어 아주 기쁘고 뿌듯한 마음으로 프로젝트를 진행하고 있다.

 

내일부터 월요일, 한 주의 시작도 화이팅!