내가 보려고 정리한 CSS part.2

CashCash·2020년 12월 21일

CSS

css

목록 보기

3/10

CSS속성

1. width

단위 : px, em, cm 등
기본값: auto

2. height

단위 : px, em, cm 등
기본값: auto

-> in-line 요소들은 w: 0, h: 0에서 출발하게 되고 가로세로 값을 가질 수 없다.
-> block 요소들은 w: 100%, h:0에서 출발한다

3. margin

요소의 외부 여백 지정
margin: 1px 2px 3px 4px : 상 우 하 좌
margin : 1px 2px 3px : 상 (좌,우) 하
margin : 1px 2px : (상, 하) (좌, 우)
margin : 1px : (상,하,좌,우)
마진중복 : 마진의 특정 값들이 중복돼 합쳐지는 현상
1) 형제요소의 top과 bottom이 만났을 때
2) 부모요소의 top과 자식요소의 top이 만났을 때
3) 부모요소의 bottom과 자식요소의 bottom이 만났을 때
- 양수일 경우 더 큰 수치로 중복시키고,
  음수일 경우 더 작은 수치로 중복시킨다

4. padding

크기 증가: 추가된 padding만큼 요소의 크기가 증가하는 현상
-> 이 때는 크기가 커지지 않도록 직접 계산을 하거나,
box-sizing : border-box를 사용해 크기가 커지지 않게 해줘야 한다

5. border

요소의 테두리 선 지정

border-width: 두께
- 기본값 : medium
border-style: 선 종류
- 기본값 : none
border-color: 선 색
- transparent : 투명한 선(요소의 배경색이 보임)
개별속성
- border-(top,bottom,left,right)-(width,style,color)
  ※ border의 크기도 요소의 크기에 영향을 미치니 계산해주어야 한다

6. box-sizing

요소의 크기 계산 기준을 지정

content-box : width만으로 요소크기 계산
border-box : width + padding + border를 포함해 요소크기 계산

7. display

요소의 box type 설정

block
in-line
inline-block
none : 아예 사라지는 개념

8. overflow

요소의 크기 이상으로 내용이 넘쳤을 경우 내용의 보여지는 부분 제어

visible : 넘친부분 그대로 보여줌
hidden : 넘친부분 자름
scroll : 무조건 스크롤바 생성해 보여줌
auto : 넘치지 않은 부분은 스크롤바가 없음

9. opacity

투명도 지정 : 0~1
opacity:0은 안 보이는 것이지 사라지는 것이 아님

10. font

글자 관련 속성들을 지정
<font: 기울기 두께 크기 / 줄높이 글꼴>
<font: italic bolx 16px / 1.5 "Arial", sans-serif>
크기와 글꼴은 무조건 입력!!

line-height
- line-height:2 = 글자크기의 2배
- 보통 1.4~1.7의 배수가 적당하다

11. color

글자의 색상 결정

색상이름
Hex 색상코드 #000fff
RGB rgb(255,255,0)
RGBA rgba(0,0,0, .5)
HSL : 색상,채도,명도 hsl(120, 0%, 0%)
HSLA : 색상,채도,명도,투명도 hsl(100, 1%, 1%, .5)

12. text-align

문자 정렬 방식 지정
justify : 2줄 이상에서만 동작, 띄어쓰기 여백이 달라진다

13. text-decoration

문자의 장식 설정
none
underline
overline
line-through

14. text-indent

첫 줄의 들여쓰기 지정
음수 값 사용시 내어쓰기가 된다

15. letter-spacing

문자간 사이간격 결정
기본값: normal

16. word-spacing

단어간 사이간격 결정
기본값: normal

17. float

요소를 좌우방향으로 띄우는 개념(수평정렬)
flex box가 더 많이 쓰임

<float: 방향>
요소에 float를 적용하게 되면 적용된 요소 주변으로 문자가 흐르게 됨

<clear: 방향> : float를 멈추게 해주는 속성
1. 형제요소에 clear 추가해 해제
  - 형제요소를 만들어야 한다는 문제
2. 부모요소에 overflow 추가해 해제
  - 랩핑해 그 부분을 벗어나면 해제(비추천)
