figure
figure 를 사용하여 img 와 img 에 대한 설명을 figcaption 으로 사용할 수 있다.
어떠한 기능을 가진다기 보단, 이미지와 설명을 추가하고 그것을 figure 로 묶어내는 의미적인 부분에서 사용되는 태그이다.
<figure>
<img src="/media/cc0-images/elephant-660-480.jpg"
alt="Elephant at sunset">
<figcaption>An elephant at sunset</figcaption>
</figure>
이미지 선택 user-select
현대의 웹 사이트는 이미지를 텍스트로 취급하지 않고 독립적인 객체로 생각하고 있다.
이미지가 드래그가 되지않게 하는 속성은 다음과 같다.
See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.
mdn을 보면 어떤 값이 default 인지 확인할 수 있다.
이미지 드래그 user-drag
다음 영상을 보면 이미지가 드래그 되는 현상이 볼 수 있다.
CSS 로 이미지 드래그를 막는 방법이 있다.
See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.
Can I use
https://caniuse.com/webkit-user-drag
브라우저 별로 CSS 가 적용될 수 있는지 알려주는 사이트이다.
사파리는 지원된다.
chrome 은 부분적으로 지원된다고 명시되어있다.
지원하지 않는 브라우저는 붉은색으로 명시되어있다.
벤더 프리픽스는 왜 붙혀야할까?
브라우저를 만드는 각각의 공급업체는 최신기술 혹은 실험 기술들을 자신의 브라우저에서 사용할 수 있게 하지만, 표준기술과는 구분하기 위해서 사용한다.
고정된 요소를 만들땐 Position 과 translate 를 사용해보자.
See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.
위 코드의 click 버튼을 눌러보자. 요소가 사라져버리면 레이아웃이 무너져버린다.
따라서 position 이 필요하다.
아래코드처럼 position 과 translate 를 사용해서 고정시켜버리면 만약 요소가 JS 로 인해 제거되더라도 레이아웃이 깨지지 않는다.
See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.
CSS 변수
css 에서도 JS 의 변수처럼 변수를 선언하여 사용할 수 있다.
html 에 변수를 선언하면 html 를 포함한 하위 요소에서 모두 사용이 가능하다.
html {
--color-white: #fff;
--color-black: #000;
--color-font: #1d1d1d;
--color-font-darkgray: #6e6e6e;
--color-font-middlegray: #b7b7b7;
--color-font-lightgray: #f5f5f5;
--color-link: #0071e3;
--color-link-focus: #81b9f1;
--color-border: #d2d2d2;
--color-header: #3a3a3a;
--color-section: #f5f5f5;
--color-shadow: rgba(0, 0, 0, 0.4);
}
또한 html 이 아닌 다른 모든 요소에서도 적용할 수 있다. 다만 범위는 마찬가지로 선언한 요소를 포함한 하위요소 까지이다.
변수를 사용할 때는 var( ) 를 사용한다.
.container {
--red: red;
--w: 200px;
--h: 100px;
border: 4px solid red;
background-color: var(--red);
}
이미지 스프라이트
많은 이미지를 다운로드 받게 되면 과부하가 걸리기 때문에 많은 이미지가 합쳐있는 하나의 이미지를 다운로드 받고, 이를 기반으로 background-image의 position을 이용하여 이미지를 표기하는 방법입니다.
애니메이션
animation 속성을 사용할 때, 단축속성은 다음과 같다.
animation: name, duration, [ 나머지 속성은 순서 상관 없음 ]
See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.
animatione-fill-mode
See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.
none
forwards
backwards
both
forwards 와 backwards 를 합친 것이다.
'카카오 테크 캠퍼스 > HTML CSS JS Advanced' 카테고리의 다른 글
[카테캠 선택강의] 섹션과 푸터 만들기 (2) | 2023.05.16 |
---|---|
[카테캠 선택강의] IntersectionObserver (2) | 2023.05.15 |
[카테캠 선택 강의] 내비게이션 사용기술 정리 (2) | 2023.05.12 |
[카테캠 선택강의] 애플 반응형 웹사이트 헤더 (0) | 2023.05.12 |
[카테캠 선택강의] 헤더와 드롭다운 메뉴 (1) | 2023.05.07 |