척척학사의 코딩 공부174 일 상 수여 2022. 9. 2. CSS 애니메이션 : 움직이는 공 애니메이션 만들기 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-t.. 2022. 9. 2. CSS 애니메이션 : 로딩 동그라미 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 로딩 동그라미 빙글빙글 돌아가는 로딩화면 동그라미 애니메이션을 만들어 봅니다. body { height: 100vh; background-image: linear-gradient(-60deg, orange 0%, pink 100%); } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 1s ease infinite; } .loading .circle1 { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; } .load.. 2022. 9. 2. CSS 애니메이션 : 구르는 박스 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 구르는 박스 데굴데굴 구르는 박스 애니메이션을 만들어 봅니다. body { height: 100vh; background-image: linear-gradient(to top, skyblue, pink); } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .box::before { content: ''; width: 50px; height: 5px; background: #000; position: absolute; top: 58px; left: 0; border-radius: 50%; opa.. 2022. 9. 2. 깜빡상 수여 2022. 9. 1. 문자열 결합과 템플릿 문자열 문자열 : 문자열 결합 / 템플릿 문자열 문자열 결합과 템플릿 문자열에 대해 알아봅니다. 기본적인 문자열 결합 방법은 매우 간단합니다! > 템플릿 문자열과 결합 템플릿 문자열은 내장된 표현식을 허용하는 문자열입니다. 내장된 표현식을 허용한다는 것은 변수에 저장된 내용을 문자열에 작업할 수 있다는 뜻입니다. //01 const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.querySelector(".sample01_N1").innerHTML = "1"; document.querySelector(".sample01_Q1").innerHTML = "자바스크립트, 제이쿼리"; document.querySelector(".sample01_M1").innerHTML = "문자.. 2022. 9. 1. 문자열 메서드 : split() 문자열 메서드 : split() 문자열 메서드를 활용하면 문자열에서 원하는 값을 추출할 수 있습니다. > split() 메서드 split() 메서드는 문자열에서 원하는 값을 추출하여 배열로 반환합니다. // "문자열".split(구분자); // "문자열".split(정규식 표현); // "문자열".split(구분자, 갯수); const str1 = "javascript reference"; const currentStr1 = str1.split(''); // ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't', ' ', 'r', 'e', 'f', 'e', 'r', 'e', 'n', 'c', 'e'] const currentStr2 = str1.split(' '); /.. 2022. 9. 1. 문자열 메서드 : 대문자 / 소문자 / 공백 문자열 메서드 : 소문자/대문자/공백 문자열 메서드를 활용하면 문자를 소문자/대문자로 변환할 수 있으며, 문자 사이의 공백을 없앨 수도 있습니다. > toUpperCase()/ toLowerCase() 메서드 toUpperCase()는 문자열의 소문자를 대문자로, toLowerCase()는 대문자로 소문자로 바꿉니다. "문자열".charAt(숫자); const str1 = "javascript"; const curentStr1 = str1.toUpperCase(); document.querySelector(".sample02_N1").innerHTML = "1"; document.querySelector(".sample02_Q1").innerHTML = "javascript"; document.query.. 2022. 9. 1. 슬라이드 이펙트 3 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 좌로 움직이기(연속적으로) 슬라이드 효과는 다수의 이미지가 있을 때, 시간이 지날 때 한장씩 슬라이드 되며 보여지도록 한 효과입니다. 이번 슬라이드 효과는 이미지가 좌우로 연속적으로 넘어가며 보여집니다. 이전에 배운 방법보다 더욱 자연스러운 느낌이 나는 효과입니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. CSS 코드 1번 이미지가 복사되어 맨 뒤에 하나 생성되는 구조이기 때문에, .slider:nth-child(6.. 2022. 9. 1. 사이트 만들기 : 이미지 텍스트 유형1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 이미지 텍스트 유형01 이미지 텍스트 유형의 사이트는 이미지와 텍스트를 혼합해 사용한 페이지 유형입니다. 이미지를 함께 사용해 텍스트만 사용한 페이지의 단조로움을 해소하고 콘텐츠를 다양하게 합니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. 그리드에 맞춰 구역을 배분하면 보다 안정적인 느낌을 줄 수 있습니다. 이번 유형은 왼쪽에 텍스트를 배치하고, 오른쪽에 이미지를 배치하였습니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번.. 2022. 9. 1. 사이트 만들기 : 헤더 유형1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 헤더 유형01 헤더는 사이트의 제일 위에 위치한 부분입니다. 헤더를 어떻게 디자인하느냐에 따라 사이트의 분위기가 달라지기도 합니다. 또한, 헤더를 잘 디자인하면 사용자가 사이트를 더 편리하게 이용할 수 있으니, 신경써서 작업하도록 합시다! 디자인 하기 헤더는 로고가 위치한 구역, 다른 페이지로 이동할 수 있는 네비게이션(또는 메뉴)가 위치한 구역, 추가적으로 로그인을 할 수 있는 버튼이 위치한 구역 세가지로 나눌 수 있습니다. 각 메뉴가 조화롭게 위치하도록 간격과 글자 크기를 조정합니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 .. 2022. 9. 1. 메서드 / 속성 알아보기 : 크기 또는 위치 위치 및 크기를 표현하는 속성 및 메서드 요소의 위치 및 크기를 표현하는 속성 및 메서드를 알아봅시다! 속성 / 메서드 설명 비고 element.clientWidth 요소의 가로값 마진/보더 미포함 element.clientHeight 요소의 높이값 마진/보더 미포함 element.clientTop 요소의 Y축값 부모 기준 element.clientLeft 요소의 X축값 부모 기준 element.offsetWidth 요소의 가로값 보더/패딩 포함 element.offsetHeight 요소의 높이값 보더/패딩 포함 element.offsetTop 요소의 Y축값 문서 기준 element.offsetLeft 요소의 X축값 문서 기준 element.getBoundingClientRect() top, left, .. 2022. 9. 1. jQuery 알아보기 : 탐색 선택자 jQuery 탐색 선택자 알아보기 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").nextAll() div.m 요소의 다음 요소들을 모두 선.. 2022. 9. 1. jQuery 알아보기 : 필터 선택자 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(0)") index가 0보다 큰 li 요소들을 선택합니다. :lt() $("li:lt(2)") inde.. 2022. 9. 1. 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. 9. 1. jQuery 알아보기 : 기본 선택자 jQuery 기본 선택자 알아보기 jQuery 기본 선택자 선택자 종류 설명 태그 선택자 $("p") p요소를 선택합니다. id 선택자 $("#gnb") #gnb요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul 요소를 선택합니다. 인접 선택자 $("#visual + #content") #visual의 다음에 오는 #content 요소를 선택합니다. 형제 선택자 $("#visual ~ #footer") #visual의 형제 요소 #footer를 선택합니다. 종속 선택자 $("div.unit") div.. 2022. 9. 1. 바보상 수여 오늘 정말 많은 일이 있었습니다…. 2022. 8. 31. 사이트 만들기 : 텍스트 유형3 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 텍스트 유형03 텍스트 유형의 사이트는 텍스트를 주요 콘텐츠로 배치하고, 콘텐츠는 제목과 본문으로 구성해 이미지 없이 내용을 전달하는 유형입니다. 같은 텍스트 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 세번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다.. 2022. 8. 30. 사이트 만들기 : 텍스트 유형2 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 텍스트 유형02 텍스트 유형의 사이트는 텍스트를 주요 콘텐츠로 배치하고, 콘텐츠는 제목과 본문으로 구성해 이미지 없이 내용을 전달하는 유형입니다. 같은 텍스트 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 두번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다.. 2022. 8. 30. 사이트 만들기 : 텍스트 유형 1 사이트 만들기 사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다. 텍스트 유형01 텍스트 유형의 사이트는 텍스트를 주요 콘텐츠로 배치하고, 콘텐츠는 제목과 본문으로 구성해 이미지 없이 내용을 전달하는 유형입니다. 같은 텍스트 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 첫번째 디자인입니다. 디자인 하기 먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다. HTML 작성하기 그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다.. 2022. 8. 30. 슬라이드 이펙트 2 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 좌로 움직이기 슬라이드 효과는 다수의 이미지가 있을 때, 시간이 지날 때 한장씩 슬라이드 되며 보여지도록 한 효과입니다. 이번 슬라이드 효과는 이미지가 좌우로 넘어가며 보여집니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. CSS 코드 각 이미지에 바로 위 부모요소를 기준으로 포지션을 주어, 위치를 이동시킬 수 있도록 하였습니다. 또한 이미지가 순서대로 위치할 수 있도록 z-index로 z축 상의 위치를 조정해주었습니.. 2022. 8. 29. 슬라이드 이펙트 1 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 트랜지션 효과 슬라이드 효과는 다수의 이미지가 있을 때, 시간이 지날 때 한장씩 슬라이드 되며 보여지도록 한 효과입니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__img와 또 한번 감싼 slider__wrap을 만들었습니다. CSS 코드 각 이미지에 바로 위 부모요소를 기준으로 포지션을 주어, 위치를 이동시킬 수 있도록 하였습니다. 또한 이미지가 순서대로 위치할 수 있도록 z-index로 z축 상의 위치를 조정해주었습니다. .slider__wrap { width: 100%; height: 100vh; displa.. 2022. 8. 29. jQuery 알아보기 : 기본 jQuery 알아보기 자바스크립트 애니메이션을 쉽게 작성할 수 있는 jQuery에 대해 알아봅시다! jQuery란? jQuery는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 애니메이션 라이브러리입니다. 제이쿼리를 이용하면 문서 객체 모델과 이벤트에 관한 처리를 쉽게 구현할 수 있으며, Ajax 응용 프로그램 및 플러그인도 빠르게 개발할 수 있습니다. jQuery 공식 사이트 방문하기 jQuery의 장점과 단점 * 장점 * 1. 대부분의 브라우저에서 지원 2. HTML 문서 객체 모델(DOM)을 쉽게 조작 가능 3. CSS 스타일을 간단히 적용 가능 4. 다양한 플러그인과 많은 참고 문서 5. 보다 짧고 간단한 코드 6. 오픈라이선스 * 단점 * 점점 사용하지 .. 2022. 8. 29. GSAP 알아보기 GSAP 알아보기 CSS 애니메이션을 쉽게 작성할 수 있는 GSAP에 대해 알아봅시다! GSAP란? GSAP는 GreenSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. 복잡한 애니메이션을 구현하려면, CSS나 일반적인 자바스크립트로 작성으로는 너무 복잡하고 한계가 느껴지기 마련입니다. 이런 상황에서 보다 쉽게 애니메이션을 만들 수 있도록 만들어주는 도구가 바로 GSAP입니다. GSAP 공식 사이트 방문하기 GSAP 사용하기 * 1. gsap cdn 연결하기 * * 2. gsap.to() 작성하기 * gsap.to("대상", { 속성1, 속성2, 속성3, … }); * gsap.to의 주요 속성과 예시 * x : x축으로 해당 값만큼 이동 ( x: 200 ) y : y축으로 해당 값만큼 이동 (.. 2022. 8. 29. CSS 작성법 : 요소를 숨기는 5가지 방법 5 CSS로 요소를 안보이게 하는 방법 css에서 요소를 안보이게 하는 방법은 여러가지가 있습니다. 잘 알아두었다가, 상황에 맞는 속성을 사용하도록 합니다. 작성법 애니메이션 가능 여부 영역 조작(존재) 여부 기타 display: none; X X 요소를 보이지 않게 함. opacity: 0; O O 영역이 잡힌 상태로 안보이기 때문에, 영역이 필요할 때 이 방법을 사용하도록 하자 visibility: hidden; X X 보이지 않게 숨겨진 상태 transform: scale(0); O X 크기가 0인 상태. 보이지 않지만 애니메이션 효과를 줄 수 있다. width: 0; height: 0; X X blind 효과를 줄 때 사용하는 방법 2022. 8. 25. 디자인 : 사슴 일러스트 그려보기 일러스트 그리기 일러스트레이터를 이용해 일러스트를 그려보았습니다. 일러스트레이터는 벡터 방식으로 일러스트를 그립니다. 도형 툴을 이용할 수도 있지만, 복잡한 형태의 그림을 그릴 때에는 펜 툴을 이용합니다. 1. 펜툴로 선을 그리기 2. expand 후 live paint 적용하기 3. live paint bucket 으로 색상 채우기 3. 색상 변화주기 > 스케치를 따라 선따기 > 색 채우기 > 다양한 색상 변화 주기 > 목업이미지 만들어보기 2022. 8. 24. 퀴즈 이펙트 6 퀴즈 이펙트 퀴즈를 풀 수 있는 페이지를 구성할 때에, 퀴즈의 유형에 맞는 다양한 이펙트를 사용하면 단조롭지 않은 생동감 넘치는 페이지를 만들 수 있습니다. 객관식(여러문제) 유형 : 슬라이드 객관식 여러문제를 나타내는 효과입니다. 객관식 문제의 보기를 고르면, 보기가 체크되어 있는지 확인한 후 보기와 정답이 같은지 확인합니다. 정답이라면 "정답" 알림을, 오답이라면 "오답" 알림을 띄웁니다. 또한, 정답 갯수를 확인하여 합격, 불합격 여부를 나타냅니다. 원본 소스 보기 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. -객관식 문제의 정보를 배열 속 객체를 활용하여 저장하였습니다. -문제를 나타내는 html코드를 자바스크립트를 이용해 넣었습니다. -자바스크립트를 이용해 문제의 각 정보를 요.. 2022. 8. 24. 퀴즈 이펙트 5 퀴즈 이펙트 퀴즈를 풀 수 있는 페이지를 구성할 때에, 퀴즈의 유형에 맞는 다양한 이펙트를 사용하면 단조롭지 않은 생동감 넘치는 페이지를 만들 수 있습니다. 객관식(여러문제) 유형 : 점수 객관식 여러문제를 나타내는 효과입니다. 객관식 문제의 보기를 고르면, 보기가 체크되어 있는지 확인한 후 보기와 정답이 같은지 확인합니다. 정답이라면 "정답" 알림을, 오답이라면 "오답" 알림을 띄웁니다. 또한, 정답 갯수를 확인하여 합격, 불합격 여부를 나타냅니다. 원본 소스 보기 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. -객관식 문제의 정보를 배열 속 객체를 활용하여 저장하였습니다. -문제를 나타내는 html코드를 자바스크립트를 이용해 넣었습니다. -자바스크립트를 이용해 문제의 각 정보를 요소에.. 2022. 8. 24. CSS 색상 표현법 알아보기 CSS 색상 표현 css에서 색상을 표현하는 방법에는 여러가지가 있습니다. 각 방법을 알아두었다가, 유용하게 사용하도록 합시다. 표현법 설명 작성법 예시 주요 색상 이름 주요 색상 이름을 작성한다. red, white, blue, black, … color: white; 16진수 표기 (HEX 코드) rgb의 농도를 00~ff로 표현하는 HEX 코드로 작성한다. 00에 가까울수록 밝고, ff에 가까울수록 어둡다. #000000 ~ #ffffff color: #fff; RGB 표기 red, green, blue의 수치를 0~255까지 표기하여 작성한다. rgb(0, 0, 0) ~ rgb(255 ,255, 255) color: rgb(0, 0, 0); RGBA 표기 RGB와 같으나, 투명도 수치가 포함되어 .. 2022. 8. 23. CSS 단위 알아보기 : 절대 단위와 상대 단위 CSS 단위 css에서 너비나 폭, 여백 등을 지정할 때 사용하는 단위는 다양합니다. 각 단위의 특징을 알고 적절하게 사용하도록 합시다! CSS 절대 단위와 상대 단위 CSS에서 사용하는 단위는 일정한 크기로 유지되는 절대 단위와, 기준이 되는 크기나 뷰포트 환경에 따라 상대적으로 크기가 달라지는 상대단위가 있습니다. 반응형 코딩이 필요한 부분엔 상대 단위를 사용하도록 합니다. 유형 단위 설명 주의사항 절대 단위 px 1px(픽셀)은 화면 상의 점(픽셀) 하나의 크기와 같음. 해상도에 따라 잘라짐 (해상도↑ = 크기↑) pt 1pt(포인트)는 1/72 in이며, 12pt는 16px과 같음. 텍스트의 크기를 지정할 때 사용. mm 밀리미터 cm 센티미터 in 1 in(인치)는 2.54cm pc 1pc(파이.. 2022. 8. 23. 이전 1 2 3 4 5 6 다음 728x90
