HTML과 JS는 무난하게 익혔지만 css는 도저히 잘 외워지지 않아서 내가 자주 쓰게되는 부분에 대해서 따로 정리하고 공부하려고 작성한다.
0. 초기화
1. block 형 데이터의 조절
width : 영역의 가로 너비를 조절. px, %, vw 를 주로 사용
height : 영역의 세로 높이를 조절. px, %, vw 를 주로 사용
padding : 영역 내부의 여백을 지정. px 주로 사용
border : 영역의 경계선을 지정. px 주로 사용
margin : 영역 바깥의 여백을 지정. px 주로 사용
border-radius : 모서리 부분을 얼마나 둥글게 만들 것인지 지정. px주로 사용.
color : 내부 컨텐츠(주로 글자)의 색을 바꿀 때 사용.
background-color : 배경색을 지정할 때 사용.
background-img : 배경을 img로 사용할 때 사용.
2.display
display : inline; > 좌우로 나열되는 배치방식으로 지정. contents의 크기만큼 영역을 가짐.
display : block; > 한줄을 차지하는 배치방식으로 지정. 개인의 길이를 가질 수 있음.
dispaly : inline-block; > 좌우로 나열되는 배치방식으로 지정. 개인의 길이를 가질 수 있음.
display : flex; > 자식 태그들을 1줄로 배치합니다.
display : grid; > 자식 태그들을 2차원 격자의 형태로 배치합니다.
2-1 flex container(부모 요소)
flex-direction : 1차원 배치의 방향을 정합니다.
- row(가로, 기본값)
- row-reverse(오른쪽에서 왼쪽으로)
- column(세로)
- column-reverse(아래에서 위로)
flex-wrap : 컨테이너에서 벗어나는 아이템의 줄바꿈 여부를 설정합니다.
- nowrap(줄바꿈 없음. 기본값)
- wrap(줄바꿈)
- wrap-reverse(줄바꿈)
flex-flow : direction과 wrap의 단축 속성. 각각의 속성을 기록하면 됨.
ex) flex-flow : row wrap;
정렬
justify-content : 주축을 따라 아이템을 정렬하는 방법을 설정합니다.
- flex-start(시작점부터 붙여서)
- flex-end(끝점부터 붙여서)
- center(중앙으로 모으기)
- space-between(양끝에 붙이고 사이 공간 균등)
- space-around(아이템 좌우 여백 균등)
- space-evenley(아이템이 차지하는 공간 외 나머지를 균등)
align-items : 교차축을 따라서 아이템을 정렬하는 방법(1줄일 때)
- stretch(컨테이너를 채움. 기본값)
- flex-start
- flex-end
- center(중앙으로 정렬)
- baseline(텍스트 기준선 정렬)
align-content : 교차축을 따라서 아이템을 정렬하는 방법(여러줄일 때)
- stretch(컨테이너를 채움. 기본값)
- flex-start
- flex-end
- center(중앙으로 정렬)
- space-between(양끝에 붙이고 사이 공간 균등)
- space-around(아이템 좌우 여백 균등)
- space-evenley(아이템이 차지하는 공간 외 나머지를 균등)
2-2flex item(자식 요소)
order : 아이템이 배치되는 순서를 정렬
flex-grow : 여유 공간을 얼마나 차지할지 비율을 지정(기본값 0)
flex-shrink : 컨테이너 공간이 부족할 때 아이템이 얼마나 줄어들지 지정(기본값 1)
flex-basis : 플렉스 아이템의 기본 크기를 주축 방향으로 설정. width, height를 대체(쓰는경우 아직 못봄)
flex : grow, shrink, basis 순으로 쓰는 단축속성. 보통은 숫자 1개만 입력하여 flex-grow만 변경
align-self : 해당 요소만 교차축으로 정렬합니다.
- auto(기본값)
- stretch
- flex-start
- flex-end
- center
- baseline
2-3 grid container(부모 요소)
grid-template-columns : 열의 크기와 개수를 정의합니다.
grid-template-rows : 행의 크기와 개수를 정의합니다.
grid-template-areas : 영역에 이름을 부여하여 템플릿을 정의합니다.
ex)"header header"
"sidebar main"
위 방식은 2x2 공간에 대해서 각각의 이름을 부여한 것이며
같은 이름(header)은 하나의 공간으로 묶어주는 역할을 한다.
grid-template : rows, columns, areas 순서의 단축 속성입니다.
작성순서 : [row names] <row sizes> / <column sizes>
작성 예시
grid-template:
"r1 r1 r1 r1" 50px /* 1행 높이: 50px */
"r2 r2 r2 r2" 60px /* 2행 높이: 60px */
"r3 r3 r3 r3" 40px /* 3행 높이: 40px */
"r4 r4 r4 r4" 50px /* 4행 높이: 50px */
/ 1fr 1fr 1fr 1fr; /* 4열 크기 */
row-gap : 행과 행 사이의 간격을 설정합니다. 주로 px사용
column-gap : 열과 열 사이의 간격을 설정합니다. 주로 px사용
gap : row, column 순으로 간격을 설정하는 단축속성입니다.
template에 사용하는 방법 : 작성하고 싶은 칸 수만큼 작성
fr(Fraction) : 사용 가능한 공간을 비례적으로 나누어 가진다. fr을 가진 속성끼리 비율을 정함.
repeat(3, 1fr) : 3등분
100px, 1fr 2fr : 3개의 공간으로 구분. 100px 1칸, 남은공간의 1/3 1칸, 남은 공간의 2/3 1칸
auto-fill / auto-fit : 뷰포트 크기에 다라서 공간의 개수를 자동으로 조정
정렬
justify-items : 셀 내부의 가로축을 정렬하는 방법
- stretch(컨테이너를 채움. 기본값)
- start(왼쪽 정렬)
- end(오른쪽 정렬)
- center(중앙으로 정렬)
align-items : 셀 내부의 세로축을 정렬하는 방법
- stretch(컨테이너를 채움. 기본값)
- start(위로 정렬)
- end(아래로 정렬)
- center(중앙으로 정렬)
justify-content : 주축을 따라 아이템을 정렬하는 방법을 설정합니다.
- start(시작점부터 붙여서)
- end(끝점부터 붙여서)
- center(중앙으로 모으기)
- space-between(양끝에 붙이고 사이 공간 균등)
- space-around(아이템 좌우 여백 균등)
- space-evenley(아이템이 차지하는 공간 외 나머지를 균등)
align-content : 교차축을 따라서 아이템을 정렬하는 방법(여러줄일 때)
- stretch(컨테이너를 채움. 기본값)
- start
- end
- center(중앙으로 정렬)
- space-between(양끝에 붙이고 사이 공간 균등)
- space-around(아이템 좌우 여백 균등)
- space-evenley(아이템이 차지하는 공간 외 나머지를 균등)
2-4 grid item(자식 요소)
grid-column-start : 아이템이 시작할 열 선 번호를 지정합니다.
grid-column-end : 아이템의 끝나는 열 선 번호를 지정합니다.
grid-column : 열을 start, end 순으로 표기하는 단축속성입니다.
grid-row-start : 아이템이 시작할 행 선 번호를 지정합니다.
grid-row-end : 아이템의 끝나는 행 선 번호를 지정합니다.
grid-row : 행을 start, end 순으로 표기하는 단축속성입니다.
grid-area : 행과 열의 시점과 종점을 지정하는 단축속성입니다. 혹은 컨테이너에서 지정한 영역 이름을 사용합니다.
ex) header 따옴표를 쓰면 안됨.
ex ) row-start / column-start / row-end / column-end >> 1 / 1/ 3 / span3
justify-self : 해당 자식요소의 가로 정렬을 설정합니다. 부모속성을 덮어씁니다.
align-self : 해당 자식요소의 가로 정렬을 설정합니다. 부모속성을 덮어씁니다.
grid의 선 번호 체계 만약 3개의 칸을 생성했다고 한다면
1 2 3 4
l l l l
의 순서로 번호가 부여됨. 따라서 첫번째 열에 배치를 하고 싶으면
grid-column : 1 혹은 1/2를 입력하면 된다.
span : 내가 몇개의 '칸'을 차지할지 알려주는 방식
(gird-column) : 1 / 4 == (gird-column : 1 / span3)
3. 정렬로 사용하는 속성들
text-align : 텍스트 정렬. 인라인 콘텐츠를 블록요소 내에서 가로 방향의 정렬을 설정할 때 사용
- left(왼쪽 정렬, 기본값)
- center(가운데 정렬)
- right(오른쪽 정렬)
- justify(양쪽 정렬)
justyfy-content : flex, grid 사용. 주축방향의 정렬 방향을 설정한다.
align-content : flex, grid 사용. 여러줄 교차축 정렬. flex아니더라도 교차축 가운데 정렬에 사용
justyfy-items : grid 사용. 셀 내부 콘텐츠의 가로 배치를 설정.
align-items : flex > 단일 교차축 정렬. grid > 셀 내부 콘텐츠의 세로 배치를 설정.
4. position
TRBL : top, right, bottom, left 속성의 적용여부
position : static; > 모든 요소의 기본값. 일반적인 흐름에 따라 순서대로 배치됌. 위치 적용 안됨. TRBL X
position : relative; > 상대위치. 원래 자신이 있어야할 위치(static)을 기준으로 상대적으로 이동. TRBL O
자신의 원래 위치는 static에 존재하며 다른 요소의 배치를 방해하지 않음.
position : absolute; > 절대위치. 일반적인 문서 흐름에서 완전히 벗어나 독립적으로 배치됩니다. TRBL O
자신의 원래 위치가 표시되는 곳과 동일합니다.
적용 기준 : 자신의 조상중 static이 아닌 태그의 좌상단 꼭지점. 모두 static이라면 <html> 태그기준
position : fixed; > 고정 위치. 뷰포트(브라우저창)을 기준으로 고정되어 배치됩니다. TRBL O
position : sticky; > 끈끈한 위치. relative와 fixed 를 결합한 대상입니다. TRBL O
relativ처럼 문서흐름을 따라가다가 TRBL값으로 지정된 임계값에 도달하면 fixed처럼 화면에 고정됩니다.
z-index : 숫자가 높을수록 내 화면에 더 가까운 위치에 올라갑니다. ex) 99index는 1index를 덮어서 안보이게 만듭니다.
5.table
border-collapse : 셀간의 경계선을 합칠지 분리할지 결정합니다.
- collapse(합치기)
- separate(분리, 기본값)
empty-cells : 내용이 없는 셀의 테두리와 배경을 표시할지 여부를 결정합니다.
-show(표시, 기본값)
-hide(숨김)
th,td 적용 속성
text-align : 셀 내부의 가로 정렬을 설정합니다.
vertical-align : 셀 내부의 세로 정렬을 설정합니다.
6. overflow(scroll)
자식요소가 자신의 영역을 벗어났을 때 어떻게 처리할지 다루는 속성입니다.
overflow : visible; > 기본값. 넘친 콘텐츠를 자르지 않고 그대로 보여줌.
overflow : hidden; > 넘친 콘텐츠를 자르고 접근할 수 없게 만듦.
overflow : scroll; > 넘친 콘텐츠가 있든 없든 항상 스클로바를 표시합니다.
overflow : auto; > 넘친 콘텐츠가 있을 경우 스크롤을 표시합니다. 가장 권장됩니다.
overflow-x(가로)와 overflow-y(세로)로 각각의 방향에 대한 처리를 분리할 수 있습니다.
overflow를 사용하기 위해서는 명시적으로
y방향에 대하여 height, max-height
x방향에 대하여 width, max-width
정의가 반드시 필요합니다.
7. transform(변환)
transform : translate(x,y); > 요소를 가로x, 세로y 만큼 움직입니다. px, % 주로사용. %는 자신의 비율
transform : translateX(x); > 요소를 가로x 만큼 움직입니다. px, % 주로사용. %는 자신의 비율
transform : translateY(y); > 요소를 세로y 만큼 움직입니다. px, % 주로사용. %는 자신의 비율
transform : translateZ(z); > 요소를 깊이z 만큼 움직입니다(3D). px, % 주로사용. %는 자신의 비율
transform : translate3D(x,y,z); > 요소를 가로x, 세로y,깊이z 만큼 움직입니다. px, % 주로사용. %는 자신의 비율
transform : rotate(angle); > 요소를 z축(화면 평면)을 기준으로 회전시킵니다. deg 사용
transform : rotateX(angle); > 요소를 x축(가로)을 기준으로 회전시킵니다. deg 사용
transform : rotateY(angle); > 요소를 y축(세로)을 기준으로 회전시킵니다. deg 사용
transform : rotateZ(angle); > 요소를 z축(화면 평면)을 기준으로 회전시킵니다. roate와 동일. deg 사용
transform : rotate3D(x,y,z,angle); > 임의의 3D벡터를 기준으로 회전시킵니다. 숫자, deg 사용
transform : scale(x,y); > 요소를 가로(x)축과 세로(y)축의 크기 배율을 조절합니다. 실수 혹은 정수 사용
transform : scaleX(x); > 요소를 가로(x)축의 크기 배율을 조절합니다.
transform : scaleY(y); > 요소를 세로(y)축의 크기 배율을 조절합니다.
transform : scaleZ(z); > 요소를 깊이(z)축의 크기 배율을 조절합니다.
transform : scaleZ(z); > 요소를 깊이(z)축의 크기 배율을 조절합니다.
transform : skew(x,y); > 요소를 가로(x)축과 세로(y)축으로 x,y만큼 기울입니다. deg 사용
transform : skewX(x); > 요소를 가로(x)축으로 x만큼 기울입니다.
transform : skewY(y); > 요소를 세로(y)축으로 y만큼 기울입니다.
만약 여러개의 변화를 같이 주려면 변경하려는 내용을 띄어쓰기로 표시해주면 된다.
transform: translateX(100px) rotate(45deg);
8. transition(변환에 추가 기능을 부여)
transition-duration : 애니메이션이 완료되는데 걸리는 시간을 지정. s, ms 단위를 사용.
transition-timing-function : 애니메이션의 **속도 곡선(가속/감속)**을 지정합니다. (시작/종료 시점 제어)
-ease (기본값, 느리게 시작 > 빠르게 진행 > 느리게 마무리, 사다리꼴 형태 )
-linear (일정하게)
-ease-in (느리게 시작 > 점점 빨라짐, y=x)
-ease-out (빠르게 시작 > 점점 느려짐, y=-x)
-ease-in-out (느리게 시작 > 중간에 빨라짐 > 느리게 끝남 y= -x(x<0), x(x>0) y축으로 대칭인 속도함수 )
-cubic-bezier (커스텀 속도 곡선을 정의)
transition-delay : 변화가 시작되기 전 지연시간을 지정합니다. s, ms 단위를 사용.
transition-property : 변화를 적용하고 싶은 대상을 지정합니다.
-속성값(변화를 적용하고 싶은 특정 속성값을 작성합니다. 복수의 경우 ',' 로 구분합니다.)
-all(모든 css속성값에 해당 효과를 적용합니다.)
'IT 공부내용 정리 > WEB' 카테고리의 다른 글
| JS의 특색 기능들 정리 (0) | 2026.01.22 |
|---|---|
| 리눅스(Linux) 리액트(React) 설치 (0) | 2025.12.03 |