멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 16 (폼 스타일링, 그리드 레이아웃, git reset)

 

 

 

목차

• 폼 스타일링(과제 리뷰)
• 그리드 레이아웃
• git reset
• 오늘 하루를 돌아보며

 

폼 스타일링(과제 리뷰)

체크 박스

체크 박스의 모양을 svg 파일로 바꾸고 싶을 때 svg나 img로 마크업하거나 배경 이미지로 지정할 수 있다.

• img 요소를 사용하려면 자바스크립트를 사용하여 상태(unchecked/checked)에 따라 src로 접근해서 이미지를 바꿔야 한다. 추천하지 않는 방법이다.
• svg로 마크업하면, 상태에 따라 fill 값을 조절할 수 있다.
• 배경 이미지로 마크업하면 label의 배경 이미지로 지정하고, 상태에 따라 배경 이미지를 변경할 수 있다.

 

accent-color 속성을 사용하면 체크 박스 모양의 색상을 지정할 수 있다.

 

text-indent는 첫 줄 들여쓰기를 지정하는 속성이다. block일 때만 사용할 수 있다. 체크 박스 모양을 배경 이미지로 설정하고 레이블을 이미지 뒤로 밀고 싶을 때 padding을 줄 수도 있지만 text-indent로 공간을 줄 수 있다.

 

input:checked + label {} 선택자는 input이 체크되었을 때 형제인 label을 선택한다는 뜻이다.

 

:user-valid, :user-invalid

유효성 검사(pseudo-class)와 관련된 CSS 가상 클래스다. 폼 요소에서 사용하며, :user-valid는 입력한 값이 유효한 상태일 때 적용되고, :user-invalid는 입력한 값이 유효하지 않은 상태일 때 적용된다.

 

 

접근성

display: none과 visibility: hidden은 접근성 측면에서 사용하기 적합하지 않다. 키보드로 접근할 때 포커싱되지 않기 때문이다. 그렇다고 opacity:0을 지정해도 공간을 차지하기 때문에 좋지 않은 선택이다. 아래와 같이 선언하면 input(기존의 체크 박스 모양)이 보이지 않으면서도 직접 지정한 체크 박스 모양과 사이즈를 일치시켜서 포커스 링이 표시된다.

.parent {
  position: relative;
  
  input {
    position: absolute;
    inline-size: var(--size);
    block-size: var(--size);
    inset-block-start: 0;
    inset-inline-start: 0;
    margin: 0;
    appearance: none;
  }
}

 

aria-errormessage는 aria-describedby처럼 에러 메시지를 알려주는 속성이다. 메시지가 담긴 요소의 id 값을 받아서 사용한다. 주로 자바스크립트로 aria-invalid="true"와 함께 동적으로 사용한다.

 

비밀번호 정규 표현식

<div class="form-input">
  <label for="input-0" class="sr-only">비밀번호</label>
  <input pattern="(?=.*[A-Za-z])(?=.*\d)(?=.*[\W_]).{10,}" aria-errormessage="error-0" type="password" id="input-0" name="userPWD" required placeholder="비밀번호" />
  <p class="error-message" id="error-0" aria-live="polite">비밀번호는 특수문자, 영문 소문자, 숫자를 포함하여 10자리 이상 입력해 주세요.</p>
</div>

 

pattern="(?=.*[A-Za-z])(?=.*\d)(?=.*[\W_]).{10,}"

• (?=.*[A-Za-z]) - 문자열에 최소 하나의 알파벳 문자 포함
• (?=.*\d) - 문자열에 최소 하나의 숫자 포함
• (?=.*[\W_]) - 문자열에 최소 하나의 특수문자(또는 언더스코어) 포함
• .{10,} - 문자열의 길이 최소 10자

 

그리드 레이아웃

플렉시블 레이아웃이 1차원 배치라면, 그리드 레이아웃은 2차원 배치다. 플렉시블 레이아웃보다 강력한 기능이다. display 속성 값을 grid, 또는 inline-grid로 지정하여 적용한다. 지정한 요소는 그리드 컨테이너가 되며, 안에 포함하는 요소들은 그리드 아이템이 된다. 그리드 컨테이너는 행(row)과 열(column)을 가진다.

 

• Grid Line: 그리드의 행이나 열을 그리는 선을 말한다. 1부터 시작하며, 행이나 열의 개수보다 1개 더 많다.
• Grid Track: 그리드 라인 사이의 행 또는 열 공간이다.
• Grid Cell: 4개의 그리드 라인이 묶여 그려지는 유닛(가장 작은 단위)이다.
• Grid Area: 그리드 유닛이 묶인 영역으로, 고유한 식별자를 가지며, 식별자를 통해 요소를 배치할 수 있다.
• Grid Gutter: 행 또는 열 사이 간격(gap)이다.

 

git reset

저장소의 상태를 변경하거나 이전 커밋으로 돌아가는 데 사용한다. 가장 일반적으로 사용하는 세 가지 옵션은 다음과 같다.

1. —soft: HEAD를 이전 커밋으로 이동시키지만, 변경된 파일을 stage 상태로 유지합니다. 즉, 변경 내용은 유지되지만, 커밋하지 않은 상태로 남는다. 두 개의 커밋을 묶어서 다시 커밋할 때 유용하겠다.
2. —mixed: HEAD를 이전 커밋으로 이동시키고, 변경된 파일을 unstaged 상태로 되돌립니다. 따라서, 변경 내용은 유지되지만, 다시 stage에 올려야 커밋할 수 있다. 커밋했지만 조금 더 수정하고 다시 커밋할 때 유용하겠다.
3. —hard: HEAD를 이전 커밋으로 완전히 이동시키며, 변경된 모든 내용을 삭제한다. 즉, 작업 영역에 있는 모든 변경 사항을 되돌리고, 이전 상태로 되돌아간다. 데이터 손실이 발생할 수 있으니 주의해서 사용해야 한다.

git reset으로 이전 커밋으로 돌아갔을 때 아직 수정을 하지 않았다면 git reset ORIG_HEAD 명령어로 원래대로 되돌릴 수 있다. git이 만약의 경우를 대비해서 자동으로 이전 상태를 ORIG_HEAD라는 참조에 저장하기 때문이다.

 

 

오늘 하루를 돌아보며

하나의 예제를 position, flex, grid 등 다양한 레이아웃 속성들을 사용하여 만들어보면, 각 속성의 차이를 이해하고 언제 어떤 속성을 사용할지 선택하기 조금 더 쉬워질 것이다. 씹고 뜯고 맛보고 즐겨보자!

 

마크업을 하다가 궁금한 것이 생기면 레퍼런스를 먼저 찾아보고, 못 찾으면 AI에 물어보고, 물어본 후에는 무조건 출처 확인하고! 이런 순서로 찾아야 더 정확하고 확실한 정보를 알 수 있다. HTML5도 CSS도 계속 업데이트되기 때문에 최신 정보를 얻으려면 AI보다는 mdn과 같은 레퍼런스가 더 정확하다.