3. 부모요소에 clearfix 클래스 요소 추가해 해제
display 변경
- float 속성이 추가된 요소는 display 값이 대부분 inline에서 block으로 수정된다.
  즉, span 태그와 같은 inline요소를 쓸 때 display에서 block으로 변경할 필요가 없어진다.
- flex, inline-flex는 예외

18. position

요소의 위치 지정

static : 배치 불가능
relative : 요소 자신을 기준으로 배치
- 자기 자신이 있던 위치에서 이동하게 된다
- 이동해 있는건 실제 위치가 아닌 가상의 위치다
- 주변 영향을 받거나 준다
absolute : 위치 상 부모요소를 기준으로 배치
- 위치상 부모는 position : * 이 부여돼 있어야 사용 가능하다
- 부모요소에 position이 없다면 조상요소의 것을 사용한다
- 조상요소에도 없다면 window객체 viewport를 위차상 부모로 인식하고 사용한다
fixed : 스크롤을 내려도 고정된다 (쇼핑몰 배너등에 사용)
stickey : 스크롤 영역 기준으로 배치

※ position 특징

요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지를 결정한다

position 속성 값이 있을 경우 가장 위에 쌓인다. 이때 값은 무관하다.
position이 모두 존재할 경우 z-index 속성의 숫자 값이 높을수록 위에 쌓인다.
position 속성의 값이 있고, z-index 속성의 숫자값이 같다면 HTML의 마지막 코드일수록 위에 쌓인다.

absolute, fixed 속성 값이 적용된 요소는 display 값이 대부분 block로 수정된다.

19. background

< background: 색상 이미지경로 반복 위치 스크롤특성 >

background-color
- background로 대신 사용가능
background-image
- 먼저 작성된 이미지가 더 위에 쌓임
- width와 height도 작성해 줘야 이미지가 표시됨
- 이미지가 원래 사이즈보다 크게 입력되면 반복돼서 출력되는데 no-repeat를 사용하면 방지할 수 있다.
background-position
- 20px 50px로 작성했을 경우 순서는 x축, y축 순서다. x축, y축 순서는 뒤바뀔 수 없다.
background-attachment
- 스크롤 될 때 배경의 스크롤 여부 결정
- 기본값 : scroll
background-size
- 기본값: auto
- cover, contain

20. transition

전환효과 지정

transition-property
- 전환효과를 사용할 속성 이름
- 기본값 : all
- 단축 속성으로 transition : width 1s, background 1s로 작성이 가능하다.
※.box{}와.box:hover{}가 있을 경우 .box{}에 작성한다.
transition-duration
- 전환효과의 지속시간
- 기본값 : 0s
transition-timing-function
- 타이밍 함수
- 기본값 : ease
transition-delay
- 전환효과의 대기시간 설정
- 기본값 : 0s

21. transform

요소의 변환 효과를 지정
<transform : 변환함수1 변환함수2 ... >
<transform : 원근법 이동 크기 회전 기울임 >
ex) transform : rotate(20deg) translate(10px, 0)

transform 2D 변수함수
- translate(x,y)
  -> .box{}에는 translate: 1s
  .box:hover{}에는 transform: translate(20px,20px)
transform 3D 변환함수
- perspective(n) : 원근법
  -> perspective()는 transform의 가장 앞에 써줘야 한다
transform 변환속성
1) transform-origin
- x,y,z축
- 기본값: X:50%, Y:50%, Z:0
2) transform-style
- flat : 3D 변환 사용 안 함
- preserve-3d : 자식요소의 3D 변환 사용
3) perspective(속성)
- 원근거리의 설정
- 값이 크면 더 가까이 보는 것이다(500px정도가 적당하다)
- 적용하려면 상위요소에 넣어야 한다.
※ perspective 속성은 관찰대상의 부모요소에 적용해 하위요소를 관찰하지만 함수는 관찰대상에 transform: perspective()를 적용해 대상을 관찰한다.

4) perspective-origin
- 원근거리의 기준점
- 기본값: X:50%, Y:50%
5) backface-visibility : 3D변환으로 회전된 요소의 뒷면 숨김을 설정
- visible(기본값)
- hidden

22. animation

요소의 애니메이션을 설정/제어
animation : 애니메이션이름 지속시간 타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지

