개발/CSS

리액트 프로젝트에서 POST 기능을 구현하는데 파일을 업로드하는 부분도 만들어야 했다. 이 페이지는 내가 마크업을 하지 않아서 기능만 구현하고 있었다. 프로젝트 발표 후 웹접근성을 다시 고려해 리팩토링을 하고 있던 도중 문제를 발견했다. 파일업로드 부분은 tab key로 접근이 안된다는 점이다. 마크업을 살펴봤을 때 input이 display: none; 상태여서 접근이 불가능 했다. 그래서 고민을 하다가 tabIndex 를 주자 싶어서 코드를 수정했다. 코드를 수정한 부분은 div에 tabIndex 속성을 부여했다. 근데 여기서 tabIndex 만 주면 밑과 같이 eslint 가 경고를 한다. 이 오류를 해석했을 때 tabindex는 대화형 요소에서만 선언해야 합니다. 라고 알려주는 것이다. 잘 이해가..

리액트 프로젝트를 하면서 웹접근성에 맞게 리팩토링을 진행하고 있다. 마우스 없이 tab key로도 동작이 되도록 다시 코드를 수정하고 있던 도중 문제를 발견했다! 바로.. 등록버튼의 색상이 포커스됐을 때 색상과 비슷해서 티가 안난다는 것.. 뭔가 커지긴하는데 티가 안난다. 포커스가 잘 되는지 마는지 인식이 안된다. 그래서 focus 됐을 때 색상을 변경해줘야 한다고 생각이 들었다! 팀원들에게 조언을 구한 후 색상을 변경하자는 결론에 도달했고, 자료를 찾다가 여러가지 방법을 발견했다. 이 방법을 정리하기 전에 초점, 포커스링의 개념과 중요성을 알아야 한다. 초점 / 포커스링의 개념과 중요성 1. 초점의 개념 일상 속에서 우리는 무언가 집중해서 보거나 일을 할 때 초점이라는 단어를 쓴다. 컴퓨터에서는 키보드..

리액트 프로젝트를 하다가 생각지 못한 문제에 부딪혔다! 바로 스크롤 유무에 따라서 화면이 왼쪽으로 밀리는 현상이 있다는 것.... 이 문제를 어떻게 해결해야할까 많은 고민을 했다. ❗️흔들리는 애플리케이션 인터페이스 Y축 이 문제를 해결하기 위해서 임의로 전체에 스크롤을 만드는 방법이 있었다. body { overflow-y: scroll; } 📢 여기서, 의문! 💬 과연 이 밀림 현상 하나 때문에 전체에 스크롤을 임의로 줘서 막아도 될까? 정답은 없지만.. 만드는게 더 낫다! 라는 결론이 나왔다. 나는 이런 문제가 사용자에게 혼란을 불러올 수 있다고 생각했다. (임의로 세로 축을 만드는건데, 왜 스크롤이 안될까? 라는 의문을 가질 수 도 있다고 생각했음) 그리고 다른 사이트들을 엄청나게 찾아봤다. 😮 ..

먼저 따로 직접 해보기 위해 새로운 branch를 생성했다. git branch 을 하면 새로운 branch가 생성된 것을 볼 수 있다. git switch 는 새로 만든 branch로 이동하도록 해준다. switch 외에도 git checkout 으로도 이동할 수 있다. 이때 좌측 하단에 trainig 부분을 눌러서도 변경할 수 있다. flex를 직접 실습하기 위해서 flex branch에서 css(style.css)파일을 복사해 training branch로 이동해 붙여넣기 해준다. flex 직접해보기 어떤 값도 주지 않은 기본형태이다. 1. container에 display값 주기 그룹을 감싸고있는 main 클래스에 display: flex 값을 준다. flex 값을 주면 요소들이 가로로 정렬이 된..