JQuery Progress Bar 01 >결과 >HTML >CSS >script >변수는 감싸고 있는 .progress-bar 와 안에 .bar , .num 이 있고 .num의 안에 data-num이 있는데 progressData 로 만들었다. progressBar 의 애니메이션은 progressData 의 width + '%' 의 값으로 만...
JQuery UI 의 사용법은 URL : https://velog.io/@nuyhes/Front-end-%EA%B5%AD%EB%B9%84%EC%A7%80%EC%9B%90-052%EC%9D%BCJQuery UI를 이용하여 From 태그를 사용해본다.selectm
AJAX 와 JSON 을 다시 한번 복습하고 넘어가보자.Ajax는 웹페이지에서 새로운 데이터를 보여주려고 할 때 웹페이지 전체를 새로고침 하지 않고, 보여주고자 하는 데이터가 포함된 페이지의 일부분 만을 로드하기 위해 비동기 (non-blocking)을 사용하여 데이터
결과HTMLCSSscript를 보기전에 이거 부터 설정하고 배워보자ImageLoaded는 이미지를 masonry를 사용하기전 충분히 로딩을 한 후 작동되게 하려고 사용한다.이미지를 충분히 로딩하지 못한채로 masonry를 사용하면 겹치는 현상도 발생함.https
AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말합니다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을
결과휠을 내리게 되면 다음 SectionHTMLCSSscript에 설명된 주석을 참고결과HTMLCSSscrollLeft 값만 바꿔주면 동작이 된다. 결과HTMLCSSscriptTyping 효과를 나타나게 하는 효과이다.CDN은 구글링을 통해 가져온다. 정해진 공식 페이
결과HTMLP 태그에 클래스이름을 정한다. SCSS 반복문을 위해 SCSS 에서 작성한다.script변수 \`\`\`javascriptimageList.css('display','none');imageList.eq(imgIndex).css('display','block
결과hover를 하게되면 투명도가 있는 배경이 이미지에 십자가모양으로 이펙트를 주게된다.HTMLCSSClass Top , Bottom 의 그림설명top은 넓이가 100%를 차지한다 높이는 50% 영역을 차지하고 하단에 위치한다. (위치가 헷갈릴듯.. 양해바람)botto
결과HTMLCSSscript어제 만든 불릿버튼 슬라이드와 코드는 거의 같다. 하지만 다른건 숫자 카운팅인데 크게 다르지 않게 만들었다. ex ) 불릿과 마찬가지로 addClass , removeClass 로 01/05 class=on02/0503/0504/0505/05
결과푸터도 마찬가지로 반응형으로 줄어들게 만들었다.HTML결과탭메뉴를 제작한다. 마우스 클릭은 물론 tab을 눌러 해당 공지사항 전부 탭하여 이동이 되는지 확인한다. (웹 접근성) 을 위함이다.HTMLscript결과HTMLscript하위 img태그를 찾아서 attr 속
결과HTMLSCSSvideo 태그는 두가지 방식이 있다. autoplay 를 하려면 muted 까지 해야 실행이 된다.구글 검색창 'bootstrap' or '부트스트랩' 을 검색'문서' > '시작하기' 를 찾는다.빠른시작에서 html 을 복사하여 넣어준다.link
결과반응형 디자인 2-1에서는 모바일 메뉴를 만들고 left:100% 로 화면 영역 밖으로 빼네는 작업을 했고 오늘 그 메뉴가 나오는 모습까지 만들게 되었다. HTMLSCSSscriptleft로 -100% 가 있던 모바일 메뉴를 제이쿼리로 나오게 구현하였다. 하지만 모
결과HTMLSCSS모바일 720px 사이즈로 메뉴바를 먼저 제작하였다. left 100%를 벗어난 영역에서 나타나는 효과를 만들기 위해 position: fixed; , display: none; , left: -100% 를 적용한다. left: -100% 로 나간 모
결과HTMLCSSfavicon 은 웹페이지 탭화면에 title과 함께 나오는 웹페이지 아이콘이다.https://www.favicon-generator.org/ 에 들어간다.넣고자 하는 아이콘의 이미지를 선택하고 첫번째 선택란은 1번을 선택한다. 웹, 태블릿,
HTMLCSS결과HTMLCSSScriptCSS에 javascript로 적용하기 위해 .shrink라는 클래스를 classList를 사용하기 위해 넣어 두었다.스크롤이 내려가면 로고가 바뀌어야 하므로 변수를 지정하고 변할 img 파일 경로를 넣어둔다.조건문을 만들어 sc
지난 1-1 header 영역 이어서 제작한다.HTMLCSSScript뉴스 부분 호버하면 멈추고 마우스를 떼면 뉴스가 하단에서 숨겨진 상태로 계속 슬라이드 된다.결과결과HTMLCSSScript결과HTMLCSSJavaScript 로 구현JQuery 로 구현
반응형 페이지 제작 1-1 > 이번 시간에는 제플린을 사용하여 반응형 페이지를 제작한다. 제플린이란? > ### 제플린을 쓰는 이유 이미지 슬라이스 사용이 편리하다. 텍스트 선택시 폰트 정보가 다 나온다. CSS로 나오는데 필요한 부분만 셀렉해서 사용하는 것을