본문 바로가기

Study137

CSS 애니메이션 6. 통통 튀는 글자 See the Pen Untitled by Youcodein (@youCodein) on CodePen. 2022. 9. 22.

CSS 애니메이션 5. 마우스 오버 애니메이션 See the Pen MouseHoverEffect by Youcodein (@youCodein) on CodePen. 2022. 9. 21.

CSS 애니메이션 4 - 웨이브 애니메이션 See the Pen Untitled by Youcodein (@youCodein) on CodePen. 2022. 9. 21.

패럴랙스 이펙트 5. 이질감 효과 (진행중) Javascript Parallax Effect parallax 이펙트 중 스크롤을 내리면 이미지와 텍스트가 움직여 이질적인 효과를 줍니다. 원본 사이트 보기 원본 소스 보기 핵심 포인트(진행중) HTML과 CSS코드에는 큰 차이가 없습니다. js코드를 중심으로 해설하겠습니다. 1. 진행중 HTML html 소스입니다. 01 section1 글에 위인의 초상화가 있고 위인의 이름이 쓰여있다고 해서, 인터넷에서 본 말을 아무거나 믿지 말라. 02 section02 비록 내일 지구의 종말이 온다 하더라도 나는 오늘 한 그루의 사과나무를 심겠다. 03 section03 그들이 죽음을 두려워하는 것이 이상합니다. 삶이 죽음보다 훨씬 더 아프다. 04 section04 모든 것이 변한다는 것을 깨달으면 붙잡으려 .. 2022. 9. 20.

vscode 에서 SCSS 설치 & 실행방법 2022. 9. 19.

