[뉴렉처 6기] HTML & CSS│Util과 Component│Form 유효성 검사│width: 100% vs inherit

 

💙 들어가며

---

퍼블리싱 하면서 기억해 둘만한 꿀팁들 정리!

 

 

 

✏️ 학습내용 정리

---

#util.css 나누기

💡 util과 component 구분하기

icon, button과 같은 css파일은 util이 아니라 component이다.
util은 style로 뺄 설정들을 따로 클래스로 만들어서 가지고 있는 css 파일이다.

(EX) postion, margin 등의 설정값

 

util.css를 하위 4개로 분류하면 더욱 편리하다.

 

1. content: text를 관리하는 style들 (폰트크기, 자간, 들여쓰기)

2. box: boxing을 관리하는 style들 (크기, 높이, 배경, border)

3. layout: layout을 관리하는 style들 (position, flex 등)

4. form: input에 대한 내용을 관리하는 style들 

 

 

util을 만들 때는 분류를 나눠서 협업할 수 있도록 하고,

배포할 때는 하나의 파일로 합쳐서 올린다.

(우리가 합치는 것이 아니고

bundle 파일로 만드는 도구가 따로 있음)

 

 

#color 변수 구분하기

base는 따로 가져가되,

main, primary, secondary, accent와 같은 구분은

필요에 의해서 추가하고 만들면 유용하다.

(우리는 base, main으로 나눠서 만들었음!)

 

 

#Form으로 입력받기

 

 

이미지를 첨부하는 것은 <input type="file">이다.

그리고 연관된 input 박스는 fieldset으로 묶어준다.

💡 각 태그의 의미를 파악하면서 구조를 짜보자

<section>
 <h1>메뉴등록 폼</h1>
 <form>

    <fieldset>
       <legend>메뉴정보</legend>
       <label>이미지</label>
       <input type="file">
       <label>카테고리</label>
       <select>
          <option>커피</option>
          <option>수제청</option>
          <option>쿠키</option>
       </select>
       <label>한글이름</label>
       <input type="text">
       <label>영문이름</label>
       <input type="text">
       <label>가격</label>
       <input type="text">
       <label>설명</label>
       <input type="text">               
    </fieldset>

    <fieldset>
       <legend>메뉴 크기 옵션</legend>
       <label><input type="radio">Small</label>
       <label><input type="radio">Large</label>
    </fieldset>    

    <div>
       <a href="list">취소</a>
       <input type="submit" value="저장">
    </div>      

 </form>
</section>

 

 

#form 유효성 검사하기

1. 필수입력란은 태그에 input 태그에 required 속성을 추가한다.

💡 필수입력이 필요한 곳에는 required 추가한다.

<label>한글이름</label>
<input type="text" required>

⭕ 출력결과

 

 

 

2. 숫자의 최소/최대 길이는 min/max 속성을 추가한다.

💡 숫자의 최소/최대 길이를 지정해보자.

<label>가격</label>
<input type="number" min="3" max="10">

⭕ 출력결과

 

 

 

3. 문자의 최소/최대 길이는 minlength/maxlength 속성을 추가한다.

💡 문자열의 최소/최대 길이를 지정해보자.

<label>설명</label>
<input type="text" minlength="2" maxlength="10">

⭕ 출력결과

 

 

 

4. 전화번호에 정규식을 사용할 수 있다.

pattern 속성을 추가하고 정규 표현식을 적용한다.

🚨 정규식 사용시 주의할점

1. input태그의 type은 tel이 아니라 text이어야 한다.

2. 패턴 앞 뒤로 어떠한 것도 오지 않게
시작할 때는 ^로 끝날 때는 $로 끝낸다.

 

 

코드로 직접 확인해보자.

💡 전화번호에 정규식 패턴을 적용해보자.

<label>전화번호</label>
<input type="text" required pattern="^01[016-9]-\d{3,4}-\d{4}$">

⭕ 출력결과

 

 

 

#그 외 Form 태그 관련 팁

1. HTML의 구분자는 대시(- )이다.

자바의 대문자와 혼동하지 않도록 한다.

💡 name으로 전달하는 키값의 구분자는 대시(- )이다.

korName(X) → kor-name(O)

<label>한글이름</label>
<input type="text" name="kor-name" required>
<label>영문이름</label>
<input type="text" name="eng-name" required>

 

 

2. 취소버튼은 페이지를 이동하는 것이기 때문에 <a>태그를

데이터를 전달하는 확인버튼은 <input type="submit">태그를 사용한다.

💡 취소와 저장버튼 태그는 다르다.

<div>
   <a href="list">취소</a>
   <input type="submit" value="저장">
</div>

 

 

3. 라디오버튼을 boolean값으로 처리하려면

value를 "true"와 "false"로 하면 된다.

💡 라디오버튼 boolean으로 처리하기
(value를 "true"와 "false"로 한다.)

<fieldset>
   <legend>메뉴 Default 크기 옵션</legend>
   <label><input type="radio" name="is-small" value="true" checked>Small</label>
   <label><input type="radio" name="is-small" value="false">Large</label>
</fieldset>

 

 

#(기본값) HTML로 처리 vs 테이블 컬럼 추가

만약 모든 메뉴의 기본옵션이 동일하다면

HTML에서 지정한다.

(radio에서 checked 속성 추가)

💡 (EX) 모든 메뉴의 기본 사이즈는 Small 음료는 Iced

 

메뉴마다 기본옵션이 다른 경우라면

메뉴 table안에 컬럼이 따로 필요하다.

(메뉴마다 상태값을 가지고 있어야 하기 때문!)

💡 (EX) 아메리카노는 Large에 Iced, 카페라떼는 Small에 Hot

 

 

#width: 100%와 inherit의 차이점

1. inherit은 너비를 가지지 못할 수도 있다.

width: 100%는 부모가 너비 속성을 가지고 있든 없든

자식이 자체적으로 너비를 100% 가지게 된다.

inherit은 부모가 크기를 가지고 있을 때만 너비를 가질 수 있다.

 

2. inherit은 부모와 너비가 다를 수 있다.

width: 100%는 너비를 부모 영역에 맞춘다.

하지만 inherit은 완전한 부모 영역이 아니다.

(EX) 부모의 width가 50%일 때 자식이 inherit을 하면

자식은 이미 50%인 부모 너비의 50%만 가지게 된다.

 

따라서 부모크기와 같게하고 싶을 경우

부모크기와 같이 간다고 하면 inherit이 아니라 100%를 준다.

(가변으로 한다고 하면 padding을 주어서 처리!)

 

 

 

💙 마치며

---

1.

이전에는 자바스크립트로만 가능했는데,

HTML에 여러 태그속성이 생기면서

Form태그의 유효성 검사가 가능해졌다.

 

클라이언트단에서

유효성 검사를 어느정도 처리해준다면

매우 편리하겠다!

 

 

2.

width를 지정할 때

100%나 inherit이나 비슷하게 느껴졌는데

전혀 다른 개념이었다.

inherit은 제약사항이 많은 것 같다.

주의하자!