[카테캠 선택강의] 정규표현식

정규표현식(RegExp, Regular Expression) 문자 검색(Search) 문자 대체(Replace) 문자 추출(Extract) 문자 검색, 문자 대체, 문자 추출을 하는 패턴이다. 생성 방법 // 생성자 // new RegExp('표현', '옵션') // new RegExp('[a-z]', 'gi') // 리터럴 // /표현/옵션 // /[a-z]/gi const str = ` 010-1234-5678 thesecon@gmail.com Hello world! https://www.omdbapi.com/?apikey=7035c60c&s=frozen The quick brown fox jumps over the lazy dog. hello@naver.com http://localhost:1234..

[카테캠 선택강의] JS 심화학습

Symbol 변경이 불가한 데이터로, 유일한 식별자를 만들어 데이터를 보호하는 용도로 사용할 수 있습니다. const sKey = Symbol("Hello"); const user = { key: "일반 정보", [sKey]: "민감한 정보", // 대괄호 표기법 }; console.log(user.key); // "일반 정보" console.log(user["key"]); // "일반 정보" console.log(user[sKey]); // "민감한 정보" // 심볼은 유일한 식별자를 만들어 낸다. // 따라서 sKey !== Symbol("Hello") 이다. console.log(user[Symbol("Hello")]); // undefined Symbol을 사용하는 예제 const birthKey..

[카테캠 선택강의] 기타 Web APIs

콘솔 메서드의 종류 console.log 일반적인 콘솔 메세지이다. HTML 트리구조를 볼 수 있다. console.dir 객체가 어떠한 속성으로 구성되어있는지 확인할 수 있다. console.count 콘솔이 몇번 호출되었는지 카운트한다. 함수에 적용하면 해당 함수가 몇번 호출되는지 확인이 가능하다. const f = () => { console.count('호출되었습니다.') } for(let i=0; i item.includes(name)); return cookie ? cookie.split("=")[1] : null; } Storage(스토리지) 도메인 단위로 저장 5MB 제한 세션 혹은 영구 저장 가능 세션 스토리지: 브라우저 세션이 유지되는 동안에만 데이터 저장 localStorage: 따로..

[카테캠 선택강의] 반응형 적용

미디어 쿼리 미디어 쿼리를 사용할 때 나는 흔히 다음과 같이 많이 사용한다. 이게 실은 all and 가 생략되어있었다는 것을 알게되었다. /* @media 타입 and (기능) { 스타일 } */ @media (min-width: 360px) { } @media all and (min-width: 360px) { } 흔히 사용되는 것은 screen 타입이다. 조금 신기했던게 print 타입을 이용하면 프린트 출력되는 화면에 웹사이트가 어떤 UI 로 보일지도 고려할 수 있다. 전혀 몰랐던 것이 있는데 다음처럼 breakPoint 에 대해 CSS 파일을 나누어 import 할 수도 있다는 것을 알게 되었다. 어쩌면 사용할 수도 있을 것 같다. 타입 또한 같이 명시할 수 있음을 상기하자. transition..

[카테캠 선택강의] 섹션과 푸터 만들기

섹션을 만드는 레이아웃은 다음과 같다. See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen. Video 태그 주로 사용하는 속성 autoplay 자동 재생 여부를 정할 수 있다. controls 소리조절, 일시 정지 , 재시작을 할 수 있는 컨트롤러를 제공한다. loop 루프를 true 설정하면 비디오가 반복재생된다. muted 음소거를 설정할 것인지 여부를 정할 수 있다. src 삽입할 동영상의 주소를 명시한다. mask-image 비디오 태그의 영상을 사각형 형태로 출력이 된다. 하지만 아래 아이패드 레이아웃은 살짝 기울여져 있기 때문에 검은 영역이 튀어나오는 현상이 발생한다. mask-image 를 사용하면 문제를 해결할 수..

[카테캠 선택강의] IntersectionObserver

Intersection Observer 란? 어떤 요소가 뷰포트영역에 들어오고 나가는 것을 판단하는 기능을 한다. const io = new IntersectionObserver(function(entries){ entries.forEach(function(entry){ ... }) }) const h1Els = document.querySelectorAll('h1') h1Els.forEach(function(el){ io.observe(el) }) 1. InterSectionObserver 생성자를 호출합니다. 2. h1 요소들을 모두 찾아 유사 배열 형태로 h1Els 에 할당합니다. 3. h1 요소들을 InterSectionObserver 에 등록합니다. isIntersecting 이 true 이면 ..

[카테캠 선택강의] 콘텐츠 구성

figure figure 를 사용하여 img 와 img 에 대한 설명을 figcaption 으로 사용할 수 있다. 어떠한 기능을 가진다기 보단, 이미지와 설명을 추가하고 그것을 figure 로 묶어내는 의미적인 부분에서 사용되는 태그이다. An elephant at sunset 이미지 선택 user-select 현대의 웹 사이트는 이미지를 텍스트로 취급하지 않고 독립적인 객체로 생각하고 있다. 이미지가 드래그가 되지않게 하는 속성은 다음과 같다. See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen. mdn을 보면 어떤 값이 default 인지 확인할 수 있다. 이미지 드래그 user-drag 다음 영상을 보면 이미지가 드래그 되는..

[카테캠 선택 강의] 내비게이션 사용기술 정리

Sticky postion 의 속성인 sticky 를 제대로 사용하기 위해서는 다음 조건이 필요하다. scroll top bottom left right 중 하나 설정된 위치에 도달하기 전까지는 static 처럼 행동하다 설정된 위치에 다다르면 fixed 처럼 행동한다. 또한 부모영역까지만 적용된다. 간단한 예시를 보자. See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen. 다음은 부모영역까지만 적용된다에 근거가 되는 예제이다. See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen. backdrop-filter 이 어마무시한 CSS 는 무엇인가. 처음봤다. ..

[카테캠 선택강의] 애플 반응형 웹사이트 헤더

폰트 적용 순서 우선적으로 Roboto 가 적용된다. 하지만 Roboto 는 한글폰트는 없기 때문에 한글에는 2순위인 Noto Sans KR 이 적용된다. 1순위, 2순위도 존재하지 않는 경우 내장되어있는 글꼴 계열인 sans-serif 가 적용된다. font-family: "Roboto", "Noto Sans KR", sans-serif; 단어 단위 줄바꿈 단어 단위의 줄바꿈을 변경하는 CSS 속성은 word-break 이다. word-break 의 디폴트는 normal 인데, 이는 영어 단어에는 잘 적용된다. 하지만 한글에는 적용되지 않는 것을 볼 수 있다. 따라서 한중일(CJK) 텍스트 에도 줄바꿈이 적용되게 하려면 word-break: keep-all 속성값을 주면된다. Flex align-ite..

[카테캠 선택강의] 헤더와 드롭다운 메뉴

img baseline img { /* img(인라인 요소) 하단에 Baseline 공백을 제거 */ display: block; } 중앙 정렬 정렬을 할때는 보통 flex 를 사용하는데 강의를 보니 내가 잘 사용하지 않지만 많이 쓰이는 방법을 설명해주셔서 기록한다. 만약 위와 같은 레이아웃을 잡아야한다면 어떻게 했을까? 다음과 같이 flex 를 사용했을 것이다. HTML CSS .outer { display: flex; align-items: center; width: 400px; height: 250px; background-color: royalblue; } .inner { width: 100px; height: 100px; background-color: orange; } 솔직히 뭐가 좋다의 영역..