![]()
슬라이드 이펙트 - 좌로 움직이기(연속적) 이번에 만들어볼 슬라이더 유형은 버튼을 클릭했을때 움직이고 이미지가 반복되는 형태를 만들어보려고 합니다. Javascript CSS를 사용하여 버튼을 만들고 버튼을 클릭하면 사진의 폭 X축으로 이동시켜 다음 사진이 나오도록 하였습니다. currentIndex라는 변수를 만들어서 0으로 설정하고 움직이는 영역인 sliderInner를 currentIndex가 변화하는 값에 맞춰서 변화할 수 있도록 만들었습니다. 선택자를 sliderBtnPrev, sliderBtnNext로 각각 설정하고 위에서 currentIndex의 값에 맞춰서 이미지가 움직이도록 하였기 떄문에 왼쪽 버튼과 오른쪽 버튼을 클릭 했을떄 이미지가 움직이도록 만들기 위해 메서드를 사용합니다. 또한 처..
![]()
사이트 메인페이지01 사이트 메인 페이지를 만들어 보았습니다. 반응형 작업까지 같이 해주었습니다. 화면크기를 줄여서 확인도 같이 해보시겠습니다. CSS CSS는 링크로 연동해서 headerType, sliderType, imageType, cardType, textType, footerType 으로 각각 나누어서 작업하였습니다. headerType입니다. 헤더에 메뉴를 추가했습니다. 자바스크립트와 연동해서 만들었습니다. headerType /* headerType */ .header__inner { width: 100%; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-..
![]()
슬라이드타입 홈페이지에 이미지를 삽입하고 여러 내용을 넣을 수 있는 영역입니다. CSS .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { background: url(../img/SLIDER_TYPE01.png) no-repeat center / cover; } .slider__img .desc { width: 1160px; margin: 0 auto; padding: 100px 20px; } .slider__img .desc span { font-size: 16px; background-color: #fff; padding: 1px 14px 0 14px; margin-bottom: 10px; text-t..
![]()
헤더유형 사이트만들기 사이트 유형중 헤더 유형을 만들어 보았습니다. HTML입니다. 다른 영역과 겹치지 않도록 header를 사용하여 작업하였습니다. 로그인 박스도 만들어 주었습니다. 다양한 배너를 넣을 수도 있습니다. 로고도 작업하였습니다. HTML website 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 CSS /* headerType */ .header__inner { width: 100%; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid #ccc; positio..
![]()
푸처유형 사이트만들기 사이트 유형중 가장 밑에 있는 footer유형을 만들어 보았습니다 피그마 HTML website 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 CSS /* headerType */ .header__inner { width: 100%; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid #ccc; position: fixed; left: 0; top: 0; background: rgba(255, 255, 255, 0.993); backdrop-filter:..
![]()
배너타입 홈페이지에 큰 띠를 만들어 광고를 넣을 수 있는 영역입니다. CSS /* 여백 초기화 */ body, div, dl, dd, dt, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, fieldset, form, legend, p, blockquote, th, td, input, button, figure, figcaption{ margin: 0; padding: 0; } /* 시멘틱 태그 초기화 */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /* font 초기화 */ body, button, input, sele..
![]()
슬라이드 이펙트 - 이미지 추가하기 이번 슬라이드는 이미지가 왼쪽으로 순서대로 나열 되어있고 x축으로 움직여서 이미지를 나타내는 방식입니다. 또한 마지막에 첫번째 이미지가 다시나오고 초기화를 시켜서 끊기지 않고 자연스럽게 이미지가 다시 시작하도록 구현하였습니다. Javascript html과 css는 이전과 동일하지만 끝에 이미지를 첫번째 이미지가 나오도록 다시 추가하고 거기서 count를 초기화시켜서 다시 첫번째 이미지부터 시작하도록 하였습니다. javascript 보기 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //보여지는 영역 con..
![]()
슬라이드 이펙트 - 좌로 움직이기 이번 슬라이드는 이미지가 왼쪽으로 순서대로 나열 되어있고 x축으로 움직여서 이미지를 나타내는 방식입니다. 이번에는 다양한 식으로 만들어 보았습니다. 한번 보시죠! Javascript 자바스크립트로 구성되어있는 코드입니다. setInterval을 사용하여 반복하였습니다. 슬라이드의 길이를 구성하고 정해서 이미지 갯수가 변해도 모든 이미지가 출력 될 수 있도록 하였습니다. javascript 보기 gsap GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. 자바스크립트로 구현하기 어렵고 까다로운 것들을 패키지로 만들어 가져오기 편하게 만든 라이브러리입니다. gasp를 사용하려면 js링크를 불러오듯이 CDN의 절대 주소를 가져와서 만들면 된다. gs..
![]()
슬라이드 효과 슬라이드 효과를 만들어 보았습니다. CSS Javascript 입니다. setInterval() 메서드를 사용하여 작업하였습니다. currentIndex를 변수로 만들어 카운트를 해주는 방식을 사용하였습니다. 총 이미지는 5장이고 카운트 해서 5가 넘어가면 첫번째 이미지부터 다시 시작하도록 만들었습니다. setInterval은 시간을 1000 = 1초 이고 시간을 설정해 이미지가 넘어가는 시간을 설정할 수 있습니다. javascript 보기 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); const slider = slider..
![]()
헤더유형 사이트만들기 사이트 유형중 헤더 유형을 만들어 보았습니다. HTML입니다. 다른 영역과 겹치지 않도록 header를 사용하여 작업하였습니다. 로그인 박스도 만들어 주었습니다. 다양한 배너를 넣을 수도 있습니다. 로고도 작업하였습니다. HTML website 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 CSS /* headerType */ .header__inner { width: 100%; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid #ccc; positio..
![]()
이미지 / 텍스트유형 01번 이번에 만들어볼 사이트입니다. 이미지와 텍스트가 나열되어있는 타입입니다. 피그마를 이용하여 이미지를 만들어 작업하였습니다. CSS 이미지 텍스트 타입은 이미지와 텍스트를 나열시키고 배치하도록 작업하였습니다. .imgText__inner { display: flex; justify-content: space-between; } .imgText__inner>div { width: 32%; height: 500px; } .imgText__txt span{ font-size: 16px; color: #666; text-decoration: underline; text-underline-position: under; margin-bottom: 20px; display: block; }..
![]()
텍스트유형 03번 이번에 만들어볼 사이트입니다. 자세히보기가 들어가있는 형식의 사이트입니다. 피그마를 이용하여 이미지를 만들어 작업하였습니다. CSS 이미지를 백그라운드 효과 방식으로 삽입하였습니다. flex를 사용하고 justify-content를 사용하여 이미지를 정렬하였습니다. 자세히보기와 내용을 백그라운드 이미지 삽입 방식을 통해 이미지 위에 배치하였습니다. /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; ..
![]()
텍스트유형 02번 이번에 만들어볼 사이트입니다. 자세히보기가 들어가있는 형식의 사이트입니다. 피그마를 이용하여 이미지를 만들어 작업하였습니다. CSS 이미지를 백그라운드 효과 방식으로 삽입하였습니다. flex를 사용하고 justify-content를 사용하여 이미지를 정렬하였습니다. 자세히보기와 내용을 백그라운드 이미지 삽입 방식을 통해 이미지 위에 배치하였습니다. .nexon { font-family: 'NexonLv1GothicLow'; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, h2, h3, h4, h5, h6 { font-weight: norma..
![]()
텍스트유형 01번 이번에 만들어볼 사이트입니다. 자세히보기가 들어가있는 형식의 사이트입니다. 피그마를 이용하여 이미지를 만들어 작업하였습니다. CSS 이미지를 백그라운드 효과 방식으로 삽입하였습니다. flex를 사용하고 justify-content를 사용하여 이미지를 정렬하였습니다. 자세히보기와 내용을 백그라운드 이미지 삽입 방식을 통해 이미지 위에 배치하였습니다. /* font */ .nexon { font-family: 'NexonLv1GothicLow'; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, h2, h3, h4, h5, h6 { font-we..
![]()
이미지유형 03번 이번에 만들어볼 사이트입니다. 마우스를 이미지에 올리면 자세히보기와 설명이 나오는 방식을 사용하였습니다. 이번에는 grid방식을 사용하여 작업하였습니다.(flex방식을 사용하면 웹에서 이미지를 불러올때 한번에 불러오지 못해서 오류가 발생할 수 있기 때문입니다.) 피그마를 이용하여 이미지를 만들어 작업하였습니다. CSS img태그와 백그라운드 효과를 사용하여 이미지를 삽입하는 방식을 사용하였습니다. hover라는 css요소를 사용하여 마우스가 이미지에 올라가면 설명이 나오도록 작업하였습니다. 처음에 image__desc를 -100px로 위치시켜 보이지 않게하고 가상요소를 주어서 마우스가 이미지에 올라가면 0px로 바뀌도록하였습니다. 또한 opacity를 사용하여 투명도를 사용하여 효과를 ..
![]()
이미지유형 02번 이번에 만들어볼 사이트입니다. 마우스를 이미지에 올리면 자세히보기와 설명이 나오는 방식을 사용하였습니다. 피그마를 이용하여 이미지를 만들어 작업하였습니다. CSS img태그를 사용하여 이미지를 삽입하는 방식을 사용하였습니다. hover라는 css요소를 사용하여 마우스가 이미지에 올라가면 설명이 나오도록 작업하였습니다. 처음에 image__desc를 -100px로 위치시켜 보이지 않게하고 가상요소를 주어서 마우스가 이미지에 올라가면 0px로 바뀌도록하였습니다. /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); /* reset */ * { margin: 0; padding: 0; } a { t..
![]()
이미지유형 01번 이번에 만들어볼 사이트입니다. 자세히보기가 들어가있는 형식의 사이트입니다. 피그마를 이용하여 이미지를 만들어 작업하였습니다. CSS 이미지를 백그라운드 효과 방식으로 삽입하였습니다. flex를 사용하고 justify-content를 사용하여 이미지를 정렬하였습니다. 자세히보기와 내용을 백그라운드 이미지 삽입 방식을 통해 이미지 위에 배치하였습니다. /* font */ @import url('https://webfontworld.github.io/score/SCoreDream.css'); .score { font-family: 'SCoreDream'; } /* reset */ * { padding: 0; margin: 0; } a { text-decoration: none; color: ..
![]()
결과 카드유형03 이번 유형은 전체 레이아웃을 구성하고 card__inner, card__content, card__footer로 구성하여 사용하여 작업하였습니다 CSS 폰트는 import방식을 사용하여 에스코어드림 폰트를 사용하였습니다. 우선 오른쪽 칸에 선을 주어 적절하게 배치하였습니다. 그리고 알맞은 위치에 이미지와 내용을 배치하도록 했습니다. 사진에 들어가는 animal박스도 figcaption태그에 position을 card__header태그를 기준으로 잡고 배치하였습니다. 또한 웹 표준을 시멘틱 태그 뒤에는 무조건 제목이 와야하지만 눈에 보이지 않게 하기위한 설정을 넣어주었습니다. (네이버 사이트를 참고하였습니다.) /* fonts */ @import url('https://webfontwor..
![]()
결과 카드유형02 이번 유형은 카드가 추가되었습니다. 위쪽카드와 아래쪽 카드를 각각 card_top, card_bottom으로 나눠서 처리하였습니다. CSS css입니다. 폰트를 설정하고 초기 상태를 margin: 0;, padding: 0; 으로 설정합니다. img를 100%로 범위를 설정하고 container로 전체 범위를 설정하고 justify-content: space-between;로 비율대로 배열해주는 코드를 사용합니다. flex 속성과 float 속성을 같이 써 주었습니다. 전체 넓이를 정해주었기 때문에 일정한 넓이를 넘어가면 자동으로 다음 줄에 카드가 배치됩니다. 또한 카드들을 배치하고 화살표 박스를 피그마에서 불러오고 svg파일로 다운받아서 소스를 추가하였습니다. a태그는 인라인태그여서 ..
![]()
결과 카드유형02 이전보다 카드가 늘어나서 변수가 많아졌습니다. 또한 화살표박스도 생겼습니다. 추가된 소스들을 배치해 주도록 하겠습니다. CSS css입니다. 폰트를 설정하고 초기 상태를 margin: 0;, padding: 0; 으로 설정합니다. img를 100%로 범위를 설정하고 container로 전체 범위를 설정하고 justify-content: space-between;로 비율대로 배열해주는 코드를 사용합니다. .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%;..
