2023-10-10 본 캠프 4일차 / 23일차 TIL

2023-10-10 본 캠프 4일차 / 23일차 TIL

팀 프로젝트 : 팀소개 페이지 제작

진행사항

- 반응형 웹 구현

- ReadMe 작성

- 디테일 페이지 viewport 변경

변경전/후

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

<meta name="viewport" content="width=device-width, initial-scale=0.5">

 

예정사항

- 발표준비

---

유데미 강의 시청 : CSS 완벽 가이드 (Flexbox, Grid & Sass 포함) : 섹션7 배경 이미지와 이미지 이해하기

- background-size
px : 해당 px의 단위만큼 이미지 너비 조정, 여백이 있다면 해당 여백에는 반복하여 이미지가 보여진다.
px px : width 값, height 값 모두 설정.(강제, 비율고려 x)
cover : 컨테이너의 너비 또는 높이 중 이미지를 고려하여 자동 정렬하여 배치, 컨테이너를 언제나 여백없이 채워줌 (권장)
contain : 컨테이너의 여백을 고려하지는 않지만, 전체 사진을 보여준다.

- background-repeat
no-repeat : 반복제거 
repeat-x : x축에서만 반복
repeat-y : y축에서만 반복

-background-position
px px : 순서대로 x축, y축을 기준으로 이미지 위치 조정
left, right, bottom, top : 지정된 값으로 각각에 맞는 위치로 이미지 위치 조정
center : 지정된 값으로 이미지 가운데 정렬

-background-origin 
padding-box : 기본속성, border 안쪽이 기준
border-box : border가 기준으로 border부분에도 이미지가 존재
content-box : content가 기준, 내부 content가 시작하는 부분 즉, padding을 제외한 부분부터 이미지 생성

-background-clip 
padding-box : border 부분 이상 넘어간 이미지 자르기
border-box : border를 넘어간 이미지 자르기
content-box : 내부 content 부분으로만 이미지 자르기
*background-clip은 origin을 덮어쓴다.

-background-image:liner-gradient()
to top right, to top left, to bottom right 등 정해진 각도 사용가능
deg로 지정한 각도 사용가능
색상 여러개 입력가능
기본적으로 색상의 수만큼 같은 비율로 색상의 시작과 끝이 나누어지지만 임의로 설정가능 (ex. red 70%, blue 80%)

-background-image:radial-gradient()
liner-gradient 사용법과 비슷, 검색하여 사용

- background 중첩
background는 중첩이 가능하며, 각 background는 쉽표로 구분됨
쉼표 단위로 내부에는 각 background에 해당하는 프로퍼티를 입력해야한다.
background를 중첩하는 경우는 투명도를 줄때 이용한다.

- background 축약
background 프로퍼티는 축약표현이 가능하다.
이때 background-position과 size는 슬래시(/)로 구분한다.


image 
- img 태그는 외부 컨테이너의 크기에 따라 변화하지 않으며, 만약 따르게 만들고 싶다면 %를 이용하여 직접 선언해주어야한다.
- img 태그는 외부 컨테이너가 inline인 경우(a tag) 외부 컨테이너 크기를 상속받지 않는다. (100%)
- 즉 image 태그의 크기를 조정할 때는 외부 컨테이너의 display 속성을 참고하자.

 

 

filter 
- 요소를 시각적으로 꾸미는 프로퍼티

- 내용이 많으므로 mdn 참고

filter - CSS: Cascading Style Sheets | MDN

- 호환성에 주의