![]()
사이트 메인페이지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-..
![]()
패럴랙스 사이드메뉴 페럴랙스 효과는 스크롤을 내리면서 알맞은 스크롤의 위치에서 효과가 생기는 것을 말합니다. info 사이드에 있는 스크롤 바에 버튼을 클릭했을 때 이동하도록 a의 인자값을 불러왔습니다. 하지만 저희는 부드럽게 이동시키기 위해서 a의 역할을 해지시키도록 preventDefault 메서드를 사용하여 억제하였고 href 속성에 부드럽게 이동하는 behavior 속성을 사용하여 보내주었습니다. 메뉴바 이동을 부드럽게 해주기 //스크롤이동 document.querySelectorAll("#parallax__dot a").forEach(el => { el.addEventListener("click", e => { e.preventDefault(); console.log(e) document.que..
![]()
TEXT-Animation 텍스트 애니메이션을 만들어 보았습니다. See the Pen Text Animation by thdtjdgml415 (@thdtjdgml415) on CodePen. 애니메이션 스트로크의 간격을 조절하여 애니메이션을 만들어 보았습니다. svg
![]()
CSS 애니메이션 활용 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션 끝나고 난 뒤 어떤 값을 적용할지 설정합니다. animation-play-state 애니메이션 실행 상태를 설정합니다. 종류 예시 transition-property 트렌지션을 적용..
![]()
SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형(rect) svg 원형(circle, elli..
![]()
패럴랙스 효과 페럴랙스 효과는 스크롤을 내리면서 알맞은 스크롤의 위치에서 효과가 생기는 것을 말합니다. scollTop scrollTop 속성을 이용해서 자신이 보고있는 window환경에서의 위치를 구합니다. scrollTop보기 window.addEventListener("scroll", () => { // let scrollTop = window.pageYOffset; // let scrollTop = window.scrollY; // let scrollTop = document.documentElement.scrollTop; let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; //한번에 ..
Prettier vscode를 좀 더 편하게 사용하기 위해서 다양한 기능을 추가할 수 있습니다. 오늘은 다양한 기능 중에서 저장하면 자동정렬이 되는 Prettier를 설치하는 방법을 알아보겠습니다. Prettier 적용하기 1. 우선 Extention에 들어가서 prettier을 다운받아 줍니다. 2. 다운이 완료되었다면 vscode를 껏다 켜주시고 밑에 prettier가 적용 되고있는지 확인합니다. 3. 적용이 되어있다면 Ctrl + s 를 눌렀을때 자동정렬이 되는지 확인합니다. 4. 정렬이 되지 않는다면 setting에 들어가서 editor format on save를 검색해 줍니다. 5. editor format on save의 체크박스를 체크해 줍니다. (그리고 다시 작동되는지 확인) 6. 그래도..
![]()
] mouseenter / mouseover 차이 mouseenter ✔JS 에서는 Explorer전용 이벤트이나 jQuery 에서는 브라우져를 고려하지 않고 작동이 되도록 구성요소에 마우스 포인터가 진입하면 발생오로지 자기 자신에게 마우스 포인터가 와야만 발생 합니다. mouseover ✔직접 이벤트를 걸지 않은 자식요소에 마우스 포인터가 와도 발생합니다. 주로 아래와 같이 짝을 이루어 사용한다. mouseOver mouseOut mouseEnter mouseLeave MouseOver와 MouseEnter 차이 두 이벤트를 유사하지만 이벤트 전파(event propagation)와 취소 가능성(cancelable)에 큰 차이가 있다. mouseOver/mouseOut는 이벤트가 발생할 때 버블링이 일..
![]()
슬라이드타입 홈페이지에 이미지를 삽입하고 여러 내용을 넣을 수 있는 영역입니다. 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..
![]()
attr()관련 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. jQuery class형식은 다음과 같습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://icoxpublish.com").attr("target", "_blank"); $("a").attr({"href": "http://icoxpublish.com", target:"_blank"}); 콜백 함수 $("a").attr("href", function(index, h){ //index는 각 a 요소의 index 0, 1, 2 //h는 각 a 요소 href 속성1 return attribute(속성) // 각 a 요소의 속성을 생성 및..
![]()
class관련 메서드 요소에 class 속성을 추가합니다. jQuery class형식은 다음과 같습니다. 실행 분류 형식 추가 $("div").addClass(클래스명); 콜백 함수 $("div").addClass(function)index, className){ //index는 각 div 요소의 0, 1, 2 //className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가합니다. )} ..... 내용1 내용2 내용3 JQuery를 사용한 예제 입니다. $(document).ready(function () { $("#m1 > div").addClass("box"); $("#m2 > div").addClass(function(index){ retur..
![]()
스타일 관련 메서드 CSS() 메서드 CSS 관련 요소를 컨트롤 할 수 있는 메서드입니다. 실행 분류 형식 취득 $("div").css("width"); 생성, 변경 $("div").css("background-color", "red").css("padding", "10px") $("div").css({background-color: "red", padding: "10px"}) 콜백 함수 $("div").css("width", function(index, .w) { //indexs는 각 div 요소의 index0,1,2 //w는 각 div 요소의 width 값 return css 속성// 각 div 요소의 css 속성을 변경합니다. }); .... 내용 내용 내용 css()를 사용한 예제 입니다. $(d..
![]()
슬라이드 이펙트 - 이미지 추가하기 이번 슬라이드는 이미지가 왼쪽으로 순서대로 나열 되어있고 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; }..
![]()
jQuery 필터 선택자 jQuery는 html요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. jQuery 선택자 형식은 다음과 같습니다. $("선택자") $("#gnb") 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀 수 행만 선택합니다. :first $("td:first") 첫 번째 td 요소를 선택합니다. :last $("td:last") 마지막 td요소를 선택합니다. :header $(":header") 헤딩 (h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li 요소를 선택합니다. index는 0번이 첫 번쨰 요소 입니다. :gt() $("..
![]()
jQuery속성 선택자 속성을 선택하는 선택자를 알아보도록 하겠습니다. jQuery 속성 선택자 형식은 다음과 같습니다. 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span=[class='abc']") span 요소중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']) span 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소~='값' $("span[class~='abc']") span요소 중 class가 'abc'를 포함하는 요소를 선택합니다. 'abc' 앞뒤로 연결된 문자가 없어야 합니다. 'bg abc'는 선택되나 'bg..
![]()
jQuery 기본 탐색 선택자 jQuery는 html요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. jQuery 탐색 선택자는 다음과 같습니다. 선택자 종류 설명 children() $("div").children() div 요소의 자식요소를 선택합니다. parent() $("p").parent() p요소의 부모 요소를 선택합니다. parents $("p").parents("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closest("div") p요소의 부모가 되는 첫 번째 div요소를 찾습니다. next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").ne..
![]()
jQuery 선택자 jQuery는 html요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. jQuery 선택자 형식은 다음과 같습니다. $("선택자") $("#gnb") 선택자 종류 설명 태그선택자 $("p") p 요소를 선택합니다 id선택 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb>ul>li") #gnb 하위에 있는 모든 li요소를 선택합니다. 하위 선택자 $("#gnb ul") #gnb 하위에 있는 모든 ul 요소를 선택합니다. 인접 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소를 선택합니다. 종속 선택자 $("div.uti..
![]()
제이쿼리를 배우기 위한 사전지식 제이쿼리는 자바스크립트 라이브러리이므로, 자바스크립트 언어에 대한 기초 지식이 필요합니다. 또한, HTML 요소을 선택하고, CSS 스타일을 변경하는 등 HTML과 CSS와도 많은 연관이 있습니다. 따라서 제이쿼리르 배우기 전에 HTML과 CSS의 사전 지식이 필요합니다. 제이쿼리(jQuery)란? 제이쿼리(Jquery)는 오픈소스의 자바스크립트 라이브러리 입니다. 자바스크립트를 웹사이트에서 더욱 쉽게 사용할 수 있도록 도와줍니다. 제이쿼리의 장점 1. 제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원됩니다. 2. HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있습니다. 3. 애니메이션 효과나 대화형 처리를 간단하게 ..
![]()
텍스트유형 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..
![]()
CSS 요소를 숨기는 5가지 방법 요소를 숨기는 방법이 5가지가 있습니다. 각각 방법이 조금씩 다르고 특징이 있습니다. 1. display: none; (애니메이션 X, 영역X) *{ display: none; } /*전체 요소를 표시하지 않습니다.*/ 2. opacity: 0; (애니메이션 O 영역 O) *{ opaccity: 0; } /*전체 요소의 투명도를 0으로 설정합니다. 애니메이션으로 사용하여 나타낼 수도 있습니다. */ 3. visible: hidden; (애니메이션 X, 영역X) *{ visibility: hidden; } /*전체 요소를 표시하지 않습니다. 애니메이션으로 사용하여 나타낼 수도 있습니다. */ 4. transform: scale(0); (애니메이션 O, 영역X) *{ tra..
![]()
퀴즈 이펙트 - 객관식 (여러문제 슬라이드) 결과 확인하기 자바스크립트를 이용해 다중문제가 나오도록 설정하였고 for문, forEach문을 사용해 코드를 효과적으로 사용하였습니다 또한 문제를 풀고 정답 확인 버튼을 누르면 맞은 문제 갯수와 틀린문제 갯수를 출력하도록 하였습니다. 문제 출력하기 템플릿 리터럴을 사용하여 ${}속에 변수를 지정하였습니다. . 또한 각각 칸에 알맞게 변수명을 집어넣어 정보를 입력하였습니다. 문제출력코드 //문제출력 const quizQuestion = document.querySelector(".quiz__question"); //문제 번호, 질문 const quizSelects = document.querySelector(".quiz__selects") const quizTy..
