개발자147 사슴 01 2022. 8. 24. css 색상 표현 방법 CSS 색상 표현 방법 css에서 색을 표현하는 방법 👉색상 이름으로 표현 👉RGB 색상값으로 표현 👉16진수 색상값으로 표현 색상 이름으로 표현 W3C에서 정의한 16개의 HTML4 표준 색상 이름은 다음과 같다. aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow RGB 색상값으로 표현 모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현하는데 HTML 에서도 이 세 가지 색을 가지고 RGB색상을 사용한다. RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가진다. <style> .blue { color:.. 2022. 8. 23. css 단위 CSS 단위 속성 페이지에서 <color> 또는 <length>. 와 같이 꺽쇠 괄호로 묶여 있는 값을 찾을 수 있습니다. <color> 값이 특정 속성에 유효한 것으로 표시되면 유효한 속성을 해당 속성의 값으로 사용할 수 있습니다. 절대 길이 단위 모두 절대 길이 단위이며 — 다른 것과 관련이 없으며 일반적으로 항상 동일한 크기로 간주됩니다. 보통 사용하는 유일한 값은 px (픽셀) 입니다. 단위 설명 cm 1cm = 96px/2.54 mm 1mm = 1/10th of 1cm Q 1Q = 1/40th of 1cm in 1in = 2.54cm = 96px pc 1pc = 1/6th of 1in pt 1pt = 1/72th of 1in px 1px = 1/96th of 1in 상대 길이 단위 상.. 2022. 8. 23. 토끼 01 2022. 8. 22. search 03 search03 CSS 의 속성들이 있는 구조이다. 이번에는 검색창을 없애고 [a-z] 클릭?창을 만들었다. 클릭하면 설명창과 갯수가 나오는 구조이다. 원본 소스 보기 HTML <div class="ketword"> <div class="search__info"> <div class="ketword"> <span>a</span> <span>b</span> <span>c</span> <span>d</span> <span>e</span> <span>f</span> <span>g</span> <span>h</span> <span>i</span> <span>j</span> <span>k</span> <span>l</.. 2022. 8. 22. 함수 유형 함수 유형 01 : 함수와 매개변수를 이용한 형태 함수 : 실행문 , 재활용 { function func(num, str1, str2){ document.write(num + ". " + str1 + "가" + str2 + "되었습니다. "); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("3", "제이쿼리", "실행"); } 함수 유형 02 : 함수와 변수를 이용한 형태 { function func(num, str1, str2) { document.write(num + ". " + str1 + "가" + str2 + "되었습니다. "); } const youNum1 = 1; const youNum2 = 2; const youNum3 = 3; co.. 2022. 8. 22. charAt () 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. 22. match () match : 반환 (배열) 셀 범위에서 지정된 항목을 검색하고 범위에서 해당 항목이 차지하는 상대 위치를 반환합니다. // "문자열".search("검색값"); // "문자열".search(정규식 표현); const str1 = "javascript reference"; const currentStr1 = str1.match("javascript"); //javascript const currentStr2 = str1.match("reference"); //reference const currentStr3 = str1.match("r"); //r const currentStr4 = str1.match(/reference/); //reference const currentStr5 = str1.match(.. 2022. 8. 22. search () search() search() 메서드는 문자열(정규식)을 검색하고 위치값(숫자)를 반환합니다. // "문자열".search("검색값"); // "문자열".search(정규식 표현); const str1 = "javascript reference"; const currentStr1 = str1.search("javascript"); //0 const currentStr2 = str1.search("reference"); //11 const currentStr3 = str1.search("j"); //0 const currentStr4 = str1.search("a"); //1 const currentStr5 = str1.search("v"); //2 const currentStr6 = str1.searc.. 2022. 8. 22. 이미지 스프라이트 / IR 효과 / 백그라운드 표현 이미지 스프라이트(Image Sprite) 💡 이미지 스프라이트 ? 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있고, 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다. 이미지 스프라이트 사용법? 이미지 스프라이트는 <img>태그를 사용해서 이미지를 삽입하는 것이 아닌 CSS의 background 속성을 이용하여 삽입합니다. 이미지 스프라이트 기법을 사용하기 위해 필수적으로 작성해줘야하는 속성이 있습니다. 👉 width, height : 삽입할 이미지의 크기를 결정한다. 👉 background-image : 삽입할 이미지의 경로를 설정한다.. 2022. 8. 20. 블록 구조 / 인라인 구조 블록 구조 / 인라인 구조 블록 구조의 특징은 한 줄 하나만 표현 됩니다. 가로로 정렬이 되지 않습니다. 또한 영역을 포현하는 부분이기 때문에, 마진 값이나 패딩 값이 먹힙니다. 인라인 구조의 경우에는 한 줄에 여러개가 표현이 되며, 가로로 정렬이 됩니다. 같은 인라인요소를 포함하지만, 블록 요소는 포함 불가능이다. 블록 구조(block) div, p, h1~h6, ul, li, ol, table, form, section, footer 등 자주 사용하는 태그들이다. div { display: block; } See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. 인라인 구조(inline) span, a, em, i, strong, b, del, ins, sub.. 2022. 8. 20. 이미지 유형 03 이미지 유형 03 이번 이미지는 큰 사진을 메인?으로 잡고 작은 이미지 4개의 구조가 있는 유형입니다. 이미지 유형 2번과 마찬가지로 사진에 마우스를 가져가 대면 제목과 설명 박스가 나옵니다. 이미지 유형 3번에는 sns 아이콘을 추가 했습니다. HTML <div class="image__inner container-fluid"> <article class="image"> <div class="image__desc"> <h3>팬케이크</h3> <p>팬케이크에대해 알아보자.</p> </div> <div class="image__sns"> <a href="#" class="link"><span class="ir">페이스북</span></a> <a href=".. 2022. 8. 20. 강아지 애니메이션 01 강아지 애니메이션 만들기 이번에는 강아지 애니메이션을 만들어 보았습니다. 평소에 하던 방법이 아닌 SCSS를 이용해서 일일이 강아지를 조합? 해보았습니다. pug 결과보기 .dog -> HTML로 바꾸면 <div class="dog"> .dog-body .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-torso .dog-head .dog-ears .dog-ear .dog-ear .dog-eyes .dog-eye .dog-eye .dog-muzzle .dog-tongue SCSS 결과보기 $dog-width: 100px; $interval: 200ms; $color-gray: #111; $easing.. 2022. 8. 18. Scss Scss 말그대로 Sass한 CSS라는 뜻이다. 가장 큰 특징은 기존 Sass의 문법에서, CSS의 원래 문법에서 사용되는 중괄호를 사용하여 CSS만 알던 사람들이 처음 접해도 직관적으로 의미를 이해할 수가 있다. 단순히 가독성만이 아니라 Sass의 기존문법이 들여쓰기 및 줄바꿈에 의존하는 문법임에 비해, SCSS는 중괄호가 있기에 공백에 의해 컴파일에러가 발생할 확률히 현저히 적다. Preprocessing CSS는 그 자체로 재미있을 수 있지만 스타일시트는 점점 더 커지고 복잡해지고 유지 관리하기 어려워지고 있습니다. 여기서 전처리기가 도움이 될 수 있습니다. Sass에는 중첩, 믹스인, 상속 및 강력하고 유지 관리 가능한 CSS를 작성하는 데 도움이 되는 기타 유용한 기능과 같이 아직 CSS에는 존.. 2022. 8. 18. search 02 search02 CSS 의 속성들이 있는 구조이다. 검색하고 지우면 목록이 없어진다. 원본 소스 보기 HTML <div class="search__wrap"> <span>inclides()를 이용하여 CSS 속성 검색하기</span> <h1>CSS 태그 검색하기</h1> <div class="search__box"> <label for="search">검색하기</label> <input type="text" id="search" placeholder="CSS 속성 및 유형을 입력해 주세요."> </div> <div class="search__info"> <div class="type">플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해보세요.</d.. 2022. 8. 18. includes includes() includes() 메서드는 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다. // "문자열, includes(검색값)" // "문자열, includes(검색값, 시작값) " const str1 = "javascript reference" const currentStr1 = str1.includes("javascript"); //true 포함여부를 알려줌. const currentStr2 = str1.includes("j"); //true const currentStr3 = str1.includes("b"); //false const currentStr4 = str1.includes("reference"); //true const currentStr5 = str.. 2022. 8. 17. padStart / padEnd padStart / padEnd // "문자열".padStart(길이) // "문자열".padStart(길이, 문자열) const str1 = "456"; const currentStr1 = str1.padStart(1, "0"); //456 const currentStr2 = str1.padStart(2, "0"); //456 const currentStr3 = str1.padStart(3, "0"); //456 const currentStr4 = str1.padStart(4, "0"); //0456 앞의 숫자 길이값 const currentStr5 = str1.padStart(5, "0"); //00456 const currentStr6 = str1.padStart(6, "0"); //000456 c.. 2022. 8. 17. repeat repeat() repeat() 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다. const str1 = "javascript"; const currentStr1 = str1.repeat(0); //'' 안나옴 const currentStr2 = str1.repeat(1); //javascript const currentStr3 = str1.repeat(2); //javascriptjavascript 2022. 8. 17. concat concat() concat() 메서드는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환합니다. // "문자열",concat()(문자열) // "문자열",concat()(문자열,문자열...) const str1 = "javascript"; const currentStr1 = str1.concat("reference"); //javascriptreference const currentStr2 = str1.concat(" ", "reference"); //javascript reference const currentStr3 = str1.concat(", ", "reference"); //javascript, reference const currentStr4 = str1.concat(", ", "refer.. 2022. 8. 17. replace/replaceAll replace()/ replaceAll() replaceAll() 메서드는 무자열을 부분 문자열로 구분하고 배열로 반환한다. // "문자열". replace("찾을 문자열","변경할 문자열") // "문자열". replace(정규식) // "문자열". replace(정규식, "변경할 문자열") const str1 = "javascript reference"; const cirrentStr1 = str1.replace("javascript", "자바스크립트"); //자바스크립트 reference const cirrentStr2 = str1.replace("j", "J"); //Javascript reference const cirrentStr3 = str1.replace("e", "E"); //javasc.. 2022. 8. 17. split split() 문자열에서 원하는 값을 배열로 반환합니다. // "문자열".split(구분자); // "문자열".split(정규식 표현 가능); // "문자열".split(구분자,갯수); const str1 = "javascript reference" //split 알고리즘 많이 사용 중복된것을 삭제하거나 바꿀 수 잇다. 합칠수도 있음. 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(' ') // ['javascript', 'reference'] con.. 2022. 8. 17. 소문자/대문자/공백 trim () / trimStar() / trimEnd() 앞 뒤 공백을 제거 한다.(회원가입할 때 많이 사용한다.) const str1 = " javascript " const currentStr1 = str1.trim(); document.querySelector(".sample03_N1").innerHTML = "1"; document.querySelector(".sample03_Q1").innerHTML = str1; document.querySelector(".sample03_M1").innerHTML = "trim()"; document.querySelector(".sample03_P1").innerHTML = currentStr1; const str2 = " javascript "; cons.. 2022. 8. 17. 문자열 결합 / 템플릿 문자열 문자열 결합 / 템플릿 문자열 템플릿 문자열이란? 간단하게 말해서 내장된 표현식을 허용하는 문자열 리터럴이다. { // 01 const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.querySelector(".sample01_N1").innerHTML = "1"; document.querySelector(".sample01_Q1").innerHTML = "자바스크립트, 제이쿼리"; document.querySelector(".sample01_M1").innerHTML = "문자열(string) 결합"; document.querySelector(".sample01_P1").innerHTML = str1 + str2; // 02 const num1 = 100; cons.. 2022. 8. 17. 이미지 유형 02 이미지 유형 02 1번과 마찬가지로 이미지 않에 글자가 있으며, background biur 효과를 주었다. 마우스를 갖다대면 블라인더 효과가 올라온다. HTML <section id="imageType02" class="image__wrap section gmarket "> <h2>북극 동물들 <p>북극동물들 의 귀여움을 알아보자. <div class="image__inner container"> <article class="image img1"> <figure class="image__box"> <img src="img/imgType02_1.jpg" alt="/"> </figure> <div class="imge__desc"> <h3>북극동물 <a href="/.. 2022. 8. 17. 이미지 유형 01 이미지 유형 01 이미지안에 글자가 있는 구조이다 사진은 2개이며, 자세히 보기 박스 색깔이 다르다. HTML <section id="imageType01" class="image__wrap section NexonLv1Gothic"> <h2>레서판다 <p>레서판다의 귀여움을 알아보자. <div class="image__inner container"> <article class="image img1"> <h3 class="image__tit">레서판다가 줄 타는 모습 <p class="image__desc">레서판다가 줄타는 모습을 보십시오. 너무 귀엽지 않나요.. 귀여워서 깨물고 싶어요...너구리랑 햇갈리지 맙시다. <a class="image__btn" href="/" t.. 2022. 8. 17. search 01 quiz01 html, css, javascript 의 속성들을 써서 누르면 각 속성들이 나오는 구조이다. 원본 소스 보기 HTML < main id="main"> <div class="search__wrap"> <span>indexOf()를 이용하여 CSS 속성 검색하기 <h1>HTML 태그 검색하기 <div class="search__box"> <label for="search">검색하기</label> <input type="text" id="search" placeholder="HTML 테그를 입력해 주세요."> </div> <div class="search__list"> <div class="html"> <ul> <li data-name="a"><.. 2022. 8. 16. indexOf() / lastIndexOf indexOf() 문자열에서 특정 문자의 취치를 찾고 숫자를 반환합니다. "문자열, indexOf(검색값)" "문자열, indexOf(검색값, 위치값) " //0 1 2 3 4 5 6 7 8 9 10 11 const str1 = "javascript reference" const currentStr1 = str1.indexOf("javascript"); //0 const currentStr2 = str1.indexOf("reference"); //11 const currentStr3 = str1.indexOf("j"); //0 const currentStr4 = str1.indexOf("a"); //1 const currentStr5 = str1.indexOf("v"); //2 const currentS.. 2022. 8. 16. slice()/substring()/substr() slice() // "문자열", slice(시작위치) // "문자열", slice(시작위치, 끝나는 위치) const str1 = "javascript relerence" const currentStr1 = str1.slice(0); //javascript relerence const currentStr2 = str1.slice(1); //javascript relerence const currentStr3 = str1.slice(2); //vescript relerence const currentStr4 = str1.slice(0, 1); //1 const currentStr5 = str1.slice(0, 2); //ja const currentStr6 = str1.slice(0, 3); //jav c.. 2022. 8. 16. 정규식 표현 정규표현 정규표현 ? 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다. 패턴 설명 abc abc 문자열을 검색합니다. /abc/는 'abc' [abc] a, b, c 중 문자 하나를 검색합니다. /[abc]d/는'ab', 'bd', 'cd' [^abc] a, b, c 를 제외한 문자 하나를 검색합니다. /[^abc]d/는'ed', 'fd', 'gd' [A-Z] 알파벳 대문자 문자를 검색합니다. [a-z] 알파벳 소문자 문자를 검색합니다. [0-9] 0-9까지의 숫자를 검색합니다. . 하나의 문자를 검색합니다. 만약 '마침표' 문자 그대로의 의미를 사용할 경우 '₩.' 으로 표현해야 합니다. \w 알파벳, 숫자, _를 검색 합니다. \W 알파벳, 숫자, _를 제외하고 검색 합니다. .. 2022. 8. 16. 미디어쿼리 미디어쿼리 뷰포트의 해상도에 따라 CSS를 분기시키는 미디이쿼리는 반응형 프로젝트에서 반드시 필요한 기법이다. < link~media=""> < ink rel="stylesheet" type="text/css" media="all and (min-width: 1000px)" href="style_pc.css"> 최소 가로폭이 1000px보다 넓은 해상도일 때 style_pc.css를 연결 한다는 뜻 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6,7,8 375 667 iPhone 5 320 568 Galaxy S5,S8 360 640 Galaxy Note 8 360 640 Galaxy 414 736 iPad Pro 1024 1366 : : : @media @media all .. 2022. 8. 14. 이전 1 2 3 4 5 다음
