코딩하는라민

[Refact/웹접근성] input file 요소에 잘못된 커스터마이징으로 스크린리더에서 읽을 수 없던 문제 개선하기 지난 프로젝트에서 파일 업로드를 하기 위해 input type file 부분을 커스터마이징했다. 그러는 과정에서 input 요소에 display: none; 을 적용했고, label 요소의 background 로 원하는 이미지를 적용해주었다. 하지만 이런 방법은 tabindex 가 적용되지 않을 뿐더러 스크린리더가 해당 요소를 잡지 못하는 문제점이 발생했다. 이렇게 된다면 웹접근성을 고려하지 않는 방법이라 수정하는 게 좋다는 피드백을 받았다. 📌 접근 가능한 숨김 텍스트 🚫 내가 사용한 잘못된 방법 input{ disaply: none; } 못생긴 input file 의 기존 디자인을 숨..

[React/Project] input disabled 를 이용한 다중 입력값에 따른 버튼 활성/비활성화 📌 input 에 value 를 하나라도 입력하면 버튼이 활성화되던 문제 ✅ 현재 상태 input 의 상태를 다음과 같이 관리하고 있다. const [formState, setFormState] = useState({ title: '', price : '', content: '', }); input 에 값을 입력하면 onChange 이벤트가 발생하고, onChange 이벤트 안에 setState 를 통해 상태를 변경하는 콜백함수를 넣어주었다. 변경되는 상태를 input 의 value 에 담아 input 의 값을 조회할 수 있게 해주었다. const handleChange = (e) => { setFo..

margin auto 속성으로 정렬하기 웹디자인기능사 공부하다가 margin-left: auto 속성이 나왔다. margin: 0 auto; 만 사용하다가 margin-left: auto 속성을 보고 margin 속성에 대해 궁금해져서 이것저것 만져보면서 가지고 놀아보았다. 1. margin: 0 auto; 기존에 많이 사용하던 margin 0 auto 속성 .box{ width: 400px; height: 400px; border: 1px solid black; margin: 0 auto; } ▶ 요소를 가운데 정렬할 수 있다. ▶ margin: 0 auto; 는 위아래의 마진을 0으로, 좌우 마진을 자동으로 조정해주는 것 ▶ margin: 0 auto; ⇔ margin: 0 auto 0 auto; 2..

CSS border 여러줄 겹치는 경우 겹침 현상 없애기 1. position과 border로 겹친부분 배경색으로 처리해서 안보이게 만들기 ① position 을 주고 top 마이너스 값으로 위치를 조정하여 완전히 겹쳐 한줄처럼 보이게 만들어준다. ② border-bottom 을 배경색과 동일한 색으로 지정한 후 ③ z-index 로 밑의 div 보다 앞에 보이게 만들어준다. z-index → position 을 준 경우 겹친 요소에 대해 수직 위치를 지정할 수 있다. 숫자가 클 수록 제일 위에 오게 되며, 숫자가 작을수록 숫자가 큰 것보다 아래에 보이기 때문에 가려져서 보이지 않을 수도 있다. 기본값은 auto이며, 속성이 주어지지 않았다면 0으로 취급함. 레이어같은 느낌 hello Laudantium..

2. 이미지 좌우 슬라이딩 .wrap{ width: 500px; height: 250px; margin: 0 auto; position: relative; overflow: hidden; } .img_list{ width: 1500px; height: 250px; position: absolute; top: 0; left: 0; } .img_list li{ float: left; } .img_list img{ width: 500px; height: 250px; } - li 의 ②부모의 너비(ul)가 이미지의 w의 길이만큼, 개수만큼 넓어야한다. ex) li 하나의 너비가 500px 이고, li가 총 3개이면, ul의 너비는 1500px이 되는 것 - li 는 flow: left; 를 해워야 옆으로 흐를 ..

CSS, Jquery 세로 메뉴 만들기(서브 메뉴) 1. hover 이벤트 이용해서 세로 메뉴 만들기 $(this).find(".sub_menu") → 내가 뭘 클릭할지 모르기 때문에 find로 찾아준다. → this : 위에서 언급한 것(.header_menu>li) Home 홈 바로가기 Blog 일상 공부 Contact 네이버 티스토리 #quickmenu{ width: 200px; } #quickmenu>li{ width: 200px; line-height: 30px; text-align: center; background-color: pink; margin-right: 5px; } .sub_menu_list{ display: none; } .sub_menu_list li{ background-col..

css, js 메인메뉴, 서브메뉴 만들기 0. 서브메뉴 만들기 - 메인 메뉴는 보이게, 서브 메뉴는 안 보이게 숨기기(display: none;) - 서브 메뉴는 마우스를 오버했을 경우에만 나타나게 1. 서브 메뉴 전체 떨어지게 만들기 → header_menu_list 박스와 sub 메뉴 박스를 따로 만들어서 style에서 sub 메뉴의 크기 등의 속성을 따로 줌 Home Blog Contact 홈 바로가기 일상 공부 네이버 티스토리 #quickmenu, .sub_menu{ width: 610px; } #quickmenu li, .sub_menu ul{ width: 200px; height: 30px; line-height: 30px; float: left; text-align: center; backg..

Jquery mouseover, mouseleave VS hover 차이점 1. mouseover, mouseleave - 자식 요소에도 영향(자식 요소에도 마우스 포인터가 올라가면 이벤트 동일하게 발생) 2. mouseenter - 자신에게만 마우스 포인터가 올라갈 경우만 이벤트 발생 3. hover - mouseenter 되었을 때, , mouseleave 되었을 때 이벤트를 각각 지정해줄 수 있음(연결해줌) - 조건문처럼 콤마로 구분한다. - 마우스 오버되면 슬라이드 다운, 아니면 슬라이드 업

제이쿼리 라이브러리 다운로드 및 사용하기 1. 제이쿼리 라이브러리 다운로드해서 넣기 Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download jquery.com - head 태그 안 title 태그 아래 또는 body 태그 바로 위 에 넣기 2. 제이쿼리 CDN 넣기

퀵메뉴 만들기 margin 을 이용한 퀵메뉴 만들기 Home Blog Contact #quickmenu{ width: 100px; position: fixed; right: 0; top: 50%; transform: translateY(-50%); } #quickmenu a{ width: 150%; height: 20px; line-height: 20px; margin-bottom: 5px; padding: 15px; transform: 1s; display: block; font-weight: bold; } #quickmenu li:hover{ margin-left: -50%; } #quickmenu li:first-child{ background-color: pink; } #quickmenu li:n..