[React] 가상 키보드 만들기 - 2. html, css 작업

 

 

🧱 구현 이미지 

 

html 구조

 

html의 전체적인 구조는 다음과 같다. 

 

• container : 요소들 전체를 감싸는 가장 큰 div
  • menu
    • switch : 다크모드 / 라이트모드를 전환하는 토글 스위치. 
    • select-box : 폰트를 전환할 수 있는 셀렉트 박스
  • input-group
    • input : autocomplete="off"(자동완성 끄기 설정)
    • error-message : 한글이 입력되면 나타날 에러 메시지
  • keyboard
    • row : 키보드의 각 줄
      • key : 각인이 하나인 타입과 각인이 2개인 타입이 있음. 각인 2개는 span 2개로 구성됨

 

 

css구조 

display : flex;

아이템들의 정렬을 위해서 사용하였다. keyboard에서 보면 row가 flex-box 가 되고 key들이 flex-item으로서 일정한 비율을 유지하며 좌우 정렬이 되게 설정되어있다. flex container와 flex item에 적용되는 속성들이 각각 다르기때문에 확인해보고 사용해야한다. 

 

transition : 0.5s

/* 효과 지정시 */
transition : width 1s, height: 2s;

css 속성을 변경할때 애니메이션 속도를 조절할 수 있다. 예시처럼 0.5가 설정이 되어있다면, 해당 요소의 css 속성들의 변화가 0.5초에 걸쳐서 일어나게 된다. 특정 요소의 변화 시간을 지정해줄수도 있고, 생략한다면 요소의 변화 전체가 해당 시간에 걸쳐서 변화되게 된다. 아래처럼 시간을 지정해준 경우, width는 1초동안 변하게 되고 height는 2초동안 변하게 된다. 

 

element::before

가상요소으로 요소의 맨 처음 자식이 되는 요소를 만든다. ::after의 경우 맨 마지막 자식이 되는 가상요소를 만들어준다.

가상요소를 사용할때는 content 속성에 반드시 값이 있어야 한다. 대부분은 빈 문자열 ''을 넣어준다. 

 

input:checked + .slider::before

 체크된 인풋의 바로 다음에 나오는 slider의 before요소에 스타일을 지정한다는 뜻이다. 

input이 체크되지 않았을 경우에는 스타일이 적용되지 않는다. 

 

transform

요소의 좌표 공간을 변경한다. 회전, 크기 조절, 기울이기, 위치 이동 등을 설정할 수 있다. 

스위치가 클릭되었을때 토글 버튼이 움직이는 것처럼 보이게 하기 위해 사용했다. 

 

 

 

 

완료!

 

************************

 

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발
#패캠인강후기 #패스트캠퍼스후기 #오공완 #30개프로젝트로배우는프론트엔드withReact

 

 

 

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.