@keyframes
- 2개 이상의 애니메이션 중간 상태 지정
```
@keyframes * {
	 0% {속성: 값}
   	 50% {속성: 값} 
}
```
- transform 사용가능
animation-name
- 기본값: none
- @keyframes의 이름 지정
animation-duration
- 지속시간
- 기본값: 0s
animation-timing-function
animation-delay
- 기본값 : 0s
  animation-delay: 2s -.5s라고 쓰면 0.5s만큼 다음주기가 짧아진다
- 단축속성에서 duration 은 앞에 delay는 뒤에 쓰기
animation-iteration-count
- 반복횟수
- 기본값 : 1
- 무한반복 : infinite
animation-direction
- 애니메이션 반복 방향 설정
- 기본값 : normal
- alternate, alternate-reverse, reverse
animation-fill-mode
- 애니메이션 전후상태 설정
- 기본값 : none
- forwards, backwards, both
animation-play-state
- 재생과 정지 설정
- running(기본값)
- paused

23. multi-columns

columns 단축
1) column-count : 단의 갯수(숫자)
2) column-width : 단의 최적 너비
※ 하나의 단이 최적의 너비보다 줄어들면, 단의 갯수가 조정된다
column-gap
- 단과 단 사이의 간격 설정
- 기본값 : normal
column-rule
- 단과 단 사이의 구분선 지정
- column-width, column-style, column-color
- 단축: column-rule: 너비 종류 색상

24. flex

수평구조를 만들때 inline을 사용해 도움을 받았지만 이제 display: flex를 활용하면 inline을 사용하지 않아도 된다.

flex container
1) display
- display: flex
  - container가 블록요소처럼 위에서부터 쌓인다.
- display: inline-flex
  - container가 inline요소처럼 옆으로 쌓인다.
2) flex-flow
- 단축:flex-flow: 주축 여러줄묶음
- flex-direction : 주축설정
- flex-wrap : 줄 묶음
3) justify-content
- 주축 정렬 방법
- flex-start, flex-end, center, space-between, space-around
4) align-content
- 교차축의 정렬 방법
- 기본값: stretch
- flex-start, flex-end, center, space-between, space-around
※ item들이 2줄 이상이고 여백이 있을 경우만 사용 가능

5) align-items
- item이 한 줄일 경우 사용
- stretch, flex-start, flex-end, center, baseline
※align-content가 우선

6) align-self
- 개별 item 정렬 방법
- align-items보다 우선순위
- stretch, flex-start, flex-end, center, atuo, baseline
- auto는 container의 align-items 속성을 받는다
flew items
1) order
- item의 순서 결정, 음수 가능
- 숫자가 클수록 순서가 후순위
- 기본값 : 0
2) flex
- 단축: flex: 증가너비 감소너비 기본너비
- flex-grow, flex-shrink, flex-basis
- flex-basis는 기본값이 auto인데 생략시 0이 되므로 꼭 명시해야 한다

25. grid

flexible box는 1차원 레이아웃을 제공하지만 css grid는 2차원 레이아웃 시스템을 제공한다.
다양한 레이아웃 대체 방식을 해결하기 위해 만들어진 특별한 css모듈이다.

