[기초/복습] CSS 속성 2

글꼴

 

font-size: {기본 사이즈 16px, 단위를 이용해서 사이즈로 지정 할 수 있음}

font-weight: {normal(기본두께),bold,700(두껍게),100~900(100단위의 숫자9개, normal과 bold 이외 두께)}

font-style : 글자의 기울기 {normal(기본,기울기 없음),italic(기울기)}

line-heigh :한 줄의 높이, 행간과 유사 {숫자(배수), 단위등으로 지정}

font-family: 글꼴 지정 {글꼴1, "글꼴2"...글꼴계열;} 띄어쓰기가 있는 폰트면 "" 따옴표로 묶는다. sans-serif

 

문자

 

color : 글자의 색상 {rgb(0,0,0,), 색상}

text-align : 문자의 정렬방식 

text-decoration : 문자의 장식(선) {none, underline(밑줄), line-through (중앙선)}

text-indent : 문자 첫 줄의 들여쓰기 {0 (들여쓰기 없음), 단위로 지정} 음수를 사용할 할 수 있다.

 

배경

 

background-image: url("경로"), none (이미지 없음)

background-size: auto(이미지의 실제크기), 단위, cover(비율을 유지, 요소의 더 넓은 너비에 맞춤), contain (비율 유지, 더 짧은 너비에 맞춤)

background-repeat: no-repeat(반복없음),repeat(이미지를 수직,수평 반복),repeat-x,y (수평수직)

background-position: 배경 이미지 위치 방향,단위로 지정할 수 있음

background-color: transparent(투명함), 색상

background-attachment: 배경 이미지 스크롤 특성, scroll(이미지가 요소를 따라서 같이 스크롤), fixed(이미지가 뷰포트에 고정 스크롤 x)

 

배치(1)

position: 요소의 위치 지정 기준 {static(기준없음), relative(요소 자신을 기준),absolute(위치 상 부모 요소를 기준),fixed(뷰포트를 기준) * 위치 상 부모 요소를 꼭 확인

부모요소의 absolute,fixed,relative 해야 자식 요소의 absolute가  됌

static 이면 바깥으로 나감 

 

배치(2)

요소 쌓임 순서 (stack order)

어떤 요소가 사용자와 더 가깝게 있는지 결정

1. 요소에 position속성의 값이 있는 경우 위에 쌓임

2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임

3. 1번과  2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임

z-index가 크다고 요소쌓임이 첫번째가 될 수 없다 position이 있어야 제일 위에 쌓일 수 있다.

 

배치(3)

z-index : 요소 쌓임 정도를 지정

auto(부모 요소와 동일한 쌓임 정도), 숫자 (숫자가 높을 수록 위에 쌓임)

 

요소의 display가 자동으로 변경됨

position 속성의 값으로 absolute,fixd가 지정된 요소는, display속성이 block으로 번경됨.

 

플렉스(정렬) Container(1)

display: flex; 

flex container 화면 출력 보여짐 특성 

flex: 블록 요소와 같이 flex container 정의 수직으로

inline-flex: 인라인 요소와 같이 flex container 정의 왼쪽에서 오른쪽으로 수평으로

flex-direction : 주 축을 설정

row :행축(좌=>우)

row-reverse:행축 (우=>좌) 반대로 설정하고 싶을때

flex-wrap: flex item 묶음(줄 바꿈)여부

nowrap 묶음 없음, wrap 여러 줄로 묶음

 

justify-content : 주축의 정렬 방법

flex-start : flex item을 시작점으로 정렬

flex-end : flex item을 끝점으로 정렬

center : flex item을 가운데로 정렬

 

align-content : 교차 축의 여러줄 정렬방법

stretch : flex item을 시작점으로 정렬

flex-start : flex item을 시작점으로 정렬

flex-end : flex item을 끝점으로 정렬

center : flex item을 가운데로 정렬

 

align-items 교차 축의 한줄 정렬 방법

stretch : flex item을 시작점으로 정렬

flex-start : flex item을 시작점으로 정렬

flex-end : flex item을 끝점으로 정렬

center : flex item을 가운데로 정렬

 

 

플렉스(정렬) Container(2)

order: flex item의 순서 {0 (순서 없음), 숫자} 숫자가 작을 수록 앞에 정렬 됨.

flex-grow: flex item 증가 너비 비율 {0 (증가 비율 없음), 숫자(증가 비율)}

flex-basis: 공간을 배분 전 기본 너비 , auto(요소의 content 너비),단위

flex-shrink :  감소 너비 비율 {1: flex container 너비에 따라 감소비율 적용, 숫자}

 

전환(1)

transition: 요소의 전환 효과를 지정하는 단축 속성

{ 속성명, 지속시간, 타이밍함수, 대기시간 }

transition-property: 전환효과를 사용할 속성 이름을 지정 

{all(모든 속성에 적용), 속성이름}

transition-duration : 전환효과의 지속시간을 지정 { 0s(전환효과 없음),시간}

transition-timing-function: 전환효과의 타이밍 함수를 지정 { ease (느리게-빠르게-느리게),linear(일정하게),ease-in( 느리게빠르게),ease-out(빠르게-느리게),ease-in-out(느리게-빠르게-느리게)

transition-delay: 전환 효과가 몇 초뒤에 시작할지 대기시간을 지정

 

시각적으로 확인할 수 있는 사이트들

Easing Functions Cheat Sheet

 

<easing-function> - CSS: Cascading Style Sheets | MDN

 

Docs

 

변환(1) 

transform: 요소의 변환효과

transform: 변환함수1 변환함수;

transform: 원근법

2D 변환함수: 이동 translate(x,y), translateX(x), translateY(y), 크기 scale(x,y) 배수 1보다 작으면 줄어듦

회전 rotate(deg), 기울임 skewX(x),skewY(y)

3D 변환함수: 회전 rotateX(x), rotateY(y), 원근법 (거리) perspective(n) 제일 앞에 작성해야 함

변환(2)

perspective:하위 요소를 관찰하는 원근 거리를 지정 (단위: px로 지정) 부묘요소에 속성 추가하는것을 더 선호

backface-visiblity: 3D 변환으로 회전된 요소의 뒷면 숨김 여부 (visible : 뒷면보임 , hidden : 뒷면 숨김)