슬라이드 이펙트 4. 버튼 눌러 넘기기 Javascript Slider Effect Slider 이펙트 중 버튼을 눌러 이미지를 옆으로 넘기는 효과입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. prev next CSS css 소스입니다. /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } /* 이미지 보이는 영역 */ .slider__img { position: relative; width: 800px; height: 450px; overflow: hidden; } .slider::before { position: absolute; left: 5px; to.. 2022. 9. 19.

사이트 제작 - 완성본 / 반응형 사이트 만들기 합본(진행중) 이때까지 배운 유형들을 활용하여 사이트를 만들었습니다. 원본 사이트 보기 원본 소스 보기 과정 1. 피그마로 레이아웃을 만듭니다. 2. 이때까지 만들어둔 유형들을 조합하여 사이트 코딩을 합니다. 각각의 유형별 코딩 방법은 링크를 참조해주세요. 1. 헤더 유형 2. 슬라이드 유형 3. 이미지 유형 4. 이미지/텍스트 유형 5. 카드 유형 6. 배너 유형 7. 텍스트 유형 8. 푸터 유형 또한 html과 css 소스 역시 소스보기를 통해 확인해주세요! 3. 반응형 작업을 합니다. 다른 종류의 디바이스에서도 사이트가 잘 작동할 수 있는지 확인하고 반응형 작업을 해줍니다. 3-2. 헤더가 깨지는 문제 발생 화면 크기를 줄였을 때 헤더의 글씨가 깨지는 문제가 발생합니다 문제 해결을 위.. 2022. 9. 19.

마우스 이펙트 2. 마우스 따라다니기 (GSAP) Javascript Mouse Effect Mouse 이펙트 중 GSAP을 이용한 마우스 따라다니기 효과입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. 멋있는 명언hoc quoque transibit멋있는 명언 멋있는 명언이 또한 지나가리라.멋있는 명언 CSS css 소스입니다. /* MouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; overflow: hidden; cursor: none; } .mouse__wrap p { font-size: 2vw; lin.. 2022. 9. 19.

패럴랙스 이펙트 4. 내용 나타나기 Javascript parallax Effect parallax 이펙트 중 내용 나타내기 유형입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. 01 section1 글에 위인의 초상화가 있고 위인의 이름이 쓰여있다고 해서, 인터넷에서 본 말을 아무거나 믿지 말라. 02 section02 비록 내일 지구의 종말이 온다 하더라도 나는 오늘 한 그루의 사과나무를 심겠다. 03 section03 그들이 죽음을 두려워하는 것이 이상합니다. 삶이 죽음보다 훨씬 더 아프다. 04 section04 모든 것이 변한다는 것을 깨달으면 붙잡으려 할 것이 없다. 05 section05 어떤 생각을 받아들이지 않고 즐겁게 할 수 있는 것은 교양 있는 정신의 표징이다. 06 section06 철학은 언제.. 2022. 9. 19.

패럴랙스 이펙트 3. 메뉴 나타나기 / 탑버튼 Javascript parallax Effect parallax 이펙트 중 숨김 메뉴/탑버튼 유형입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. 01 section1 글에 위인의 초상화가 있고 위인의 이름이 쓰여있다고 해서, 인터넷에서 본 말을 아무거나 믿지 말라. 02 section02 비록 내일 지구의 종말이 온다 하더라도 나는 오늘 한 그루의 사과나무를 심겠다. 03 section03 그들이 죽음을 두려워하는 것이 이상합니다. 삶이 죽음보다 훨씬 더 아프다. 04 section04 모든 것이 변한다는 것을 깨달으면 붙잡으려 할 것이 없다. 05 section05 어떤 생각을 받아들이지 않고 즐겁게 할 수 있는 것은 교양 있는 정신의 표징이다. 06 section06 철학은 .. 2022. 9. 19.

MySQL MySQL MySQL은 데이터베이스 소프트웨어입니다. 일반적으로 데이터를 추가하거나 검색, 추출하는 기능을 모두 포함해서 데이터베이스라고 부릅니다. MySQL은 세계에서 가장 많이 쓰는 오픈 소스의 관계형 데이터베이스 관리시스템(RDBMS)입니다. MySQL은 PHP 스크립트 언어와 상호 연동이 잘 되면서 오픈소스를 개발된 무료 프로그램입니다. 그래서 홈페이지나 쇼핑몰(워드프레스, Cafe24, 제로보드 그누보드)등 일반적으로 웹 개발에 널리 사용하고 있습니다. MySQL 설치 MAMP란 웹사이트를 개발할 때 쓰이는 기술 스택인 macOS, Apache, MySQL, PHP 의 약어이자 솔루션 스택이다. http://www.mamp.info/en/downlads/ MySQL 실행 윈도우 : cd MAMP.. 2022. 9. 15.

패럴럭스 이펙트 - 02. 사이드 메뉴 패럴랙스 이펙트 2 - 사이드 메뉴> 원본 사이트 보기 원본 소스 보기 패럴렉스 이펙트 사이드 메뉴 스크롤을 움직였을 때 사이드에 있는 점 모양의 메뉴에 변화가 생깁니다. 스크롤의 위치가 해당 섹션에 위치/사이드 메뉴의 점을 클릭하면 해당 섹션에 대응하는 사이드 메뉴의 점이 활성화됩니다. html 소스입니다 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 글에 위인의 초상화가 있고 위인의 이름이 쓰여있다고 해서, 인터넷에서 본 말을 아무거나 믿지 말라. 02 section02 비록 내일 지구의 종말이 온다 하더라도 나는 오늘 한 그루의 사과나무를 심겠다. 03 section03 그들이 죽음을 두려워하는 것이 이상합니다. 삶이 죽음보다 훨씬 더 아프다. 04 secti.. 2022. 9. 13.

CSS애니메이션 예시 CSS animation 만드는 방법 1. 애니메이션으로 만들고 싶은 이미지를 프레임 수만큼 가져옵니다.(연속되는 이미지로 가져와주세요) 2. 이미지들을 하나로 이어 붙입니다. 포토샵에서 (이미지의 너비) X (프레임 수) 만큼의 너비로 새 파일을 만들어서 순서대로 이어붙이시면 됩니다. 3. 그 이미지를 저장합니다. 4. 이 이미지를 CSS의 background를 이용하여 넣어줄 위치에 위치시킵니다. 5. 애니메이션효과를 부여합니다. 소스는 아래의 소스를 참고해주세요. HTML 소스 .step { height: 700px; background: #333; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(.. 2022. 9. 8.

SVG 애니메이션 예시 예시 See the Pen Text Animation by Youcodein (@youCodein) on CodePen. HTML HTML 소스입니다. Hello smile CSS CSS 소스입니다. @font-face { font-family: 'Tmon'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfont.. 2022. 9. 8.

애니메이션 - CSS CSS animation 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-fil.. 2022. 9. 8.

애니메이션 - SVG SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형(rect) 원형(circle, ellipse).. 2022. 9. 7.

패럴렉스 이펙트 - 1. 메뉴 이동 Javascript parallax Effect parallax 이펙트 입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. Javascript parallaxEffect01 패럴렉스 이펙트- 메뉴 이동 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 글에 위인의 초상화가 있고 위인의 이름이 쓰여있다고 해서, 인터넷에서 본 말을 아무거나 믿지 말라. 02 section02 비록 내일 지구의 종말이 온다 하더라도 나는 오늘 한 그루의 사과나무를 심겠다. 03 section03 그들이 죽음을 두려워하는 것이 이상합니다. 삶이 죽음보다 훨씬 더 아프다. 04 section04 모든 것이 변한다는 것을 깨달으면 붙잡으려 할 것이 .. 2022. 9. 6.

마우스 이펙트 - 마우스 따라다니기 Javascript mouse Effect MouseEffect중 마우스 따라다니기 입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. 멋있는 명언hoc quoque transibit멋있는 명언 멋있는 명언이 또한 지나가리라.멋있는 명언 clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px CSS css 소스입니다. /* MouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direc.. 2022. 9. 6.

mouseenter / mouseover 의 차이 mouseenter / mouseover 의 차이> mouseenter / mouseover mouseenter / mouseover는 모두 어떤 영역에 마우스가 올라감을 감지하는 메서드입니다. 이 둘의 차이점을 알아봅시다. mouseover와 mouseout mouseover 메서드는 마우스 커서가 지정 영역 안으로 들어왔을 때 이벤트가 발생하는 메서드 입니다. mouseout 메서드는 마우스 커서가 지정 영역 안에서 바깥으로 나갔을 때 이벤트가 발생하는 메서드 입니다. 이 둘은 서로 짝을 이루는 메서드입니다. mouseover와 mouseout mouseenter와 메서드는 마우스 커서가 지정 영역 안으로 들어왔을 때 이벤트가 발생하는 메서드 입니다. mouseleave 메서드는 마우스 커서가 지정 .. 2022. 9. 6.

Vscode Prettier 적용 방법 VsCode Prettier 설정 방법 Prettier는 단축키 crtl + s를 누르면 자동으로 정렬이 되는 확장 프로그램입니다. 하지만 간혹 확장 프로그램을 설치했음에도 불구하고 Prettier의 기능이 적용되지 않는 문제가 발생하는데요. 그 문제를 어떻게 해결할 수 있을지 알아보도록 하겠습니다. 1. 설정(Setting) 들어가기 Prettier 설치 후 설정(setting)에 들어간 후 'editor format on save'를 검색, 체크박스에 체크해줍니다. 체크를 했음에도 기능이 적용되지 않을 경우 2번 작업으로 가주세요. 2. json F1키를 눌러 json을 검색하면 user setting이 나오는데 이것을 클릭하고 editor.formatOnSave이 true인지 확인해줍니다. fals.. 2022. 9. 6.

08. 푸터 유형 1 푸터 유형 푸터 유형입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. 푸터 영역 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 2022 Webstoryboy. Portfolio is Power All rights reserved. CSS css 소스입니다. /* gray */ .gray { background-color: #f5f5f5; } /* .. 2022. 9. 6.

07. 배너 유형 1 배너 유형 웹사이트 배너 유형입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. class="blind">배너 영역 class="title">제목 영역 내용내용내용이랍니다.내용어케길게써 href="#" title="새 페이지 열림">그거어케하는건데 class="small">배너 유형01 CSS css 소스입니다. /* banner */ .banner__inner { background-image: url(../bannerType/img/banner_bg01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; padding: 120px 0; c.. 2022. 9. 6.

06. 슬라이드 유형 1 슬라이드 유형 웹사이트 슬라이드 유형입니다. 이번에는 아이콘에 이미지 스플라이트 기법과 ir효과를 적용하였습니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. 슬라이드 영역 DEVELOPER NEW PROJECT 너무 무리하지 말아요! 이미 당신은 잘하고 있고! 앞으로도 잘 할 수 있어요! 자세히보기 사이트보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 CSS css 소스입니다. /* slider */ .slider__inner { margin-top: 40px; } .slider {} .slider__img { background: url(../site1/assets/img/slider_bg01.jpg) no-repeat center / cover; } .slider__img .. 2022. 9. 6.

제이쿼리 스타일 관련 메서드 jQuery : 스타일 관련 메서드> 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) { // index는 각 div 요소의 index 0,1,2 // w은 각 div 요소 width 속성 return css 속성 // 각 div 요소의 css 속성을 변경합니다. }); …… 내용 내용 내용 See .. 2022. 9. 6.

제이쿼리 스타일 관련 메서드 2022. 9. 5.

제이쿼리 속성 관련 메서드 jQuery : 속성 관련 메서드> attr( ) 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경하는 메서드입니다. 실행 분류 형식 취득 $("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 요소의 속성을 생성 및 변경합니다... 2022. 9. 5.

JQuery 클래스 관련 메서드 jQuery : 클래스 관련 메서드> addClass() 메서드 요소에 class 속성을 추가합니다. 실행 분류 형식 추가 $("div").addClass("클래스명"); 콜백 함수 $("div").addClass(function(index, className) { // index는 각 div 요소의 index 0,1,2 // className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가합니다. }); .... 내용1 내용2 내용3 See the Pen addclass()메서드 예제 by Youcodein (@youCodein) on CodePen. removeClass() 메서드 요소에서 class 속성을 제거합니다.. 실행 분류 형식 제거 $(".. 2022. 9. 5.

지금은 몇 시 인가요? 글을 쓰는 지금은 7시 41분 입니다. 코딩만 하다간 돌아버릴 것 같아 이렇게 일기를 적습니다. 심심해서 적은 일기에 사람들이 댓글을 상냥하게 남겨주셔서 마음이 따뜻해집니다. 오늘의 주제는 시간의 흐름입니다. 사실 액상과당 이야기를 하고 싶었는데 썸네일 제목을 저렇게 정해버려서 어쩔 수 없네요. 왠지 철학적 주제같지만 그냥 뭐 했다고 벌써 9월이냐 이런 말을 쓰려는겁니다. 9월, 여름이 지나고 이제 가을이 되었습니다. 평생 더울 것 같았는데 비가 오고 9월이 되니 하루아침에 날씨가 쌀쌀해지더군요. 갑작스러운 계절 변화에 몸은 다들 괜찮으신가요? 저는 한동안 계절성 알러지때문에 비염이 심하게 왔습니다. 2주정도 비염약을 먹으니 이젠 괜찮아졌습니다. 여러분들도 건강 조심하세요. 개발자 수업을 들은지도 거의 .. 2022. 9. 2.

애니메이션 3 애니메이션 만들기 HTML과 CSS를 이용하여 애니메이션을 만들어봅시다. 예시 예시입니다 HTML 소스 CSS 소스 * { box-sizing: border-box; } body { background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); width:100vw; height:100vh; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; } .wrapper { position: absolute; animation: x 1s ease-in-out alternate infinite 0s both; } .wrapper:nth-of-type(2) {animat.. 2022. 9. 2.

03. 슬라이드 이펙트 - 좌로 움직이기 연속 슬라이드 이펙트 03 슬라이드 이펙트 세 번째, 좌로 움직이기(연속적으로) 입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. CSS css 소스입니다. /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } /* 이미지 보이는 영역 */ .slider__img { position: relative; width: 800px; height: 450px; overflow: hidden; } .slider::before { position: absolute; left: 5px; top: 5px; background-color: rg.. 2022. 9. 2.

이전 1 2 3 4 5 다음

728x90

HTML

자세히보기

CSS

자세히보기

JAVASCRIPT

자세히보기

티스토리툴바