디블리셔로 살아남기

See the Pen Such Spinners, Much Loading by Yongkyu, Lee (@Yongkyu) on CodePen.

input Tag는 html문서에서 정보를 입력받는 용도로 사용한다.  - input 태그의 종류별 사용법 - 1. 텍스트 입력을 받는 인풋(텍스트 필드) 은 또는 과 맞물린다.의 위치는 의 전/후와 크게 상관없는 듯...하지만 라벨을 숨길때는 웹접근성을 고려해야겠지?// 웹 접근성 관련통합검색css 적용input[type="text"] { }로 적용할 수 있지만 공통요소에 적용하기보단 가급적 다른 클래스를 따로 주는것이 좋다.input_box { width:200px; /* 가로크기 */ height:60px; /* 세로크기 */ border:1px solid #ccc; /* 선 두께 타입 색상 */ background:#fff; /* 배경색상 */}  2. 라디오 버튼용 인풋라..

SVG에 CSS없이 애니메이션을 넣는 방법입니다.구조는 아래와 같습니다. http://www.w3.org/2000/svg" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30">        stroke-dasharray="100" stroke-dashoffset="100">     See the Pen PureSvg Animation Check by Yongkyu, Lee (@Yongkyu) on CodePen.  * 애니메이션 옵션 설명 반복(repeatCount)repeatCount="indefinite"옵션값: 1~NN 또는 무한재생(indefinite) 반복후 애니메이션의 끝에서 멈춤(freeze)fill="freeze"옵션값:..

svg의 animation기능을 사용하여 로딩페이지의 로더이미지를 만들어 보았다.  See the Pen Untitled by Yongkyu, Lee (@Yongkyu) on CodePen. 참고사이트 : https://loaders.holasvg.com/

css만으로 헤더 메뉴를 만들어 보기로 했다sub_menu가 있는 경우에만 노출되도록 하였다  See the Pen Untitled by Yongkyu, Lee (@Yongkyu) on CodePen.

탭메뉴를 만드는 방법은 여러가지가 있지만일반적으로 사용하는 방법으로 data-tab을 써서 만들어 보았다data-tab을 쓰면 jquery소스가 조금 단순해진다.  See the Pen Tab menu on css by Yongkyu, Lee (@Yongkyu) on CodePen.

ol은 연속성을 가진 순서가 있는 리스트를 만들때 사용한다.list-style:none으로 쓰기도 하지만 숫자가 반드시 들어가는 리스트는 counter reset속성으로 구현할 수 있으며숫자가 들어가는 부분도 css로 커스터 마이징이 가능하다.See the Pen Untitled by Yongkyu, Lee (@Yongkyu) on CodePen.

UL그룹을 감싸고있는 wrap의 가로크기가 변해도 대응할 수 있는 리스트 그룹을 만들어 보기로 했다.모바일 환경에서 CSS의 flex속성을 사용해 간단하게 만들 수 있다. 여기에는 텍스트 여기에는 텍스트 여기에는 텍스트 ..

css속성중 잘 안쓰는 속성인데 visibility:visible, visibility:hidden이다display:none, block과 다른점을 아직도 모르겠지만 어쨌든 이것으로 툴팁을 만들어 보았다  See the Pen Untitled by Yongkyu, Lee (@Yongkyu) on CodePen.

간단하지만 한 번쯤은 꼭 쓸일이 있는클릭하면 접히고 펼치고 하는 BOX를 만들어 보았다.이거 잘 활용하면 select 박스로도 쓸 수 있을듯...See the Pen Untitled by Yongkyu, Lee (@Yongkyu) on CodePen.   같은 기능을 반복적으로 동작하는데는 제이쿼리의 toggle만한 기능이 없는것 같다.주의할 점이라면 대상을 클래스명으로 지정할경우 같은 클래스를 가진 요소들이 전부 같은 기능을 한다는 것이다.이 때문에 ID값을 프론트단에서 미리 지정해버리면 개발자들이...아주 싫어하겠지?이 예제에서 주의깊게 볼 점은 이것이다. (this).next 그것 이후에 $(document).ready(function() { $('.expand_header').on('cli..