CSS HTML JAVASCRIPT 웹디자인기능사 Webs298 match() 메서드는 문자열을 검색하고 배열 문자값을 반환합니다. Reference/Javascript match() 메서드는 문자열을 검색하고 배열 문자값을 반환합니다. by @webs 2022. 7. 4. match() match() 메서드는 문자열(정규식)을 검색하고 문자값(배열)을 반환합니다. 특징 설명 유형(type) String.prototype.match() 버전(version) ES1 결과값(return) 배열(array) 사용성 ★★★☆☆ 문법(Syntax) "문자열".match(검색값)" "문자열".match(정규식 표현)" "javascript reference".match('javascript') //javascript "javascript reference".match('reference') //reference "javascript refere.. 2022. 11. 1. body 태그는 문서 본문에 해당하는 내용을 설정합니다. Reference/HTML 태그는 문서 본문에 해당하는 내용을 설정합니다. by @webs 2022. 7. 4. 태그는 문서 본문에 해당하는 내용을 설정합니다. 문서에서 한번만 사용 할 수 있으며, 문서 설정시 필수적으로 들어가는 요소입니다. 태그는 문서 본문에 해당하는 내용을 설정하지만, 호환성(Compatibility) 6 7 8 9 10 11 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 참고(Reference) https://html.spec.whatwg.org/multipage/sections.html#the-body-element 2022. 11. 1. hr 태그는 단란 요소간의 주제별 구분을 설정합니다. Reference/HTML 태그는 단란 요소간의 주제별 구분을 설정합니다. by @webs 2022. 7. 4. 태그는 단란 요소간의 주제별 구분을 설정합니다. 단순 줄바꿈을 위함이라면 태그를 사용합니다. 주제를 구분하기 위한 요소이며, 시각적인 표현은 CSS를 통해 설정합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 없음 버전 HTML4 시각적 표현 수평선 사용성 ★★☆☆☆ 정의(Definition) 태그는 horizontal rule의 약자이며, 단란 요소간의 주제별 구분을 위해 설정합니다. 태그는 연극에서 주제를 구분하거나, 책에서 화제 변경을 구분하기 위해 사용합니다. 태그는 시각적인 부분보다 의미론적으로 사용하므로, 시간적인 표현은 CSS를 통해 표현합니다. 크로스브라우.. 2022. 11. 1. animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. Reference/CSS animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. by @webs 2022. 7. 4. animation-name animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-name : none; 적용 animation 버전 CSS3 사용성 ★★★★★ 정의(Definition) animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. 애니메이션과 관련된 속성.. 2022. 11. 1. animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다. Reference/CSS animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다. by @webs 2022. 7. 4. animation-iteration-count animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-iteration-count : none; 적용 animation 버전 CSS3 사용성 ★★★★☆ 정의(Definition) animation-iteration-count .. 2022. 11. 1. search() 메서드는 문자열을 검색하고 위치값을 반환합니다. Reference/Javascript search() 메서드는 문자열을 검색하고 위치값을 반환합니다. by @webs 2022. 7. 4. search() search() 메서드는 문자열(정규식)을 검색하고 위치값(숫자)을 반환합니다. 정규식 표현을 통해 검색이 가능하며, 일치하는 값이 있으면 위치(인덱스) 값을 반환하고, 없으면 -1을 반환합니다. search() 메서드 숫자를 반환하지만, match() 메서드는 문자값(배열)을 반환하는 것이 다릅니다. 특징 설명 유형(type) String.prototype.search() 버전(version) ES1 결과값(return) 숫자(index) or -1 사용성 ★★★☆☆ 문법(Syntax) "문자열".search(검색값)" "문자열".search(정규식.. 2022. 11. 1. includes() 메서드는 문자열 포함 여부를 검색하여, 불린을 반환합니다. Reference/Javascript includes() 메서드는 문자열 포함 여부를 검색하여, 불린을 반환합니다. by @webs 2022. 7. 4. includes() includes() 메서드는 문자열 포함 여부를 검색하여 불린(true, false)을 반환합니다. 특징 설명 유형(type) String.prototype.includes() 버전(version) ES6 결과값(return) 불린(true or false) 사용성 ★★★☆☆ 문법(Syntax) "문자열".includes(검색값) "문자열".includes(검색값, 위치값) "javascript reference".includes('javascript') //true "javascript reference".includes('j') .. 2022. 11. 1. lastIndexOf() 메서드는 문자열에서 특정 문자의 위치를 역순으로 찾습니다. Reference/Javascript lastIndexOf() 메서드는 문자열에서 특정 문자의 위치를 역순으로 찾습니다. by @webs 2022. 7. 4. lastIndexOf() lastIndexOf() 메서드는 문자열에서 특정 문자의 위치를 역순으로 찾습니다. 문자열 내에 문자들은 왼쪽부터 순번이 매겨지고, 결과 값으로 순번이 반환됩니다. 만약 찾는 문자가 없다면, -1 값을 반환합니다. 특징 설명 유형(type) String.prototype.lastIndexOf() 버전(version) ES1 결과값(return) 숫자(mumber) 사용성 ★★★☆☆ 문법(Syntax) "문자열".lastIndexOf(검색값) "문자열".lastIndexOf(검색값, 위치값) "javascript refere.. 2022. 10. 31. animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다. Reference/CSS animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다. by @webs 2022. 7. 4. animation-fill-mode animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-fill-mode : none 적용 animation 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정.. 2022. 10. 31. br 태그는 텍스트 줄바꿈이 필요할 때 설정합니다. Reference/HTML 태그는 텍스트 줄바꿈이 필요할 때 설정합니다. by @webs 2022. 7. 4. 태그는 텍스트 줄바꿈이 필요할 때 설정합니다. 단순 줄바꿈을 위한 용도이기 때문에 스타일적인 요소가 필요하다면 CSS 속성을 사용합니다. 여백을 주기 위함이라면 CSS 속성 margin, padding 또는 line-height 사용을 권장합니다. 의미없는 글자에 줄바꿈을 원하다면 태그를 사용합니다. 문단간에 주제 분리를 위한 줄바꿈이 필요하다면 태그를 사용합니다. 특징 설명 요소 인라인 구조(Inline Element) 닫는 태그 없음 버전 HTML4 시각적 표현 줄바꿈 사용성 ★★★★☆ 정의(Definition) 태그는 텍스트 줄바꿈이 필요할 때 사용합니다. 태그는 줄을 바꾸는 의미 밖에 없.. 2022. 10. 31. wbr 태그는 줄바꿈 할 위치를 설정할 때 사용합니다. Reference/HTML 태그는 줄바꿈 할 위치를 설정할 때 사용합니다. by @webs 2022. 7. 4. 태그는 줄바꿈 할 위치를 설정할 때 사용합니다. 태그의 사용은 제한적입니다. 일반적인 한글이나 영어에서는 해당이 되지 않습니다. 의미가 없는 단어나 해석 할 수 없는 단어의 줄바꿈을 할 때 사용합니다. 예를 들면 의미적 전달이 안되는 브라우저의 주소가 가장 적절한 예가 될 것입니다. 단어의 줄바꿈이나 글자의 줄바꿈을 컨트롤 하고 싶다면 word-break 속성을 사용합니다. 줄바꿈을 해주는 태그와 동일하지만, 태그는 줄바꿈을 해야 될 상황에 오면 줄바꿈을 해줍니다. 특징 설명 요소 인라인 구조(Inline Element) 닫는 태그 없음 버전 HTML5 시각적 표현 줄바꿈 사용성 ★★☆☆☆ 정.. 2022. 10. 30. animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. Reference/CSS animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. by @webs 2022. 7. 4. animation-duration animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-duration : 0s; 적용 animation 버전 CSS3 사용성 ★★★★★ 정의(Definition) animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. animation-.. 2022. 10. 29. indexOf() 메서드는 문자열에서 특정 문자의 위치를 찾습니다. Reference/Javascript indexOf() 메서드는 문자열에서 특정 문자의 위치를 찾습니다. by @webs 2022. 7. 4. indexOf() indexOf() 메서드는 문자열에서 특정 문자의 위치를 찾습니다. 문자열 내에 문자들은 왼쪽부터 순번이 매겨지고, 결과 값으로 순번이 반환됩니다. 만약 찾는 문자가 없다면, -1 값을 반환합니다. 특징 설명 유형(type) String.prototype.indexOf() 버전(version) ES1 결과값(return) 숫자(mumber) 사용성 ★★★☆☆ 문법(Syntax) "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) "javascript reference".indexOf('javascript') //0 "ja.. 2022. 10. 28. abbr 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. Reference/HTML 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. by @webs 2022. 7. 4. 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. abbr은 abbreviation의 약자로, "약자 또는 생략어"라는 의미를 가집니다. title 속성을 사용하여 전체 단어를 지정 할 수 있으며, 용어에 대한 정의를 나타내는 태그와 같이 사용하여 설정할 수 있습니다. 특징 설명 요소 인라인 구조(Inline Element) 닫는 태그 적용 버전 HTML4 시각적 표현 점선(브라우저마다 틀림) 및 툴팁 사용성 ★★☆☆☆ 정의(Definition) 태그는 abbreviation의 약자로, "약자 또는 생략어"라는 의미를 가집니다. 태그를 사용할 경우 번역 시스템이나 검색 시스템에게 유용한 .. 2022. 10. 28. animation-direction 속성은 애니메이션 움직임 방향을 설정합니다. Reference/CSS animation-direction 속성은 애니메이션 움직임 방향을 설정합니다. by @webs 2022. 7. 4. animation-direction animation-direction 속성은 애니메이션 움직임 방향을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-direction : normal; 적용 animation 버전 CSS3 사용성 ★★★☆☆ 정의(Definition) animation-direction 속성은 애니메이션 움직임 방향을 설정합니다. a.. 2022. 10. 28. charAt() 메서드는 지정한 숫자(index)의 단일 문자 값을 반환합니다. Reference/Javascript charAt() 메서드는 지정한 숫자(index)의 단일 문자 값을 반환합니다. by @webs 2022. 7. 4. charAt() charAt() 메서드는 지정한 숫자(index)의 단일 문자 값을 반환합니다. 특징 설명 유형(type) String.prototype.charAt() 버전(version) ES1 결과값(return) 문자(string) 사용성 ★★★☆☆ 문법(Syntax) "문자열".charAt(숫자) "javascript reference".charAt() //j "javascript reference".charAt('0') //j "javascript reference".charAt('1') //a "javascript reference".ch.. 2022. 10. 27. animation-delay 속성은 애니메이션 지연 시간을 설정합니다. Reference/CSS animation-delay 속성은 애니메이션 지연 시간을 설정합니다. by @webs 2022. 7. 4. animation-delay animation-delay 속성은 애니메이션 지연 시간을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-delay: 0s; 적용 animation 버전 CSS3 사용성 ★★★★★ 정의(Definition) animation-delay 속성은 애니메이션 지연 시간을 설정합니다. 애니메이션과 관련된 속성(Animation Relat.. 2022. 10. 26. a 태그는 다른 페이지 이동을 설정합니다. Reference/HTML 태그는 다른 페이지 이동을 설정합니다. by @webs 2022. 7. 4. 태그는 다른 페이지 이동을 설정합니다. 페이지 주소 뿐만 아니라, 메일 주소, 전화 번호 등도 연결할 수 있으며, 아이디(#) 값으로 페이지 내에서도 이동이 가능합니다. 특징 설명 요소 인라인 구조(Inline Element) 닫는 태그 적용 버전 HTML4 시각적 표현 밑줄과 파란색으로 표시 사용성 ★★★★★ 정의(Definition) 태그는 클릭하면 다른 페이지로 이동합니다. 현재 페이지에서 다른 페이지 URL로 연결하는 것을 하이퍼링크라고 합니다. 태그는 페이지 주소 뿐만 아니라, 메일 주소, 전화 번호 등도 연결할 수 있습니다. 태그는 아이디(#id)로 이동 할 수 있습니다. 태그는 target.. 2022. 7. 4. 포트폴리오는 이렇게 만들어야쥐~ 포트폴리오는 이렇게 만들어야쥐~ 나도 시작합니다. 이렇게 만들겁니다. 두고 보셔요~~ 2022. 4. 8. 난 이걸 써 본적은 없지만... 이랬을까? 난 이걸 써 본적은 없지만... 이랬을까? 애플 컴퓨터를 써 본적이 없지만 이랬나? 어렸을 때 컴퓨터 학원을 가서 그림판이라는 것을 해본적은 있는데.. 디스켓 가지고 가서 실행하고 했던 기억이 나는 구나 사이트 보기 2022. 3. 4. 로딩 애니메이션 만들 때 도움되는 Lwder.js 로딩 애니메이션 만들 때 도움되는 Lwder.js 로딩 애니메이션 만들기 귀찮을 때가 있다. 이걸 이용하면 쉽게 만들 수 있다. 다만 효과가 다양하지 않다는 아쉬움이 조금 있다. 사이트 보기 2022. 3. 4. 사이트는 같아도 색상이 다르다면 사이트는 같아도 색상이 다르다면 사이트는 같아도 색상이 다르다면 느낌이 아주 다르다. 포트폴리오를 만들다보면 이런 부분이 가장 중요한데 이걸 깨닫기 쉽지 않다. 특히 초보한테도 어렵ㄴ다. 그런 부분에 있어서 조금 도움이 될 수 있는 사이트다 사이트 보기 2022. 3. 4. 내가 원하는 THREE.JS 스킬 내가 원하는 THREE.JS 스킬 퀄리티가 다르다. 남들가 다를려면 이런걸 해야 하는데. 이것을 구현하기 위해서는 TypeScript, React（Create React App）, React Three Fiber（Three.js）, GLSL, InstancedMesh, gsap 를 할줄 알아야 한다. 사이트 보기 2022. 3. 4. Three.js의 진수를 보여주는 사이트 Three.js의 진수를 보여주는 사이트 Jesse Zhou의 환상적인 웹사이트: Three.js와 Blender로 만든 몰입형 3D라면 가게. 나도 이렇게 만들고 싶다. 도대체 이런건 어떻게 만드는 거야 사이트 보기 2022. 3. 4. Three.js 아티스트 작가 lithya.rocks 아티스트 작가 lithya.rocks 영상 아트 작품들은 three.js나 p5.js를 이용해서 표현한다. 스크립터라고 해야 하나, 영상 제작자라고 해야 하나! https://www.ilithya.rocks/ 2022. 2. 26. 네이버웹툰, 통합 MAU 8200만명 돌파 네이버웹툰, 1월 글로벌 통합 MAU 8200만명 돌파… “K 콘텐츠 산실로 우뚝” 네이버웹툰이 지난달 글로벌 월간 활성 이용자(MAU)가 사상 최대치인 8200만명을 돌파했다고 16일 밝혔다. 지난 2020년 12월 7200만명을 돌파한 이후 약 1여년 만에 1000만명이 증가한 것이다. 글로벌 이용자가 늘어나면서 유료 거래액도 증가했다. 네이버웹툰에 따르면 지난달 월간 거래액은 1000억원을 돌파했다. 앞서 네이버웹툰은 지난 2021년 8월에도 최초로 월간 거래액 1000억원을 돌파한 바 있다. 이 같은 성장은 기존 웹툰들의 해외 거래액 증가와 더불어 대형 신작과 영상화 IP 흥행 등을 통해 글로벌 이용자 유입이 대폭 확대된 데 기인한다. ‘여신강림’, ‘재혼황후’ 등 네이버웹툰의 인기 웹툰들의 1월.. 2022. 2. 16. 카카오, 브런치 작가 5만 명 돌파 # ‘글이 작품이 되는 공간’에서 ‘베스트셀러 작가가 되는 공간’으로 브런치는 ‘글이 작품이 되는 공간’이라는 콘셉트로 지난 2015년 6월 카카오가 선보인 콘텐츠 퍼블리싱 플랫폼이다. 별도의 작가 승인 제도를 통과한 엄선된 브런치 작가들이 양질의 콘텐츠를 발행하는 것이 특징이다. 브런치에서 선보인 작품들이 출간까지 이어지면서, 브런치 작가 5만 명 중 책을 출간한 작가는 2천 9백여 명, 이들이 출간한 도서는 4천 6백여 권에 달한다. 특히, 브런치를 통해 선보인 도서들이 베스트셀러에 오르면서 출간의 새로운 판로를 개척했다는 평가를 받고 있다. 는 전자책으로 출간돼 밀리의 서재 종합 차트 1위를 기록하고 종이책 출간까지 이어진 작품이며 은 2021년 6월 출간 후 6개월 만에 7쇄를 돌파했다. 이 외에.. 2022. 2. 16. 둠 포탈을 구현한 Three.js의 퀄리티 Bruno Simon님의 최신 실험 작품입니다. Three.js를 사용하여 Doom Portal 재창조 하였다. 대단하다, 말이 안된다. 2022. 2. 15. 오버레이 메뉴 화면 전환 효과 SVG 오버레이 메뉴 화면 전환 효과 SVG 2022. 2. 14. SVG 파비콘 만드는 방법 SVG 파비콘 만드는 방법 전통적으로 파비콘은 ico 파일로 만들었지만 현재는 svg 파일로도 가능하다. SVG로 만들면 용량도 매우 적고 백그라운드 투명도도 지원하기 때문에 다크 모드 했을 경우 더 좋다 자세히 보기 2022. 2. 11. 이전 1 ··· 6 7 8 9 10 다음
