킹바구니

태그 예를들어 이런 태그가 있는데 focus를 줘도 안먹는 경우가 있음. 뭐 css적으로 display: none한것도 아니고, $('p').get(0).focus()이렇게도 해보고 그랬는데 결론은 그냥 셋타임아웃이 제일 효과적임. $('p').focus(); setTimeout(function() { $('p').focus(); }, 100); 난 혹시 몰라서 저런 경우 발생시 두개를 다 써놓곤 함. 시간초는 보통 100~200정도 다들 하는듯.. jquery focus() not working

modal 열때 스무스하게 열림/닫힘 효과 없애는 방법 modal은 class에 .fade 삭제 offcanvas는 css 추가 .offcanvas { transition: transform 0s; } modal은 css줘보고 난리쳤는데 그냥 저게 직빵임. class없애도 열고 닫는데 지장없음. 접근성 작업한다면 꼭 저런 스무스 애니메이션 빼길 바람(스무스한 그 찰나에 focus를 잃어버리는 등 별짓이 다 일어남)

https://codepen.io/pmx/pen/yLXQPrG 커스텀 체크박스, 라디오 버튼 ... codepen.io 디자인 시안이 오면 라디오박스나 체크박스는 90% 기존꺼를 안쓴다고 보면 되기때문에, 이참에 정리함.

예전에 학원에서 배울때 중요하게 들었지만 정작 실무에서는 그렇게 쓰지 않았는데, 어쩌다보니 신경써야할 회사로 오게되서 정리함. 🔽 최대한 간결하게 작성해서 아래 링크에 올려놓음 🔽 https://codepen.io/pmx/pen/yLXMRwm 접근성 고려한 탭 | example of tabs with accessibility 참고 https://youtu.be/3LFUWO9mWpQ?list=PLtaz5vK7MbK2v9j4GW6l9L4dEkze9myE5... codepen.io

-포커스 대상 -새로고침 유발 -스페이스키로 클릭 -서버에 양식 데이터 제출 -disabled로 비활성화 -:focus, :hover, :active, :disabled -모달창 오픈 -팝업메뉴 트리거 -인터페이스 전환 -미디어 콘텐츠 재생 -포커스 대상 -새로고침 유발 -새 페이지/현재 페이지로 이동 -엔터키로 클릭 -:link, :visited, :focus, :hover, :active url도 없고, url이 변경되는 내용도 아니며 핸들러가 있을 경우 모호함

transition이나 이런 fade효과가 나한테는 어렵기도 하고, opacity와 visibility와 display의 상관관계를 잘 모르겠어서 공부하다가 기본 형태는 저장해두고 나중에 꺼내서 쓰려고 포스팅함. 1. 공통 click me title LoremLoremLoremLoremLoremLoremLoremLoremLorem ok .modals { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); transform: translate(-50%, -50%); } .modal { width: 500px; padding: 1rem; background-color: rgba(255..

기본

1. Internet 전 세계의 컴퓨터들이 자료 공유를 위해 서로 연결되어있는 것. 클라이언트와 서버로 구성되며 TCP/IP라는 기본 프로토콜을 통해 제공되고 있음. 2. WWW (World Wide Web) 인터넷에 연결된 사용자들이 서로 정보를 공유할 수 있는 공간. 웹브라우저를 통해 접속할 수 있음. 텍스트, 그림, 소리, 영상 등 정보를 하이퍼텍스트 방식으로 제공. ※ Hyper-text 문서 내부에 또 다른 문서로 연결되는 참조를 집어넣음으로써 웹 상에 존재하는 여러 문서끼리 서로 참조할 수 있는 기술. ※ Internet과 WWW의 차이점 혼용하여 쓰이지만 인터넷은 단순히 기기가 연결되어있는 것을 의미하고, WWW은 특정 주소로 이동하여 데이터를 공유할 수 있다는 것임. 인터넷을 사용하면서 이..

SASS 상위 버전이 SCSS 문법적으로 약간 다른게 있으며 보통은 SCSS씀. 1. & 부모 선택자 선택 li { &:last-child { padding: 10px; } } /*결과*/ li:last-child { padding: 10px; } .btn { &-small { padding: 1px; } } /*결과*/ .btn-small { padding: 1px; } 2. : 동일한 네임을 가진 css는 중첩해서 사용 가능 li { font: { size: 10px; color: #333; } } /*결과*/ li { font-size: 10px; font-color: #333; } 3. !global 변수는 스코프 안에서만 움직이기 때문에, 상단에 전역변수로 써주거나 아니면 !global 달아주기..

1) HTML는 엄격한 언어가 아님. 라고 대문자로 써도 라고 알아서 인식함. 그러나 소문자로 쓰는것이 권장됨. 2 title 해당 요소에 대해 추가 정보를 알려주는 속성. 환영합니다 ---> '환영합니다'에 마우스를 대면 툴팁으로 '안녕하세요'가 노출됨. 3) pre 월요일 화요일 수요일 이라고 쓰면 소용이 없음. 이럴떄 태그로 쓰면 공백이나 줄바꿈등을 그대로 표현해줌. 4) b, strong, em b = 그냥 굵게 표시하고 싶을 때 em = 중요해서 기울게 표시하고 싶을 때(중요도 ★★) strong = 겁나 중요해서 굵게 표시하고 싶을 때(중요도 ★★★★★) 5) dl 커피 -1인용 컵으로 1/2 6) 시멘틱 요소 브라우저나 개발자한테 있어서 해당 요소의 의미가 정확한 요소들을 의미. 보다는 , ..