grid container
1) display: grid container를 정의한다
- grid : block특성의 grid container를 정의한다
- inline-grid : inline 특성의 grid container를 정의한다
※ grid를 사용하기 위해 .container`에 필수로 작성한다

2) grid-template-rows : 행의 크기 정의
- 단축: grid-template-rows: 선이름 1행크기 선이름 2행크기 ...
3) grid-template-columns : 열의 크기 정의
- 단축: grid-template-columns: 선이름 1행크기 선이름 2행크기 ...
- repeat(반복횟수, 크기나 단위)
4) grid-template-areas
- 그리드 영역 이름을 참조해 그리드 템플릿을 생성한다.
5) row-gap: 행 사이 간격
column-gap: 열 사이 간격
- 단축: gap: row-gap column-gap
6) grid-auto-rows
- 암시적 행의 크기
- 명시적 행 밖에 배치된 행의 크기가 지정된다
- 음수 사용 불가
7) grid-auto-columns
- 암시적 열의 크기
8) grid-auto-flow
- 배치하지 않은 item을 어떤 방식으로 자동배치 알고리즘으로 처리할지 정의한다
- row(기본값), column, row dense, column dense
9) grid-template

10) grid
- grid 단축속성 사용시 auto flow *px은 써야한다.
11) align-content
- grid content의 수직정렬
- grid content의 세로 너비가 grid container보다 작아야한다.
- normal(기본값), start, center, end, space-around, sapce-between, space-evenly
12) justify-content
- 수평정렬
- grid content의 가로 너비가 grid container보다 작아야한다.
13) align-items
- grid item 수직 정렬
- grid item의 세로너비가 자신이 속한 grid 행의 크기보다 작아야한다.
- normal(기본값), start, center, end
14) justify-items
- 수평 정렬
- grid item의 가로너비가 자신이 속한 grid 열의 크기보다 작아야한다.
grid items
1) grid-row
- 단축: grid-row: <grid-row-start> <grid-row-end>
2) grid-column
- 단축: grid-column: <grid-column-start> <grid-column-end>
3) grid-area
- 단축: grid-area: <grid-row-start> <grid-column-start> <grid-row-end> <grid-column-end>
- grid-area는 Grid Container가 아닌 Grid Item에 적용하는 속성이다.
4) align-self
- 단일 grid item의 수직 정렬
5) justify-self
- 단일 grid item의 수평 정렬
6) order
- item의 자동배치 순서 변경 가능
- 숫자가 작을수록 앞에 배치 됨
  ex) .item:nth-child(1){order:1}
7) z-index
- item이 쌓이는 순서 변경 가능
grid funtions
1) repeat
- 행과 열의 크기 정의 반복
- grid-template-rows와 grid-template-columns에서 사용하는 개념
  ex)repeat(2, 100px) repeat(2, [row-start] 100px [row-end]) repeat(6, 1fr 2fr)
2) min max
- 행/열의 최대/최소 크기 정의
- grid-template-rows, grid-template-columns, grid-auto-rows, grid-auto-columns에서 사용하는 개념
- 첫번째 인수는 최솟값 두번째 인수는 최댓값
- 일반요소에 min-width와 max-width속성 지정과 유사하다
  ex) grid-template-rows: minxmax(100px, 1fr) minmax(200px, 1fr)
3) fit-content
- 행/열의 크기를 grid item이 포함하는 내용 크기에 맞춘다.
- 내용의 최대 크기를 인수로 사용한다.
- minmax(auto, max-content)와 유사하다.
  ex) grid-template-rows: fit-content(100px) fit-content(120px)
grid units
1) fr
- 사용가능한 공간에 대한 비율
  ex) grid-template-columns: 1fr 2fr 100px 25%
  -> 100px과 전체의 25%를 제외한공간을 1:2 비율로 나눠 사용한다는 뜻
2) min-content
- grid item이 포함하는 내용의 최소한의 크기
  ex) grid-template-column: min-content 1fr
  ※ min-content에서 한글 사용시 밑으로 글이 퍼지는데 word-break: keep-all사용시 정상 작동한다.
3) max-content
- grid item이 포함하는 내용의 최대한의 크기
4) auto-fill, auto-fit
- 행/열의 갯수를 grid container 및 행/열의 크기에 맞게 자동으로 조정
- 반복하는 횟수에 auto-fill을 쓰면 빈 칸이 다 채워진다!
  ※ auto-fill : 빈 공간 유지
  ※ auto-fit : 빈 공간을 축소해 없애버림

CashCash

studying frontend

이전 포스트

내가 보려고 정리한 CSS정리 part.1

다음 포스트

내가 보려고 정리한 CSS part.2

css

CSS속성

1. width

2. height

3. margin

4. padding

5. border

6. box-sizing

7. display

8. overflow

9. opacity

10. font

11. color

12. text-align

13. text-decoration

14. text-indent

15. letter-spacing

16. word-spacing

17. float

18. position

※ position 특징

19. background

20. transition

21. transform

※ perspective 속성은 관찰대상의 부모요소에 적용해 하위요소를 관찰하지만 함수는 관찰대상에 transform: perspective()를 적용해 대상을 관찰한다.

22. animation

23. multi-columns

24. flex

25. grid

내가 보려고 정리한 CSS정리 part.1

hover시 박스의 색상과 글자 변경

0개의 댓글