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

섹션을 만드는 레이아웃은 다음과 같다. 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 이면 ..

[카테캠 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..

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

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; } 솔직히 뭐가 좋다의 영역..

[카테캠 4주차] 오버워치 캐릭터 선택 예제

lang="ko" 의 의미 margin 을 사용한 중앙 정렬 레이아웃 잡을때 max-width 로 잡는게 반응형 대응하기 더 편한 것 같다. width 로 css 를 주면 잘려버리기 때문이다. width 값이 있는 요소에 margin: 0 auto 를 주게 되면 중앙 정렬이 된다. .heroes { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; max-width: 700px; margin: 0 auto; } 캐릭터 image 다음처럼 url 함수를 사용하여 캐릭터 이미지를 넣어주었을 때 이미지가 나오지 않는 경우에는 어떻게 해야할까. .hero:nth-child(1) .image { background-image: url("htt..

[카테캠 4주차] CSS 속성

투명도 opacity의 정수 0은 생략이 가능하다. Q) opacity 속성의 기본값은? 1 글꼴 font-style font-weight font-size line-height 와우~ line-height 에 다음처럼 2 또는 200%로 지정하면 자동으로 font-size 에 맞춰 2배수로 line-height 가 할당된다. 이때 까지 나는 아래 예시처럼 line-height 에 px 를 명시했는데, 이제는 배수를 사용해야겠다. 아래 예시를 보면 line-height 가 32px로 할당 되어있고 글씨는 그 중앙에 위치하는 것을 알 수 있다. 따라서 글씨는 line-height의 중앙에 배치된다. font-family 글씨체는 font-family 속성으로 변경한다. 글꼴계열은 내장되어있는 글꼴을 명시해..

[카테캠 3주차] CSS 속성

개요 속성 HTML 속성 (Attributes) CSS 속성 (Properties) JS 속성 (Properties) HTML 이랑 CSS, JS의 속성 영어 용어가 다르구나~ 정도로 알아두면 좋을 듯. 구분하면 유식해 보일 수도.. 너비(width, height) width 와 height 의 기본값은 auto 이다. 직접적으로 값을 주고 싶다면 px, em, rem, vw, vh 를 사용하면 된다. 인라인 요소의 auto 값 인라인 요소의 auto 값은 width , heigth 모두 요소의 콘텐츠 크기만큼 자동으로 할당된다. 블록 요소의 auto 값 블록 요소의 auto 값은 width 의 경우 부모 요소의 크기 만큼 자동으로 늘어난다. height 같은 경우 콘텐츠의 크기 만큼 자동으로 줄어든다...