[CSS]CSS 기본 지식을 알아보자 - CodeHan의 코딩공부

CSS란?

: Cascating Style Sheet의 약자로 HTML이나 XML로 작성된 문서의 표시방법을 표기하기위한 Style sheet이다.

 

CSS적용 Rule

Author Style > User Style > Browser와 같은 순서로 Style이 지정된다.

CSS Selector

1. Universial : * / 모든 태그를 지정하는 것

2. Type : Tag / 태그를 고르는 것

3. ID : #id / 해당하는 ID만 고르는 것

4. Class : .class / 해당하는 Class만 고르는 것

5. Attribute : [] / 해당하는 속성만 고르는 것

 

CSS Layout

1. Block : 하나의 큰 상자같은 개념으로 1줄에 1개만 놓을 수 있다.

2. inline : 상자 안에 담긴 물건같은 개념이다.

3. inline-block : 상자인데 1줄에 여러 개 진열이 가능하다.

 

Position

1. Static : 정적인 기본값(default)

2. relative : 원래 아이템(기존자리)이 있어야 하는 자리에서 상대적으로 이동한다.

3. absolute : 가장 큰 부모 안에서 위치를 변경한다 / Container 기준

4. fixed : 웹페이지(기준) 안에서 움직인다. / Client 화면을 벗어날 수 있다.

5. sticky : 스크롤링을 해도 원래 있던 자리에 그대로 있다.

반응형

CSS FlexBox

Container

 - flex-direction : row가 기본이고 column은 세로정렬, 끝에 '-reverse'를 붙이면 순서가 역행한다.

 - flex-wrap : wrap은 공간 부족 시 자동으로 다음 열로 넘어간다. '-reverse'시 처음꺼부터 넘어감.

 - flex-flow : direction과 wrap을 합친 것으로 ex)flex-flow : column nowrap.

 - justify-content : item을 어떻게 배치할건지 결정해준다. 중심축 결정(main axis)

• flex-start : 왼쪽부터 정렬 / column시 위쪽으로 정렬
• flex-end : 오른쪽으로 정렬 / column시 아래쪽으로 정렬
• center : 가운데 정렬
• space-around : item사이에 일정한 간격으로 정렬, 단 양 끝은 틈이 상대적으로 작다
• space-even : 양 끝 상관없이 모든 간격이 일정하다.
• space-between : 양 끜은 끝 열에 맞추고 중간 item만 같은 간격으로 배열한다.

 - alin-contetn : justify-content와 같은 내용으로 사용 가능. 반대축 결정(cross axis)

 

Item

 - order : 기본값은 0; 순서를 바꿀 때 사용한다.

 - flex-grow : 상자에 공간을 채우려고 한다. 기본값은 0이고 숫자가 곧 칸 속 배율이다.

 - flex-shrink : 칸이 줄어들 때 더 많이 줄어들어라. 최소화 시 숫자가 큰 게 제일 작다.

 - flex-basis : auto가 기본값, %로 값을 지정하며 커지든 작아지든 같은 배율을 유지한다.

 - alin-self : 아이템별로 아이템 배치 지정이 가능하다