코딩하는라민

[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..

[웹디자인기능사 실기] html, css 유효성 검사하기 유효성 검사? ▶ 이렇게 시험지 뒤쪽에 있는 기술적 준수사항에 보면 유호성 검사에 'ERROR' 가 없도록 코딩하여야 한다고 명시되어 있다. 하지만 시험장에서는 인터넷을 사용할 수 없으므로, 이 유효성 검사를 돌려볼 수 없다. 따라서 시험 전에 코드를 연습할 때마다 돌려보고 자주 틀리는 부분을 숙지하고 시험장에 들어가야할 것. ▶ 오류가 없는 파일의 경우 No errors 라고 표시가 뜬다. ▶ 하지만 오류가 있는 경우 error 와 warnming 이라는 문구가 뜬다. ▶ 이런 경우 잘못된 line 수를 알려주므로, 찾아서 수정해준다. html 오류의 유형 1. li 의 부모가 잘못된 경우 ▶ li 를 ul, ou 안에 넣지 않은 경우. ▶ li..

[웹디자인기능사 실기] 부여 가을연꽃축제 ✅ 콘텐츠는 왼쪽정렬 ✅ 세로메뉴 ✅ 슬라이드는 서서히 나타났다 서서히 사라지게 ✅ 탭 메뉴는 없음 ✅ 푸터에 패밀리 사이트 1. 헤더 - 세로 메뉴 1-1. mark-up 축제소개 초대의 글 축제개요 축제연혁 오시는길 행사안내 셔틀버스안내 행사안내 행사일정 소공연장 홍보마당 축제소식 보도자료 음식레시피 참여마당 참가후기 연꽃갤러리 포토갤러리 ... ✅ 로고 : 포토샵 이미지 or html 텍스트 ✅ ul 안에 ul : ul.gnb li 안에 ul.sub_list li 가 들어있는 구조. ✅ 다 a로 감쌌는지 확인, a태그의 링크는 #이 들어갔는지 확인 ✅ 텍스트 또는 이미지가 a태그 안에 있는지 확인(바깥으로 빠져나가면 안 됨) 1-2. css .wrap{ wi..

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 되었을 때 이벤트를 각각 지정해줄 수 있음(연결해줌) - 조건문처럼 콤마로 구분한다. - 마우스 오버되면 슬라이드 다운, 아니면 슬라이드 업