합니다, 개발공부📝 합니다, 개발공부📝

만든 반응형 웹사이트에는 애니메이션이 추가되어있지 않은데, 이를 수정하여 애니메이션이 작동되도록 추가해보자. 먼저 aos 라는 사이트에 들어가서 스크롤 애니메이션 코드를 받아야 한다. https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 여기서 다운로드한 파일에서 aos.css, aos.js파일을 프로젝트의 css, js 파일로 옮겨준다. 이후 main.js와 index.html파일에 aos구간을 추가하여 작동하도록 한다. 1. main.js 다음과 같은 구문을 추가해준다. (사용하기 위해서 인스턴스 생성) //AOS instan..

일반적인 웹사이트 사이즈에 대해서는 디자인을 맞췄지만, 여러가지 사이즈를 적용해보면 아래와 같은 식으로 전혀 반응하지 않음을 알 수 있다. 이러한 웹사이트를 사이즈에 따라서 잘 작동하도록 맞줘보자 . 1. main.js 일단 const responsive로 사이즈에 따라서 몇개의 아이템을 구성할 것인지, 설정해준다. owlcarousel 안에 responsive를 넣어서 실행한다. const responsive ={ 0:{ items:1 }, 320:{ items:1 }, 414:{ items:2 }, 1024:{ items:3 } } $(document).ready(function(){ $nav=$('.nav'); $toggleCollapse =$('.toggle-collapse'); /*click e..

페이지의 제일 말단부분을 작성한다. 4개의 영역으로 나누고, about-us, newsletter, follow, instagram을 각각 설정한 후, 하단부분에 copyright부분과 오른쪽중앙부분에 top버튼을 작성하여 클릭시 페이지의 상단부분으로 이동하도록 설정한다. 1. index. html About us Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, ullam sit at consectetur deserunt quae doloribus. Velit officia libero suscipit! Newsletter Stay update with our latest Instagram Follow us Let us be Social Co..

사이드바 생성을 위해서 카테고리를 만들어주고 그에 따른 정보를 넣어주도록 만들었다. 1. index. html 반복적 내용은 복사 붙여넣기 Category Software (05) Technology (02) Lifestyle (07) Shopping (01) Food (08) Popular Post Admin January 14, 2019 2 comments New data recording system to better analyse road accidents Admin January 14, 2019 2 comments New data recording system to better analyse road accidents Admin January 14, 2019 2 comments New data ..

블로그에 첫번째 게시물과 같은 형태를 띈 게시물을 여러개 작성하고 페이지의 맨아래에 페이지를 나타내도록 하자. 1. index. html 첫번째 게시물의 post content를 복사해서 horizontal line()만 추가하고 복사해주면 된다. Admin January 14, 2019 2 comments Why should boys have all the fun? it/s the women who are making india an alcohol-loving country. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique mollitia aliquam, ipsa necessitatibus ad nisi? Voluptatum ea..

글목록 아래에 기본적인 글 작성을 해본다. (프론트 엔드다 보니 실제로 글을 작성하는 것이 아닌, 그럴듯한 모양만 흉내낸다.) 1. index.html 각 섹션별로 나눠주고 그에 따른 클래스, division 이름을 정한다. 아이콘은 i 를 통해서 가져오고 사이에 공백을 주고 싶다면 를 이용해서 사이공간을 주도록 한다. Admin January 14, 2019 2 comments Why should boys have all the fun? it/s the women who are making india an alcohol-loving country. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique mollitia aliquam, i..

owl Carousel 을 이용해서 글목록 옆으로 넘기기를 작성하고, 화살표 아이콘 모양 변경하기 홈페이지에서 다운 받아서 owl.carousel.min.css 와 owl.theme.default.min.css파일을 css 폴더로 이동. owl.caousel.min.js는 js파일 폴더로 이동해준다. https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html Responsive Demo | Owl Carousel | 2.3.4 owlcarousel2.github.io 옆으로 넘기는 responsive 타입을 이용한다. 1. index. html Londeon Fashion week's continued the evolution Fashion 2 ..