멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습
🌃 CSS 실무 테크닉
반응형 이미지
이미지 포맷의 종류
- GIF(Graphics Interchange Format)
- 256색의 컬러만 표현 가능하여 선명하지 않음
- 용량이 작음
- 투명 표현 가능(투명도는 조절 불가)
- 그림자 표현 불가능
- 애니메이션 처리 가능
- JPG/JPEG (Joint Photographic Expert Group image)
- 화소가 매우 높음
- 용량이 작음
- 투명 처리 불가
- PNG (Portable Network Graphics)
- 웬만한 컬러는 모두 표현 가능
- 투명 처리 가능
- 용량이 큼
- SVG (Scalable Vector Graphics)
- 손실이나 품질 저하 없이 모든 크기에서 렌더링 가능
- WebP (Web Picture Graphics)
- JPEG 이미지에 비해 용량이 70% 수준으로 낮음
- 더 뛰어난 색상을 지원하는 포맷
- PNG처럼 투명도 표현 가능
- GIF처럼 애니메이션 표현 가능
- 아직 지원하지 않는 브라우저가 많기 때문에 브라우저 지원 여부 확인 필수
- AVIF (AV1 Image File Format)
- WebP와 성능 같으며, JPEG 이미지에 비해 50% 수준으로 낮은 용량을 자랑하는 차세대 이미지 포맷
- 아직 지원하지 않는 브라우저가 많기 때문에 브라우저 지원 여부 확인 필수
- image 포맷 별 브라우저 지원 여부 확인
반응형 이미지 만들기
width: 100%;
-화면 너비(viewport)가 바뀌면 이미지 사이즈도 함께 움직임. 단, 이미지가 너무 커지면 화질이 깨질 수 있음
max-width: 100%;
-그냥 width와 차이점은 원본 사이즈를 지킴. 이미지가 깨지면 안될 경우 max-width 사용
반응형 백그라운드 이미지
-
단축속성
background: url("이미지 링크") center /cover no-repeat;
-
background-position: center;
-중심축을 중앙에 위치함으로써 반응형 효과를 줄 수 있음
background-size: cover;
-화면을 가득 채움. 반응형으로 조절되지 않으며 컨테이너를 완전 덮어버림.
-빈 공간, 여백없이 가득 채움.
-이미지가 짤려도 괜찮으니 일단 가득 채우겠다는 성질
-만약, 중심축을 바꾸게 된다면 반응형처럼 효과를 줄 수 있음
background-size: contain;
-원본 이미지 자체를 온전히 보전하려는 특성을 가지고 있음
-빈 공간, 여백이 생기며 짤리는 부분없이 모든 이미지를 보존한 상태에서 반응형으로 컨테이너를 채우려고 하는 것
-Logo 혹은 icon 처럼 이미지가 짤리면 안되는 경우에 contain사용
반응형 동영상
동영상 상식
- 브라우저가 지원하는 비디오 포맷
https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers
- video 속성
- preload = "none", "auto": 페이지 로드 시, 영상을 미리 로드할지 말지 결정
- poster: 비디오를 내려받을 동안 혹은 영상을 재생할 때까지 표시할 이미지 지정
- controls: 브라우저가 재생에 필요한 컨트롤러를 제공할지 지정
- autopay: 파일 다운로드가 완료되면 자동으로 재생될지 지정
- muted: 음소거
- loop: 비디오가 끝나고 반복 재생할지 지정
반응형 동영상 만들기
- 반응형 이미지와 동일하게
width,max-width를 이용하여 반응형으로 적용 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
video {
min-width: 100%; /*동영상 크기도 반응형으로 만들 수 있다*/
position: fixed; /* 화면을 뷰포트 기준으로 움직임 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100vh; /* 영상의 높이를 뷰포트 높이만큼 맞추겠다 (꽉채워짐) */
/* min-height: 100%; 동영상 최소 너비가 100%라는 뜻으로 위 height 100vh과 같은 결과가 나옴(꽉참) */
opacity: 0.2; /* 배경의 투명도. 그래서 보통 뒷 배경으로 사용할 때 사용함 */
pointer-events: none; /* 사용자가 상호작용하지 못하도록 함 */
}
</style>
</head>
<body>
<!-- <video autoplay controls loop muted src="nextlevel.mp4"></video> -->
<article>
<video src="./nextlevel.mp4" autoplay muted loop></video>
</article>
</body>
</html>💜 Bootstrap
- CSS 라이브러리
-'라이브러리'란?- 함수의 집합 or 코드의 집합
- 누군가 만들어 놓은 것을, 내가 필요할 때 가져다 사용할 수 있음 = 종합 공구세트
- 반응형 사이트를 구축하기에 최적화 되어있음
- Bootstrap4와 Bootstrap5의 가장 큰 차이는 jQuery가 없어졌다는 것
적용 방법
-
Bootstrap 사이트 접속
https://getbootstrap.com/ -
Download 클릭하여 작업 환경에 맞게 설치 (실습은 CDN으로 진행)
그리드 시스템
- 반응형 웹 디자인을 구현할 때 사용되는 레이아웃 시스템
- 웹페이지를 일련의 열과 행으로 분할하여 콘텐츠를 쉽게 배치하고 정렬할 수 있음
- 그리드 시스템은 12개의 열로 구성되어 있으며, 이 열들을 조합하여 원하는 레이아웃을 만듦
부트스트랩을 잘 활용하면 효율적으로 개발 할 수 있고, 생산성이 매우 향상될 것 같다. 특히 '그리드 시스템'이 가장 핵심이라고 강조해주셨는데, 개인 실습 할 때 부트스트랩도 다양하게 활용해보도록 하자!
열정적 끈기의 힘(GRIT)