본문 바로가기

MENU

javascript - auto-slide 링크:http://creatijin.dothome.co.kr/project/slider/auto/swipe-slide/auto.html 저번에 해결한 auto문제로 간단하게 슬라이드 제작해보았다. 생각한 이벤트가 정상작동하니 기분은 좋다. 좀 더 멋있는 다양한 컨텐츠를 만들어보고싶은데 플러그인도 좋지만 내가 직접만든다는게 뿌듯하다~ 다음에는 좀더 멋진걸로 만들어보자 더보기
javascript - setInterval 계속 해결이 안되던 auto-slide를 해결해서 속이 후련하다. 항상 index에 해당하는 버튼을 눌러도 멈추지않고 계속 작동했는데여럿의 도움을 받아서 드디어 해결했다. 이게 이번에 해결한 방법이다.물론 내가 해결했다기보다 도움을 많이 받았다.도움을 주신분한테 정말 감사의 인사를드리고싶다.setInterval로 변경을 하면서 가능하게 되었는데setInterval이 잘 이해가 안되지만 앞으로 이거에 대해서 공부를 좀 해줘야 겠다.이제 해결도 했겠다. 제대로 만들어봐야겠다. 더보기
Slider - double slide 지난 3일 동안의 결과물이다... 신난다~ 우연히 커뮤니티를 돌다가 2015년 인기있는 웹페이지?들을 모아둔걸 봤는데 참신한 슬라이드가 있었다. 링크 : http://codepen.io/suez/pen/JoWKKX 이걸보고 아 이거 괜찬다 해서 따라해봐야지 생각하고 만들어보기 시작했는데... css부터 새로운것도 많이보이고 SCSS으로 만들어진거라 이해하는데 상당히 오래걸렸다. 완벽하게 따라해보진 못했지만 비슷하게라도 나와서 기쁘다. 링크 : http://creatijin.dothome.co.kr/project/slider/double/double.html (모바일은 제대로 이벤트가 안나옵니다.) 저기서 배운 css는 앞으로 정리해놔야겠다. :before , :after content will-chang.. 더보기
javascript - 구구단 만들기 2탄 음 골머리좀 썩었다. 출력하는게 만만치 않았는데 계속해보니깐 되긴되더라... 12345678910cs 123456789101112131415161718192021222324252627 function timestabls1() { var result = ""; var start = ""; var end = ""; for (var i = 2; i 더보기
javascript - 구구단 만들기 1탄 요즘에 스터디를 하고있는데 스터디하다가 친구 한놈이 "너 자바스크립트로 구구단은 짤주아냐?" 속으로 뜨끔했다. 평소에 스타일링만주고 하다보니 전혀 생각지 못한거였다. 예전에 for , if 문을 익히긴 했지만 미숙했다. 저 말을 들었을때는 아무생각도 들지 못했다. 구구단.... 어떻게 짜야될까...? for문을 돌리면 되지 않을까? 이런 생각하는것부터가 "아무것도 몰라요" 를 인증하는거 같다. 그래서 해보기로 했다. 까짓거 해보지 12345678for (var i = 2; i 더보기
CSS - 크기 단위 오늘은 효과나 이런것 보다 크기 단위에 대해서 공부해보자보통은 픽셀을 많이 사용하는데 px말고도 여러가지 있다.가변 크기 단위 - 상대적인 크기를 지니는 단위emem은 요소에 지정한 글자 크기 단위, em단위를 쓰면 부모에게 지정한 글자 크기를 기준으로 배율을 조정[1em은 부모의 1배 2em은 부모의 2배]exex는 요소에 지정한 font-family에 의존한다.rem이 단위는 이해가 잘 안되서 여기저기 찾아본 결과 html에 지정된 크기를 기준으로? 상대적인 값을 가지게 된다고 한다.(사실 뭔소린지 잘 모르겠다~)IE8 이하는 인식을 못해서 사용에 주의해야 될꺼 같다고정 크기 단위 - 부모 또는 기타 요소들에 영향을 받지 않고 크기를 유지하는 단위in인치 (1in = 25.4mm)px1px = 모니터.. 더보기
CSS - Outline 요즘 CSS에 심취해있기 이것저것 찾아보다가 outline을 발견했다 ㅋㅋ 일딴 눈으로 보고 설명하는게 빠르기 때문에 결과는 위와 같다.dotted : 점선 테두리dashed : 짧은 선들의 연속solid : 실선으로 지정groove : 테두리가 안으로 파진것처럼 보임ridge : 테두리가 밖으로 튀어나온것처럼 보임inset : 테두리를 포함한 컨텐츠 영역이 안으로 들어간것처럼 보임outset : 테두리를 포함한 컨첸츠 영역이 밖으로 튀어나온것처럼 보임double : 선이 두줄로 보임auto : auto많이 쓸꺼같진 않지만 그래도 알고있으면 좋을꺼같다. 브라우저에서도 다 지원하고 익스는 8부터 지원하기 때문에 괜찬아 보인다. 더보기
CSS - box-sizing 요즘 자바스크립도 열심히하지만CSS도 관심이 생겨서 이것 저것 찾아보던중box-sizing 이라는걸 보게되었는데레이아웃 잡을때 매우 유용할꺼같다.box-sizing의 값은 총 4가지다.content-box : 콘텐트 영역을 기준으로 크기를 정함border-box : 테두리를 기준으로 크기를 정함initial : 기본값inherit : 부모 요소의 속성값을 상속위에는 좀 딱딱하게 설명했지만 쉽게 설명하면1번은 보통 우리가 설정을 안하고 했을때랑 똑같다2번이 중요한데 padding과 border의 크기를 width와 height 설정한 값에 포함한다?백번 설명보다 그냥 눈으로 보는게 빠르다.3,4번은 다른 요소에서도 볼 수 있는거기 때문에 설명은 생략하겠다. 1번 박스는 100px크기 안에 padding 과.. 더보기

티스토리툴바