Dragonball Online Goku Hand
본문 바로가기

코딩Gabojago~164

[사이트 제작] 두번째 : 텍스트 유형 TYPE.02 사이트 제작하기 : 📝 텍스트 유형02 텍스트 유형은 이미지가 아닌 말 그대로 텍스트로 이루어진 유형입니다. 이번 유형은 제목과 주제별 내용들을 나누어 구조를 짜주어야 합니다. 오늘 만들 사이트 형식 사이트 제작 방법 1. Figma 사용해서 레이아웃 설정 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. (그리드 이용) 밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다. " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다. 2. vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 레이아.. 2022. 9. 1.
jQuery : 탐색 선택자 📎 jQuery : 탐색 선택자 ➰ 기본 탐색 선택자 선택자 종류 설명 children() $("div").childern() 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 요소의 다음 요소들을 모두 선택합니다. nextUntil() $("div.m").ne.. 2022. 8. 31.
jQuery : 필터 선택자 📎 jQuery : 필터 선택자란? 선택자에 ':'이 붙은 선택자 ➰ 필터 선택자의 종류 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다. :first $("tr:first") 첫 번째 td 요소를 선택합니다. :last $("tr: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)") index가.. 2022. 8. 31.
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'는 선택되지 않습니다. 요소[속성*='값'] $("span[class.. 2022. 8. 30.
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.util") div 요소 중 class가.. 2022. 8. 30.
[사이트 제작] 첫번째 : 텍스트 유형 TYPE.01 사이트 제작하기 : 📝 텍스트 유형01 텍스트 유형은 이미지가 아닌 말 그대로 텍스트로 이루어진 유형입니다. 아이콘이 들어가므로 아이콘을 어떤 방법으로 넣어줄지 생각해보아야 합니다. 오늘 만들 사이트 형식 사이트 제작 방법 1. Figma 사용해서 레이아웃 설정 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. (그리드 이용) 밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다. " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다. 2. vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 .. 2022. 8. 30.
"슬라이더이펙트 02" : 좌로 움직이기 🎞 슬라이드 이펙트 - 좌로 움직이기 📌 흔히 우리가 아는 슬라이드 효과입니다. 왼쪽으로 슥-슥- 지나가는 슬라이드 효과를 만들어봅시다! 슬라이드 이펙트 - 좌로 움직이기 효과 완성⭐️ 실제 사이트보기 원본 소스보기 CSS 소스보기 HTML 전체적인 틀을 짜주는 것입니다. javascript Slider Effect01 슬라이드 이펙트 - 트랜지션 효과 1 2 3 4 5 6 7 소스보기 JAVASCRIPT HTML CSS CSS 부분적인 CSS입니다. 미디어쿼리도 사용했습니다. 전체적인 CSS를 보시려면 위 CSS보기를 참고해주세요! /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; jus.. 2022. 8. 30.
"슬라이더이펙트 01" : 트랜지션 효과 🎞 슬라이드 이펙트 - 트랜지션 효과 📌 transition 효과란 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것입니다. 슬라이드 이펙트 - 트렌지션 효과 완성⭐️ 실제 사이트보기 원본 소스보기 CSS 소스보기 HTML 전체적인 틀을 짜주는 것입니다. javascript Slider Effect01 슬라이드 이펙트 - 트랜지션 효과 1 2 3 4 5 6 7 소스보기 JAVASCRIPT HTML CSS CSS 부분적인 CSS입니다. 전체적인 CSS를 보시려면 위 CSS보기를 참고해주세요! /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: c.. 2022. 8. 30.
GSAP GSAP에 대해 알아봅시다! 📎GSAP란? : GrennSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. : 일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적입니다. 하지만 사용자의 욕구는 끝이 없고 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나입니다. ➰GSAP 사용법 📎 GSAP 사용 예시 const slider = document.querySelectorAll(".slider"); let currentIndex = 0; //let sliderCount = slider.length; setInterval(() => { c.. 2022. 8. 30.
jQuery jquery에 대해 알아봅시다! 📎제이쿼리(jquery)란? : 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크핍트 라이브러리입니다. : 빠르고 기능이 풍부한 자바스크립트입니다. : $() 함수를 통해 생성된 요소를 제이쿼리 객체라고 합니다. ➰특징 📌 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현 가능 📌 Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발 가능 📌 jQuery는 크로스 플랫폼을 지원하기 때문에 어떠한 브라우저에서도 동일하게 동작합니다. 브라우저 호환성을 고려하여 대체 코드를 작성할 필요가 없습니다. 📌 네이티브 DOM API 보다 직관적이고 편리한 API를 제공합니다. CSS 스타일의 selector를 사용할 수 있으.. 2022. 8. 29.
[CSS] "동 to the 그 to the 라미 애니메이션" 을 만들어봅시다! codepen을 이용해서 ⚫️동 to the 그 to the 라미~⚪️를 만들어봅시다! 무한으로 회전하는 동그라미 두 개를 HTML과 CSS의 animation 기능을 이용하여 만들어봅시다. 대한민국 국기 느낌으로 만들었는데 이걸 보고 국뽕이 차오르신다면 당신은 진정한 한국인🇰🇷입니다^^. See the Pen circle by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️HTML 동그라미 두 개의 틀만 만들어주면 됩니다. ✔️CSS ∙ linear-gradient : [필수] 시작 색상, 끝 색상 / linear-gradient(각도(deg), 색상1, 색상2 , ..., ) ∙ animation : 이름지정, 애니메이션 시간, linear(일.. 2022. 8. 29.
[CSS] "네모 애니메이션" 을 만들어봅시다! codepen을 이용해서 🔸데구르르 박스🔸를 만들어봅시다! 귀염뽀짝한 박스를 HTML과 CSS를 이용하고 CSS에 animation 기능을 추가하여 움직이도록 만들어봅시다. See the Pen popping Box by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️HTML box하나만 만들면 됩니다. ✔️CSS ∙ linear-gradient : [필수] 시작 색상, 끝 색상 / linear-gradient(방향, 색상1, 색상2 , ..., ) ∙ animation : 이름지정, 애니메이션 시간, linear(일정한 속도로 진행), 무한반복 body { height: 100vh; background-image: linear-gradient(t.. 2022. 8. 29.
[CSS] "요소 숨기는 방법" 에 대해 알아봅시다! CSS 요소 숨기는 방법에 대해 알아봅시다! 📎 CSS 요소 숨기기 종류 1. display :none; (애니메이션 X, 영역X) 2. opacity : 0; (애니메이션 O, 영역O) 3. visibility: hidden; (애니메이션 X, 영역X) 4. transform: scale(0); (애니메이션 O, 영역X) 5. width: 0; height: 0; (애니메이션 X, 영역X) : blind ➰display :none; 객체를 안 보이게 하는 첫번째 방법으로, display에 none을 넣어주면 눈에도 안 보이고 자리도 차지하지 않고 숨어있게 합니다. ※ 객체를 안 보이게 하는 display방법 중에 hidden도 있습니다. none과 hidden 의 차이는 공간부분에서 차이가 있는데 no.. 2022. 8. 26.
"퀴즈이펙트" Quiz 06 : 객관식(여러문제) 확인하기 : 슬라이드 형식 Quiz 06. 자바스크립트를 활용하여 웹디자인기능사 필기 2013년도 5회차 문제를 통해 객관식 여러문제 확인하기를 슬라이드 형식으로 만들어봅시다! 사이트 실제 보기 원본 소스보기 코드 참고 // 문제 정보 const quizInfo = [ { answerType: "웹디자인 기능사 2013년 05회", answerNum: "1", answerAsk: "디자인 형태의 개념에서 조화(harmony)를 이루는 법칙과 거리가 먼 것은?", answerChoice: [ "균형", "대비", "통일", "색상" ], answerResult: "색상", answerEx: "조화를 이루는 법칙은 균형, 대비, 통일, 유사, 균일, 강약, 변화가 있습니다." }, { answerType: "웹디자인 기능사 2013년.. 2022. 8. 24.
[일러스트레이터] 사슴 만들기 & 응용 🖍 일러스트레이터를 활용하여 사슴🐫을 만들어봅시다! 준비물 ✂️ 01. A4용지 사이즈의 프레임을 준비합니다. 02. 튼튼한 손목을 준비합니다! 03. 선 열심히 따줍시다. (펜툴이용) 04. 원하는 색으로 채색을 해주면 완성입니다.(토롱이 만들었을 때와 같이 expand와 live paint 잊지마세요!) 완성본(곧 가을이 다가오니 가을느낌의 사슴입니다.) 🖍 포토샵을 활용하여 사슴 프린팅 티셔츠를 만들어봅시다! 완성본 : mockup이라는 사이트를 이용! 2022. 8. 24.
"퀴즈이펙트" Quiz 05 : 객관식 60문제 유형 Quiz 05. 자바스크립트를 활용하여 웹디자인기능사 필기 2013년도 5회차 문제를 통해 객관식(여러문제) 확인하기를 점수까지 나오도록 만들어봅시다! 몇 문제 중에 몇 개가 정답인지와 점수, 합격여부를 알려주는 기능을 만들었습니다. ✽ 참고 : 100점을 60문제로 나누면 1.666・・・・이 나오는데 깔끔하게 소수점을 버리는 Math.floor()라는 메서드를 사용해보았습니다. 퀴즈 확인하기 원본 소스보기 코드 참고 //문제 정보 (밑 문제 처럼 60개 만들어야 함. 나머지는 생략함) const quizInfo = [ { answerType: "웹디자인 기능사 2013년 05회", answerNum: "1", answerAsk: "디자인 형태의 개념에서 조화(harmony)를 이루는 법칙과 거리가 먼 .. 2022. 8. 24.
[CSS] "색상 표현 방법" 에 대해 알아봅시다! CSS 색깔을 지정하는 방법에 대해 알아봅시다! 📎 CSS 색깔을 지정하는 4가지 방법 📌 이름 📌 16진수 📌 RGB 또는 RGBA 📌 HSL 또는 HSLA ➰이름을 사용해서... 색상의 이름을 직접 써서 컬러를 지정할 수 있습니다. 브라우저가 인식할 수 있는 색상 이름은 대략 147개입니다. 👍🏻 : 쉽게 색상 지정 가능 👎🏻 : 표현 색상 한정적, 이름 외우고 있어야 함 See the Pen 색상01 by KwonHyehyeon (@kwonhyehyeon) on CodePen. ➰16진수를 사용해서... 2자리씩 3개의 16진수로 색상을 표현합니다. #00(빨강)FF(초록)99(파랑) 여기서 2자리씩 차지하고 있는 3개의 16진수는 각각 RED, GREEN, BLUE를 의미합니다. 16진수로 색상을.. 2022. 8. 24.
[CSS] "단위(Unit)" 에 대해 알아봅시다! CSS 단위(Unit) 대해 알아봅시다! 📎 CSS 단위 종류 CSS에서 사용되는 길이는 절대 길이 단위와 상대 길이 단위 두 가지 유형이 있습니다. ➰절대 길이 단위 : 항상 동일한 크기(다른 것과 관련X) 단위 이름 값 cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q 4분의 1 밀리리터 1Q = 1/40th of 1cm in 인치 1in = 2.54cm = 96px pc Picas 1pc = 1/6th of 1in pt 포인트 1pt = 1/72th of 1in ⭐️px⭐️ 픽셀 1px = 1/96th of 1in 위와 같은 값의 대부분은 화면 출력이 아닌 인쇄에 사용될 때 더 유용합니다. px(픽셀)만 보통 유일하게 화면에서 사용되는 절대 길이 단위입.. 2022. 8. 24.
[일러스트레이터] 귀여운 어린이와 토끼 만들기 🖍 일러스트레이터를 활용하여 어린이와 토끼를 만들어봅시다! 준비물 ✂️ 01. A4용지 사이즈의 프레임을 준비합니다. 02. ctrl + ' (모눈종이) 단축키를 사용하여 틀을 불러옵니다. 03. 기본적인 설정을 해줍니다.(환경설졍) 04. 디자인에 대한 근거없는(?) 자신감을 준비합니다! 귀여운 어린이👶🏻 🫥 동그라미를 그려줍니다. (얼굴형) : 직접 선택 툴(A)로 동그라미 하단을 클릭 후 방향키로 위로 10번 정도 올려줍니다. 그러면 귀여운 얼굴형이 완성됩니다. 👒 귀여운 모자를 만들기 위해 직사각형(M)(모자 챙)을 만들어 줍니다. 동그라미를 shift로 양 옆의 점을 누른 후 ctrl + j를 사용하여 반으로 잘라 모자 윗부분을 완성해줍니다. 🪢 모자 위 밭줄(?)무늬를 만들기 위해서 직사각형을.. 2022. 8. 23.
"서치 이펙트" Search 03. charAt() 메서드를 활용하여 검색 화면 만들기 🗒 서치이펙트 03 📌 charAt()을 이용하여 검색 화면을 만들어 봅시다. 📌 서치이펙트 01, 02와 다르게 검색하는 창을 없애고 알파벳을 누르면 첫글자로 그 알파벳을 포함하고 있는 단어들이 나오게 하는 것이 특징인 유형입니다. HTML 태그 검색창 만들기! 실제 사이트보기 원본 소스보기 CSS 소스보기 HTML 첫글자를 클릭하면 관련 단어가 나올 수 있도록 div태그를 이용하여 class를 keyword로 지정해주어 a부터 z까지 작성합니다. 전체 속성 갯수가 뜨는 부분도 있으니 이 부분도 div태그로 묶어주어야 합니다. charAt()을 이용하여 검색하기 CSS 속성 첫글자 검색하기 a b c d e f g h i j k l m n o p q r s t u v w x y z 전체 속성 갯수 : .. 2022. 8. 23.
charAt() 📎 charAt() 이란? : 문자열에서 특정 위치의 문자가 무엇인지 확인할 수 있는 메서드입니다. : 문자열의 개별 문자에 대해 특정 효과 줄 때 사용 string.charAt(index) : "문자열".charAt(숫자); 🔍 charAt() 메서드 사용예제 (★주석이 리턴값입니다!★) const str1 = "javascript reference"; const currentStr1 = str1.charAt(); //j const currentStr2 = str1.charAt("0"); //j const currentStr3 = str1.charAt("1"); //a const currentStr4 = str1.charAt("2"); //v 2022. 8. 23.
match() 📎 match() 이란? : 특정 텍스트 안에 검색할 단어, 찾고싶은 단어가 있는 경우 해당 텍스트가 문구에 포함되어 있는지 확인하는 메서드입니다. : 단어뿐만 아니라 정규표현식을 사용하여 특정 패턴을 검색하는 것 가능 string.match('찾을 단어') 반환(배열로 표현됨) : [] : 예시 참고! 정규식 지원됨 🔍 match() 메서드 사용예제 (★주석이 리턴값입니다!★) const str1 = "javascript reference"; const currentStr1 = str1.match("javascript"); //javascript const currentStr2 = str1.match("reference"); //reference const currentStr3 = str1.match(.. 2022. 8. 23.
search() 📎 search() 이란? : 문자열에서 조건 문자열을 찾아서 몇 번째 위치에 있는지 확인을 해주는 메서드입니다. : 일치값 있으면? 일치값 위치 색인번호 반환 (0부터 시작) : 일치값 없으면? -1 반환 (‣ 문자열 포함 검사에 활용) string.search() "문자열".search("검색값"); "문자열".search(정규식표현); : 정규식표현은 따옴표로 안 묶음! indexOf랑은 다르게 숫자값을 안가져옴 (, 0)X 🔍 search() 메서드 사용예제 (★주석이 리턴값입니다!★) const str1 = "javascript reference"; const currentStr1 = str1.search("javascript"); //0 const currentStr2 = str1.search.. 2022. 8. 23.
함수 유형 점점 매운맛🌶인 함수에 대해 알아봅시다! 함수는 실행문이며 재활용을 위해 사용합니다. 📌 함수 유형 : 함수와 매개변수를 이용한 형태 📌 함수 유형 : 함수와 변수를 이용한 형태 📌 함수 유형 : 함수와 배열, 객체를 이용한 형태 📌 함수 유형 : 객체 안에 변수와 함수를 이용한 형태 📌 함수 유형 : 객체 생성자 함수 📌 함수 유형 : 프로토타입 함수 📌 함수 유형 : 객체 리터럴 함수 📎 함수 유형 : 함수와 매개변수를 이용한 형태 ⭐️매개변수 형태⭐️ function func(str){ document.write(str) } func("함수가 실행되었습니다."); 🔍 예시 function func(num, str1,str2){ document.write(num + ". " + str1 + "가 " .. 2022. 8. 23.
[사이트 제작] 세번째 : 이미지 유형 TYPE.03 사이트 제작하기 : 이미지 유형03 사이트 유형에는 이미지 유형도 있습니다. 카드 유형이랑 비슷해보이지만 이미지 안에 글씨가 들어간다는 차이가 있습니다. 이 유형은 마우스를 사진에 가져갔을 때 새로운 박스와 함께 여러 개의 아이콘이 등장하는 것이 특징입니다. 오늘 만들 사이트 형식 사이트 제작 방법 1. 이번 유형은 어떤 유형일까? 이번 이미지 유형은 이미지 유형02와 같이 사진에 마우스를 가져갔을 때 새로운 박스가 생기게 하는 유형입니다. 유형02와 다른 점은 레이아웃 구조와 마우스를 가져갔을 때 박스 안에 아이콘까지 나타나게 하는 것입니다. 자세하게 배워봅시다! 2. vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 레이아웃 구역을 .. 2022. 8. 21.
[HTML] "블록 / 인라인 구조" 에 대해 알아봅시다! HTML : 블록(block) / 인라인(inline) 구조에 대해 알아봅시다! HTML의 태그는 크게 블록 구조와 인라인 구조로 나누어 집니다. 이 부분에 대해 명확히 이해하고 있어야 CSS를 사용하는데 어려움이 없습니다. 각각의 요소에 적용되는 CSS가 별도로 존재합니다. 그러므로 CSS를 적용할 때 "왜 적용이 안되지?" 하며 머-쓱한 상황이 발생할 수 있습니다. 예를 들면... ☑️ 인라인 구조는 height가 적용되지 않습니다. ☑️ 인라인 구조는 width가 적용되지 않습니다. ☑️ 블록 구조는 vertical-align이 적용되지 않습니다. ☑️ 블록 구조는 text-align이 적용되지 않습니다. ⋮ 이런 이유로 정확하게 블록, 인라인 구조를 이해해야 합니다. 그럼 같이 블록구조가 무엇인지.. 2022. 8. 21.
[CSS] "이미지 스프라이트 / ir효과 / 백그라운드 표현" 에 대해 알아봅시다! CSS : 이미지 스프라이트 / 백그라운드 표현 / IR 효과에 대해 알아봅시다! 📎이미지 스프라이트(Image Sprite)란? : 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법입니다. : 간단하게 말해서, 하나로 뭉친 파일을 다운 받아 필요 부분만 똑 떼어 사용하는 기법입니다. : 실제로 네이버에서는 메인페이지에서 이 기법을 굉장히 광범위하게 사용하고 있습니다. [참고] 한 칸의 크기를 50cm로 잡아주었으며 아이콘 크기는 36cm로 정해주었으며 아이콘 안 이미지의 크기는 20cm로 정해주었습니다.(가로, 세로 동일) ➰왜 사용하는 걸까? (장점) 📌 서버로의 요청 횟수를 줄여 사이트 로딩 속도를 줄여줌 📌 많은 이미지 파.. 2022. 8. 21.
[CSS] PUG와 SCSS를 활용하여 강아지 애니메이션을 만들어 봅시다! SCSS를 이용해서 🐶댕청미 강아지 애니메이션🐶을 만들어봅시다! 코드펜을 이용하여 강아지 애니메이션를 만들 때 HTML은 Pug를 이용해서, CSS는 SCSS를 이용할 수 있습니다. See the Pen CSS Dog by KwonHyehyeon (@kwonhyehyeon) on CodePen. 애니메이션 코드 소스를 알아봅시다.💻 ✔️HTML Pug코드는 View Compiled HTML을 눌러주면 밑과 같이 바뀝니다. ✔️CSS SCSS코드는 View Compiled CSS를 눌러주면 밑과 같이 바뀝니다. body { display: flex; flex-direction: column; justify-content: center; align-items: center; } html, body { bac.. 2022. 8. 18.
[CSS] "SASS ⊃ Sass, SCSS" 에 대해 알아봅시다! SASS에 대해 알아봅시다! : CSS의 단점을 보완하기 위해 만든 CSS 전처리기입니다.보통 CSS를 사용하다보면 단순 반복되는 부분이 많은 등, 불편함이 느껴지기 마련인데, SASS는 이 부분을 거의 완전하게 해소시켜주는 스타일 언어입니다. SASS에는 Sass와 SCSS가 있습니다. : CSS의 확장팩 같은 언어이기 때문에 CSS 파일 그 자체를 SCSS로 확장자만 바꾸어줘도 정삭적으로 작동합니다. 다만, SASS자체는 개발자용 언어이기 때문에 웹브라우저가 읽을 수 없습니다. 따라서, 중간에 컴파일러를 거쳐서 CSS로 변환하여 HTML에 연결해야 합니다. ★ CSS의 단점 ★ : 선택자(Selector)을 만들 때 매번 불필요한 부모요소 선택자를 적어야 합니다. : function 같은게 없으니, .. 2022. 8. 18.
includes() includes() 이란? : 문자열이 특정 문자열을 포함하는지 확인하는 메서드, 불린(true, false)을 반환 string.includes(searchString, length) searchString : 검색할 문자열로 필수 요소임, 대소문자를 구분 length : 검색을 시작할 위치. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 함 포함 여부 알려줌 "문자열".includes(검색값) "문자열".includes(검색값, 시작값) includes() 메서드 사용예제 (★주석이 리턴값입니다!★) const str1 = "javascript reference"; const currentStr1 = str1.includes("javascript"); //true const currentStr2 .. 2022. 8. 18.