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

미디어 쿼리 미디어 쿼리를 사용할 때 나는 흔히 다음과 같이 많이 사용한다. 이게 실은 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 를 사용하면 문제를 해결할 수..

AWS 과금 해결과정 (RDS 과금)

어억.. AWS 에서 메일와서 보니까 프리티어가 끝나서 요금이 발생했다. 분명히 EC2 다 종료시켜놨는데.. 이게 무슨 일이고.. 찾아보니까 RDS 에서 과금 됐다. 근데 RDS 에는 아무것도 없더라.. 혼란스러웠다. 딱 내 상황에 맞는 해결방법을 찾지못하여 고객센터에 문의 드렸다. 메일 내용은 다음과 같다. 한글로도 문의가 되지만, 영어로 문의는 밤낮없이 받는다고 되어 있어 영어로 문의를 넣었다. 밤낮이 없는 건 아니였다. 하루 있다가 답변이 왔다 ㅋㅋㅋ 아마 주말이여서 그런가보다. 문제는 지역설정을 잘못해서 였다. 오레곤 지역으로 바꾸어보니 DB가 존재했다. 이런~ 답변은 DB 와 스냅샷을 삭제하라는 내용이였다. 스냅샷을 삭제하는 과정에서 삭제를 할 수 없다는 안내를 받을 수 있는데 이를 해결하기 위..

[카테캠 선택강의] 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 이면 ..

[카테캠 5주차] 자바스크립트 기초

모듈화 JS 파일이 커지면 언젠가 파일을 여러개로 분리해야한다. 이렇게 각각 분리된 파일을 모듈이라 하는데, 이렇게 모듈로 나눠진 파일을 import, export 하기 위해선 script 태그에 type 을 module 로 선언해주어야한다. 템플릿 리터럴 흔히 백틱을 사용해서 문자열을 나타내는 것을 템플릿 리터럴 이라고 부른다. 템플릿 리터럴을 사용하면 문자열 안에 변수를 사용할 수 있는 문자열 보간을 사용할 수 있다. const hello = `Hello ${myName}!`; NaN 데이터 타입은 숫자지만 숫자로 표현할 수 없을 때 사용된다. console.log(0.1 + undefined) 부동 소수점 오류 컴퓨터가 10진수를 2진수로 표현하면서 생기는 무한 소수를 유한한 값으로 나타내면서 세부..

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

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..

hover에서 벗어날 때 transition 바로 종료

문제 상황 이게 뭐람.. 총체적 난국이다. 1. 우선 transform 에 transition 이 적용되는건 좋으나 hover 가 끝난 이후에 다시 원래자리에 되돌아가는 것이 transition 되는 것이 내가 원하는 동작이 아니였다. 2. transform-origin 은 변경하면 바로 기준점에 적용되지 않고, 이것조차 transition 이 걸려서 기준점이 서서히 변경되었다. 문제 해결 방법 .item 클래스를 가지고 있는 요소에 자바스크립트를 사용하여 transform-origin 을 변경하고 있다. 이때 transition 이 해당 요소에 걸려있기 때문에 자바스크립트에 의해 transform-origin 변경될 때 transition 이 적용되는 것이다. .item { width: 20px; he..

transform-origin 이란?

transform-origin transform 과 함께 쓰이는 CSS 이다. transform 이 발생하는 기준점 위치를 정한다. transform-origin: 50% 25% transform-origin: 100% 100% transform-origin: 0 0; 백문이 불여일견 이제 한번 돌려보자. 파란색 사각형에 hover 하면 rotate 된다. See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen. 그래서 이걸 어디 써먹나? transform-origin , transform: rotate , overflow:hidden 을 잘 사용하면 저렇게 뽀족한 UI 를 만들 수 있다.