CSS 속성
CSS속성의 역할
화면에 예쁘게 나오도록 만드는 역할을 한다.
CSS 속성의 종류
- 박스모델
- 글꼴, 문자
- 배경
- 배치
- 플렉스(정렬)
- 전환
- 변환
- 띄움
- 애니메이션
- 그리드
- 다단
- 필터
박스모델
너비 (width,height)
<span> 인라인 요소
- width
➡️ 포함한 콘텐츠 크기만큼 자동으로 줄어듬! - height
➡️ 포함한 콘텐츠 크기만큼 자동으로 줄어듬!
<div> 블록 요소
- width
➡️ 부모의 요소의 크기만큼 자동으로 늘어남! - height
➡️ 포함한 콘텐츠 크기만큼 자동으로 줄어듬
최대/최소 너비 (max/min-width/height)
글꼴, 문자
CSS 단위
margin (외부 여백)
margin : auto= 가운데 정렬띄어쓰기로 구분해서 각각 다른 위치에 적용 가능 ⬇️
padding (내부 여백)
- 요소의 크기가 늘어남!
border (테두리 선)와 색상 표현
border가 들어가면, 요소의 크기가 늘어남!
borde-width
borde-style
border-color
색상 표현
기타 속성들
border-radius (모서리 둥글게)
이런 느낌으루 깎아냄
이렇게 원하는 부분만 깎을 수 있음
box-sizing
부모에서 적용한 너비를 유지하고 싶으면(padding 이나 border 때문에 자식 사이즈가 늘어난 경우),
자식 요소에서
box-sizing: border-box;를 적용하면 됨box-sizing: border-box;
overflow (넘침 제어)
display (출력 특성)
이런식으로
<span>요소에display:block 을 추가하면 너비 값을 지정할 수 있음
투명도
글꼴
권장하는 방법 : 배수로 입력
ex) line-height: 2; (폰트 사이즈가 바뀌더라도 일정한 높이 유지 가능)
글꼴 계열
문자
글자의 색상
문자의 정렬 방식
문자의 장식(선)
문자 첫 줄의 들여쓰기
배경
요소의 배경 색상
요소의 배경 이미지 삽입
요소의 배경 이미지 반복
요소의 배경 이미지 위치
요소의 배경 이미지 크기
❗️ 요소의 배경 이미지 스크롤 특성
배치
요소의 위치 지정 기준
static➡️ 아무것도 지정하지 않은 것과 동일함
relative➡️ 요소 자신을 기준으로 배치! (근데 사실성 거의 안씀)
absolute➡️ 위치 상 부모 요소를 기준으로 배치! (구조 상 부모요소 X)
근데 이제 위치 상 부모 요소를 지정해주지 않으면, 뷰포트를 기준으로 정렬됨
그래서 기준으로 삼을 부모 요소에
position: relative로 포지션 값을 부여 해줘야 함
배치의 기준이 바뀌면 (다른 요소로) 더이상 주변과 상호작용 하지 않음.
1,2,3번이 붙어있다고 가정하면,
2번에position absolute을 지정하면 1번과 3번이 붙게 됨.
(더이상 2번은 1,3번과 상호작용 하지 않음므로)
요소의 각 방향별 거리 지정
요소 쌓임 순서
1번 조건이 해당되지 않는 경우, 애초에 안쌓임
z-index➡️ 요소 쌓임 정도를 지정
position속성을 사용하면...? (position: relative는 제외)
플렉스(정렬) Containers
Container와Items가 사용하는 속성들이 다름
display
flex-direction
주 축을 설정 (수평 or 수직 정렬)
row&row-reverse
주 축,
Main-axis: 수평 축 (row니까)교차 축,
Cross-axis: 수직 축 (column이니까)
column&column-reverse
flex-wrap➡️ Flex Items 묶음(줄 바꿈) 여부
그냥
display: flex로 되어 있으면 한줄에 우겨넣지만,
flex-wrap: wrap속성을 넣으면 크기가 그대로 줄바뀜 처리됨
justify-content(수평 정렬,flex기본 값 기준)
➡️ 주 축의 정렬 방법
align-content(수직 정렬,flex기본 값 기준)
➡️ 교차 축의 여러 줄 정렬 방법
align-items
➡️ 교차 축의 한 줄 정렬 방법
- 일반적으로 정 가운데 정렬 할때
.container{ display: flex; justify-content: center; align-items: center; }``` 
플렉스(정렬) Items
order
➡️ Flex Item의 순서
숫자가 작을수록 앞에 정렬 됨
flex-grow
➡️ Flex Item의 증가 너비 비율
➡️ 빈 공간을 채우는 비율을 설정
flex-shrink
➡️ Flex Item의 감소 너비 비율
flex-shrink: 0의 뜻 : 크기 감소를 허용하지 않겠다 !
flex-basis
➡️ Flex Item의 공간 배분 전 기본 너비
flex-basis: auto로 되어 있으면,flex-grow값을 설정 했을때,
안의 콘텐트를 제외한 나머지 부분의 비율로 계산하기 때문에,
이렇게
flex-basis: 0으로 설정 해줘야 온전하게 비율이 설정된다.
전환
transition
➡️ 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성
(단축 속성 : 해당하는 다른 속성들이 존재함)
transition-property
➡️ 전환 효과를 사용할 속성 이름을 지정 (기본 설정 :all)
transition-duration
➡️ 전환 효과의 지속시간을 지정
transition-timing-function
➡️ 전환 효과의 타이밍(Easing) 함수를 지정easing function 모음
GreenSock Ease Visualizer (직접 만들어보는 사이트)
transition-delay
➡️ 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정
변환
기울이기, 크기 조절 등 요소를 변환 시킬때 사용
transform
➡️ 요소의 변환 효과
2D 변환 함수
translate
scale(배수)
rotate
skew
3D 변환 함수
perspective 함수
➡️ 원근법 함수는 제일 앞에 작성해야 한다!
perspective 속성
➡️ 하위 요소를 관찰하는 원근 거리를 지정
perspective 속성과함수차이점
perspective 속성은 원근 거리가 부모를 기준으로 적용perspective 함수는 원근 거리가 관찰 대상 자체를 기준으로 적용💡
함수보다는속성을 주로 씀
backface-visibility
➡️ 3D 변환으로 회전된 요소의 뒷면 숨김 여부
오늘의 꿀팁
- url = (uniform resource locator)
오늘의 한마디
😸 와 ! 이제 나도 클론코딩 할 수 있다!!!!
