Parallax Effect 03 Parallax Effect 03 스크롤을 내릴 때엔 메뉴 버튼들이 위로 올라가지만 스크롤을 위로 올리면 메뉴가 다시 내려오는 법과, 스크롤을 끝까지 내렸을 시, TOP 버튼이 나와 위쪽으로 올라가게 하는 이펙트를 배워보았습니다. 01. HTML 페럴렉스 메뉴들이 다시 돌아왔습니다. 그리고 TOP 버튼이 추가 되었습니다. 👾 HTML 의 코드 보기 메뉴 1 메뉴 2 메뉴 3 메뉴 4 메뉴 5 메뉴 6 메뉴 7 메뉴 8 메뉴 9 Top 02. Css 메뉴는 똑같아, 딱히 추가는 안하며 TOP만 보여드리겠습니다. 👾 CSS의 코드 보기 #parallax__top { position: fixed; left: 50%; bottom: -220px; z-index: 10000; transform: translate.. 2022. 9. 12. Parallax Effect 02 Parallax Effect 02 슬라이드를 할 때 사이드 버튼이 active 되는 것과, 버튼을 눌렀을 시 부드럽게 움직이는 이펙트를 제작하였습니다. 먼저 기본 사이트를 제작하는 법 이후, Parallax 사이트를 만들 때 사용하는 메서드나 스크립트를 알려드리겠습니다. 01. HTML 이름을 가졌던 메뉴들이 이번엔 dot으로 변했습니다. 그것을 span으로 감싸, 텍스트가 나오지 않게 만들어줍니다. 🦠 HTML 의 코드 보기 메뉴 1 메뉴 2 메뉴 3 메뉴 4 메뉴 5 메뉴 6 메뉴 7 메뉴 8 메뉴 9 02. Css dot들이 구조나 active가 되었을 때 어떻게 변하는지 css로 작성했습니다. 또한, 선택되었을 때엔 애니메이션을 줍니다. 🦠 CSS의 코드 보기 #parallax__dot { pos.. 2022. 9. 8. 애니메이션 만들기 뚜벅뚜벅 나의 길을 걷는다. 애니메이션 Start Stop css 보기 .step { height: 700px; background: #3b0670; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(https://github.com/Packsunhye/coding/blob/main/aniamation/img/20220907_GIP.jpg?raw=true); border-radius: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: ani 1.4s steps(31, start) infinite; .. 2022. 9. 8. css intro css intro animation 속성 animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 종류 설명 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill.. 2022. 9. 8. SVG animation SVG animation 텍스트 애니메이션을 준비해보았습니다. See the Pen Untitled by Packsunhye (@packsunhye) on CodePen. html svg viewBox="0 0 1320 300"> 해파리 2022. 9. 8. SVG Intro SVG Intro 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 예제 보기 사각형(rect) svg 원.. 2022. 9. 8. Parallax Effect 01 Parallax Effect 슬라이드를 할 때 버튼이 active 되는 것과, 버튼을 눌렀을 시 부드럽게 움직이는 이펙트를 제작하였습니다. 먼저 기본 사이트를 제작하는 법 이후, Parallax 사이트를 만들 때 사용하는 메서드나 스크립트를 알려드리겠습니다. 01. HTML active를 줄 메뉴 버튼들과, 각 글귀가 적힌 section와 배경으로 사용할 이미지를 감싸는 박스가 필요합니다. 🐟 HTML 의 코드 보기 메뉴 1 메뉴 2 메뉴 3 메뉴 4 메뉴 5 메뉴 6 메뉴 7 메뉴 8 메뉴 9 01 section1 인간은 패배하도록 만들어진 것은 아니다. 인간은 파괴될 지언정 패배할 수는 없다. 02 section2 사막이 아름다운 것은, 어디엔가 샘을 숨기고 있기 때문이야 03 section3 성공 .. 2022. 9. 6. 슬라이드 유형 01 슬라이드 유형 01 버튼을 눌렀을 때 슬라이드가 가능한 유형을 제작해보았습니다. 01. figma 간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다. 02. HTML HTML 입니다. 슬라이드 유형은 사용할 svg 와, 이미지와 글씨가 있습니다. 슬라이드 영역 DEVELOPER CAT PROJECT 고양이들이 가득 있어요 구경해주세요! 여러 종과 여러 색상이 있답니다. 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 03. css 글자색이라던가, 크기만 조정해주면 푸터 타입은 완성입니다. .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { background: url(../.... 2022. 9. 5. 배너 유형 01 배너 유형 01 01. figma 간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다. 02. HTML HTML 입니다. 배너 타입은 그저 이미지 위에 글씨만 올리는 타입이라 html도 간단합니다. 배너 영역 고양이 사이트 세상에서 귀여운 고양이들을 알리기 위해 만든 사이트 입니다. 다들 고양이 자랑과 이미지 보고 가세요. 배너 유형 01 03. css 글자색이라던가, 크기만 조정해주면 배너타입은 완성입니다. .banner__inner { background-image: url(../../../bannerType/img/banner_bg01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; t.. 2022. 9. 5. 푸터 유형 01 푸터 유형 01 01. figma 간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다. 02. HTML HTML 입니다. 푸터 타입은 정말 간단하게 텍스트만 있어 글씨만 나눠주면 됩니다. 푸터 영역 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형01 메뉴 유형02 슬라이드 영역 슬라이드 유형01 슬라이드 유형02 이미지 영역 이미지 유형01 이미지 유형02 이미지/텍스트 유형01 이미지/텍스트 유형02 텍스트 유형01 컨텍츠 영역 카드 유형01 카드 유형02 카드 유형03 푸터 영역 푸터 메뉴 유형01 푸터 컨택트 유형02 푸터 이메일 유형03 2022 Manyong. Portfolio is Power All rights reserved. 03. css 글자.. 2022. 9. 5. 마우스 이펙트 01 마우스 이펙트 01 마우스의 위치를 알려주며, 특정 위치 위에 마우스를 hover 하였을 때 커서가 변화하는 이펙트를 제작하였습니다. 01. HTML 글귀에 마우스 포인터가 올라가 있을 때, 반응을 주기 위해 span으로 p 태그를 감쌌습니다. Numbing the pain for a while will make it worse when you finally feel it. 고통을 잠시라도 모른 척하면, 나중에 정말 고통을 느낄 때 더 악화되는 법이란다. clientX : 0 px clientY : 0 px offsetX : 0 px offsetY : 0 px pageX : 0 px pageY : 0 px screenX : 0 px screenY : 0 px 02. javascript clientX, c.. 2022. 9. 5. mouseenter | movesover 의 차이점 mouseenter | movesover 의 차이점 mouseOver or mouseOut : 지정된 태그 요소(혹은 자신)는 물론이며, 자식 요소가 있다면 해당 자식요소의 영역까지 포함됩니다. mouseEnter or mouseLeave : 지정된 태그 요소(혹은 자신)의 영역에만 해당되며, 만약 자식요소가 있다면 해당 자식요소의 영역은 제외됩니다. 이를 더 쉽게 표현하기 위해 코드펜으로 예시를 가져와 보았습니다. See the Pen 0905 by Packsunhye (@packsunhye) on CodePen. 01. mouseover | mouseout 이벤트 1번의 경우는 마우스를 우선 회보라색 div 범위내에 올리면 p 태그로 감싸여 있는 글씨 부분의 배경이 보라색으로 변하는걸 확인하실 수 있.. 2022. 9. 5. Prettier 설정하는 법 | vscode ctrl + s 만으로 정렬하는 법 급하게 쓰다 보면 불편하게 있는 코드들. . . 방법이 없을까 찾아보다가 발견한 Prettier 라는 좋은 방법이 있다는 걸 알았습니다. vscode 에서 install 이 가능하므로 검색 한 뒤 찾아서 깔아봤습니다! 두근 거리며 ctrl + s를 누르고, 정렬될 모습에 신나 하고 있었지만 . , , 어라...? 안된다 ❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗ 왜 그런지 찾아보니, 깔기만 해서 안되는 거였다. . . 우선 세팅에 들어가, editor format on save 를 검색 한 후 체크 해주고, 또 F1 을 누른 뒤 JSON 을 검색 후 이걸 눌러 작성하거나 변경해줘야 하는게 있다. 이 귀찮은 짓들을 끝내면 , ... ctrl + s 만으로 깔끔하게 정렬 가능!! 그러나 , .. 2022. 9. 5. jQuery 스타일 메서드 jQuery 스타일 메서드 attr() 메서드 실행 분류 형식 취득 $("div").attr("width") 생성, 변경 $("div").css("background-color" , "red").css("padding" , "10px"); $("div").css({ background-color : "red" , padding : "10px"}); 콜백함수 $("div").css("width" ,function(index,.w){ //index는 각 div 요소의 index 0,1,2 //w 각 div 요소 width 값 return css 속성 // 각 div 요소의 css 속성을 변경합니다. }); .... 내용 내용 내용 위의 예시를 사용하여 jQuery를 사용해보았습니다. See the Pen j.. 2022. 9. 3. jQuery 속성 메서드 jQuery 속성 메서드 attr() 메서드 실행 분류 형식 취득 $("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 속성 return attribute 속성 // 각 a 요소의 속성을 생성 및 변경합니다. }); .... 다음 네이버 네이트 위의 예시를 사용하여 jQuery를 사용해보았습니다. See the.. 2022. 9. 3. jQuery 클래스 메서드 jQuery 클래스 메서드 addClass() 메서드 실행 분류 형식 추가 $("div").addClass("클래스명") 콜백 함수 $("div").addClass(function(index,className){ //index는 각 div 요소의 index 0,1,2 //className은 각 div class 속성 return class 속성 // 각 div에 class 속성을 추가합니다. }); .... 내용1 내용2 내용3 위의 예시를 사용하여 jQuery를 사용해보았습니다. See the Pen Untitled by Packsunhye (@packsunhye) on CodePen. 🐳 jQuery 클래스 메서드의 코드만 보기 $(document).ready(function(){ $("#m1 > d.. 2022. 9. 3. 이미지 슬라이드 유형 03 이미지 슬라이드 유형 03 setInterval()를 이용하여 몇 초마다 5개의 이미지가 변하는 유형을 제작하였습니다. 01. HTML 첫번째 sliderEffect의 HTML과 비슷하지만 이미지를 가로로 연결하여 좌로 움직이는 것이기 때문에, 보이기 위한 박스를 만들어 이미지 위에 감쌌습니다. 02. css width값을 4800으로 늘려 복사 붙여넣기 하였을 때 자연스러우도록 하였습니다.. /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; widt.. 2022. 9. 2. 헤더 사이트 헤더 사이트 헤더 유형의 웹사이트를 디자인 해보았습니다. 01. figma 간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다. 02. HTML HTML 입니다. css에서 작업을 display : flex 으로 작업을 할 예정이기 때문에 구조를 잘 잡아야 합니다. CAT site 헤더 영역 슬라이드 영역 배너 영역 콘텐츠 영역 푸터 영역 로그인 03. css 공통된 요소가 있으므로 그것을 제외한 뒤 작성하였습니다. .header__inner { width: 100%; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-sizing: border-box; border-b.. 2022. 9. 1. 텍스트 / 이미지 사이트 텍스트 / 이미지 사이트 텍스트와 이미지 사이트 유형의 웹 사이트를 디자인 해보았습니다. 01. figma 간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다. 02. HTML HTML 입니다. css에서 작업을 display : flex 으로 작업을 할 예정이기 때문에 구조를 잘 잡아야 합니다. 깜찍발랄 고양이는 알아보기 이미지 텍스트 유형 01 멋있는 고양이 알아보기 고양이 집사, 예비 집사, 인터넷 집사를 위한 사이트 입니다. 털매끈 사이트 발바닥 사이트 귀쫑긋 사이트 낮잠 사이트 맹수 사이트 깜찍한 사이트 귀 쫑긋 사이트 맹수 사이트 03. css 공통된 요소가 있으므로 그것을 제외한 뒤 작성하였습니다. .imgText__inner { display: flex; justify-content: .. 2022. 9. 1. 요소 크기 메서드 정리 요소 크기 메서드 정리 요소의 크기나 위치 속성이나 메서드를 알려주는 자바스크립트와 제이쿼리를 알려드리겠습니다. 01. 요소의 가로값 | 세로값 : 패딩/보더/마진 미포함 //하려는 방법 const x = document.querySelector(".class") document.querySelector(".class").innerHTML = x.clientWidth or clientHeight //가로값 or 세로값 02. 요소의 X축값 | Y축값 : 부모기준 //하려는 방법 const x = document.querySelector(".class") document.querySelector(".class").innerHTML = x.clientLeft or clientTop //X축값 or Y축값 0.. 2022. 9. 1. 텍스트 사이트 03 텍스트 사이트 03 텍스트와 아이콘을 활용하여 웹 사이트를 디자인 해보았습니다. 01. figma 간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다. 이때, 스프라이트로 아이콘을 작업해줄꺼기 때문에 이미지 스프라이트로 준비하였습니다. 02. HTML HTML 입니다. css에서 작업을 display : flex 으로 작업을 할 예정이기 때문에 구조를 잘 잡아야 합니다. 스터디 후기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자 멤버를 소개합니다. 불과 3달전만해도 여러 원인들로 인해 자존감이 및바닥이였던 저에게 이 스터디는 너무 소중한 시간이었어요. 매일 마음속으로 울고싶다를 외치던 저였는데 이제는 조금이나마 이겨 낼 수 있을 것 같네요. 다음에 선생님 만났을 때는 많이 발전해 있는 제가 되었으면 좋.. 2022. 8. 31. 텍스트 사이트 02 텍스트 사이트 02 텍스트와 아이콘을 활용하여 웹 사이트를 디자인 해보았습니다. 01. figma 간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다. 이때, 스프라이트로 아이콘을 작업해줄꺼기 때문에 이미지 스프라이트로 준비하였습니다. 02. HTML HTML 입니다. css에서 작업을 display : flex 으로 작업을 할 예정이기 때문에 구조를 잘 잡아야 합니다. CUTE CAT 고양이가 깜찍하다고 그 이유를 한번씩 알아봅시다 이유를 알 수록 빠져들거에요. 귀가 쫑긋 거린다 쫑긋 거리는 귀는 만지면 만질 수록 짜증을 나타내지만 그래도 그게 너무 귀여워서 참을 수 없다 뒤집으면 팔랑거려요 발바닥이 말랑거린다 고양이의 발바닥은 마치 라이크 젤리이다. 그 젤리를 만져보았나요? 맬렁맬렁하지만 역시 바.. 2022. 8. 31. 텍스트 사이트 01 텍스트 사이트 01 텍스트와 아이콘을 활용하여 웹 사이트를 디자인 해보았습니다. 01. figma 간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다. 이때, 스프라이트로 아이콘을 작업해줄꺼기 때문에 이미지 스프라이트로 준비하였습니다. 02. HTML HTML 입니다. css에서 작업을 display : flex 으로 작업을 할 예정이기 때문에 구조를 잘 잡아야 합니다. 텍스트 유형 01 고양이가 귀여운 이유들 털이 부드럽다 고양이는 아주 보드라운 털을 말랑거리는 살 위에 덮어져있다. 한번도 만져보지 못한 사람은 있어도 한번만 만지는 사람은 없다 더보기 귀가 쫑긋 거린다 쫑긋 거리는 귀는 만지면 만질 수록 짜증을 나타내지만 그래도 그게 너무 귀여워서 참을 수 없다 뒤집으면 팔랑거려요 더보기 햇빛을 즐.. 2022. 8. 31. jQuery 탐색 선택자 jQuery 탐색 선택자 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("div").parents() p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closest() p 요소의 부모가 되는 첫번째 div 요소를 선택합니다. next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").nextAll() div.m 요소의 다음 모든 요소를 선택합니다. nextUtil() $("div.m").nextUtil("p") div.m 요소의 다음 요.. 2022. 8. 31. jQuery 필터 선택자 jQuery 필터 선택자 선택자 종류 설명 :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() $("li:gt()") index가 0보다 큰 li요소들을 선택합니다. :lt() $("li:lt(2)") index가 2보다 작은 li요소들을 선택합니다. :not() $("li:not(.bg)".. 2022. 8. 31. jQuery 속성 선택자 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_abc'는 선택되지 않습니다. 요소[속성*='값.. 2022. 8. 31. jQuery 기본 선택자 jQuery 기본 선택자 jQuery 선택자는 CSS3 파트에서 학습한 CSS 선택자와 의미가 같은 것이 많이 있습니다. 그러므로 차근히 알아가보겠습니다. jQuery 기본 선택자의 형식은 다음과 같습니다. $("선택자") | $("#gnb") 선택자 종류 설명 태그 선택자 $("p") p 요소를 선택합니다. id 선택자 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo 요소를 선택합니다. 자식 선택자 $("#gnb >ul >li") #gnb의 자식 요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul요소를 선택합니다. 인접 선택자 $("#visual + #content") #visual 다음에 오는 #co.. 2022. 8. 31. jQuery 개념 정리 jQuery 개념 정리 제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다. 01. 사용법 01-1 ) 기존의 style이나 js 링크처럼 GSAP에서 script 링크를 가져와, 선택자등을 쉽게 가져올 수 있게 만들어줍니다. (CDN 방식) //적용방식 01-2 ) 다운로드 방식입니다. 홈페이지로 가 제이쿼리를 다운 받을 수 있습니다. //적용방식 사이트 가기 02. 자바스크립트와 jQuery의 비교 //javascript const sliderInner = document.querySelector(".보여지는_곳") const slider = document.querySelectorAll(".이미지") let currentIndex = 0; sliderInner.style.tran.. 2022. 8. 29. GSAP 개념 정리 GSAP 개념 정리 The GreenSock Animation Platform (줄여서 GSAP)는 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 타임라인기반의 애니메이션 자바스크립트 라이브러리입니다. 01. 사용법 기존의 style이나 js 링크처럼 GSAP에서 script 링크를 가져와, 애니메이션을 쉽게 적용할 수 있게 만들어줍니다. 02. 자바스크립트와 GSAP의 비교 //javascript const sliderInner = document.querySelector(".보여지는_곳") const slider = document.querySelectorAll(".이미지") let currentIndex = 0; sliderInner.style.transition = "all 0.8s" se.. 2022. 8. 29. 이미지 슬라이드 02 이미지 슬라이드 유형 01 setInterval()를 이용하여 몇 초마다 5개의 이미지가 변하는 유형을 제작하였습니다. 01. HTML 첫번째 sliderEffect의 HTML과 비슷하지만 이미지를 가로로 연결하여 좌로 움직이는 것이기 때문에, 보이기 위한 박스를 만들어 이미지 위에 감쌌습니다. 02. css 가로로 연결하기 위해 position: relative를 부여하고, 원하는 영역만 보기 위해 overflow: hidden으로 가렸습니다. .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모 : 움직이는 부분 .. 2022. 8. 29. 이전 1 2 3 4 5 6 다음
