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: 두께
- border-style: 선 종류
- 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
- 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
16. word-spacing
17. float
- 요소를 좌우방향으로 띄우는 개념(수평정렬)
- flex box가 더 많이 쓰임
-
<float: 방향>
요소에 float를 적용하게 되면 적용된 요소 주변으로 문자가 흐르게 됨
<clear: 방향>
: float를 멈추게 해주는 속성
- 형제요소에 clear 추가해 해제
- 형제요소를 만들어야 한다는 문제
- 부모요소에 overflow 추가해 해제
- 랩핑해 그 부분을 벗어나면 해제(비추천)
- 부모요소에 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-image
- 먼저 작성된 이미지가 더 위에 쌓임
- width와 height도 작성해 줘야 이미지가 표시됨
- 이미지가 원래 사이즈보다 크게 입력되면 반복돼서 출력되는데
no-repeat
를 사용하면 방지할 수 있다.
- background-position
20px 50px
로 작성했을 경우 순서는 x축, y축 순서다. x축, y축 순서는 뒤바뀔 수 없다.
- background-attachment
- 스크롤 될 때 배경의 스크롤 여부 결정
- 기본값 : scroll
- background-size
20. transition
- transition-property
- 전환효과를 사용할 속성 이름
- 기본값 : all
- 단축 속성으로
transition : width 1s, background 1s
로 작성이 가능하다.
※.box{}
와.box:hover{}
가 있을 경우 .box{}
에 작성한다.
- transition-duration
- transition-timing-function
- transition-delay
- 요소의 변환 효과를 지정
<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정도가 적당하다)
- 적용하려면 상위요소에 넣어야 한다.
4) perspective-origin
- 원근거리의 기준점
- 기본값:
X:50%, Y:50%
5) backface-visibility : 3D변환으로 회전된 요소의 뒷면 숨김을 설정
22. animation
- 요소의 애니메이션을 설정/제어
animation : 애니메이션이름 지속시간 타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지
- @keyframes
@keyframes * {
0% {속성: 값}
50% {속성: 값}
}
- animation-name
- 기본값: none
- @keyframes의 이름 지정
- animation-duration
- 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
4) align-self
5) justify-self
6) order
- item의 자동배치 순서 변경 가능
- 숫자가 작을수록 앞에 배치 됨
ex) .item:nth-child(1){order:1}
7) z-index
-
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 : 빈 공간을 축소해 없애버림