CSS

font-size

수치와 단위를 지정해 글자의 크기를 정의

px : 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기

rem : <html> 태그의 font-size에 대응하는 상대적인 크기

em : 부모태그(상위태그)의 font-size에 대응하는 상대적인 크기

text-align

블록 내에서 텍스트의 정렬 방식

left/right

center

justify : 양끝 정렬

인라인 vs 블록

블록 요소

자기가 속한 영역의 너비를 모두 차지하여 블록 형성

ex) div, p, h1 등

인라인 요소

자기에게 필요한만큼의 공간만 차지

기본적으로 자기가 필요한 영역만 차지하기 때문에 높이와 너비를 임의로 조정 할 수 없음

inline-block으로 바꿔주면 변경 가능

ex) span, a 등

display 속성

display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의

미리 정의되어 있는 키워드를 속성값으로 지정

inline : 인라인으로 처리

block : 블록레벨로 처리

inline-block : 안라인으로 배치하되, 블록 레벨 요소의 속성을 추가할 수 있도록 처리

none : 디스플레이 표시하지 않음(요소에서 사라지진 않음)

부동요소(float) = 떠있는 요소

float

요소가 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너의 왼쪽인 오른쪽에 배치하게 함

none : 기본값

left : 자신을 포함하고 있는 박스의 왼편

right : 자신을 포함하고 있는 박스의 오른편

= 문서의 흐름에선 제외되지만, 필요한 만큼의 공간은 차지함

clear

float 요소 이후에 표시되는 요소가 float을 해제(clear)하여 float 요소의 라래로 내려가게 할 수 있음

none : 기본값

left : float이 left인 요소의 아래로 내려감

right : float이 right인 요소의 아래로 내려감

both : float이 left 및 right인 요소의 아래로 내려감

clear: both; 를 사용하면 한방에 해결

position

문서 상에 요소를 배치하는 방법

static : 기본값

relative : 일반적인 문서 흐름에 따라 배치하되, 상화좌우 위치 값에 따라 오프셋(위치를 얼마간 이동시키는것) 적용

absolute : 일반적인 문서 흐름에서 제거하고, 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋 적용

fixed : 일반적인 문서 흐름에서 제거하고 지정한 위치에 고정

sticky : 일반적인 문서 흐름에서 제거하고 스크롤 동작이 존재하는 가장 가까운 요소에 대해 오프셋 적용

flexbox

박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델

레이아웃을 다룰 때 한번에 하나의 차원(행이나 열)만을 다룸

flex 컨네이너를 만들기 위해서는 컨테이너에 display: flex;를 적용해야함

줄바꿈 여부 : flex-wrap / flex-wrap-reverse - 개별 요소들의 도합 크기가 컨테이너 주축 길이보다 커졌을때의 처리 방법 및 방향 정의

flex-direction

row : 기본값, 주축은 행

row-reverse : 주축은 행이고 방향은 콘텐츠의 방향과 반대

column : 주축은 열

column-reverse : 주축은 열이고 방향은 콘텐츠의 방향과 반대

animation

animation-duration : 애니메이션 실행 시간

animation-timing-functionm : 애니메이션 속도 곡선

liner - 일정한 속도
ease - 천천히 시작해서 점점 빨라지다가 천천히 마무리
ease-in - 시작을 느리게
ease-out - 마무리를 느리게
ease-in-out - 느리게 시작하고 느리게 마무리

animation-delay : 애니메이션 지연 시간

animation-iteration-count : 애니메이션 재생 횟수

infinite

animation-direction : 애니메이션 진행 방향

alternate - 시작과 끝 번갈아 반복
normal - 시작 → 끝
reverse - 역순

prefix 접두사

다른 버전의 브라우저에서도 실행될 수 있게끔 작성

-webkit- (크롬, 사파리)

-moz- (파이어 폭스)

-ms- (익스플로러 9.0)

-o- (오페라)

레이아웃

스크롤 없는 100% 레이아웃


.flex-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.flex_item {
	flex: 1;
	overflow: auto;
}

내비게이션 영역


.flex-container {
	diplay: flex;
}

.flex-item {
	flex: none;
}

.flex-item-grab {
	margin-left: auto;
}

브라우저 화면 아래에 붙는 푸터


.flex-container {
	display: flex;
	flex-direction: column;
}

.flex-item {
	margin-top: auto;
}

정렬이 다른 메뉴


.flex-container {
	display: flex;
	justify-content: space-between;
}

유동 너비 박스

부모 요소의 크기가 줄어들어 콘텐츠의 크기보다 작아지면 자식 요소의 크기가 콘텐츠의 크기보다 줄어든다.


.flex-container {
	display: flex;
}

.flex-item {
	max-width: 300px;
}

말줄임과 아이콘


.flex-container {
	display: inline-flex; // 부모 요소를 인라인 블록 요소로 만들기
	max-width: 100%;
}

.text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

위아래로 흐르는 목록


.flex-container {
	display: flex;
	flex-direction: column;
	flex-wrap; wrap;
	justify-container: space-around;
	align-content: space-around;
}

// direction과 wrap을 한꺼번에 사용 가능
.flex_container {
  display: flex;
  flex-flow: column wrap;
  ...
}

가로세로 배율을 유지하는 반응형 박스


.flex-container {
	display: flex;
  flex-wrap: wrap;
}

.flex_item_list {
  flex-basis: 33.3%;
  display: flex;
  flex-direction: column;
}

.flex_item_image {
  flex: auto;
}