normal flow에서 벗어나서 위치를 직접 정하는 방식
position
속성은 top
, left
, bottom
, right
속성과 함께 사용된다.
instet :
top
, left
, bottom
, right
한꺼번에 설정.static
absolute
position
속성이 static
이 아닌 요소가 없다면, 최상위에 있는 <body>
요소가 배치 기준이 된다.relative
fixed
sticky
fixed
와 마찬가지로 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트, 즉 브라우저 전체 화면이다.z-index
속성z-index
를 정하지 않으면 기본값은 auto
인데, 이 값은 0이랑 마찬가지이다.z-index
의 값이 같다면 코드 상에서 아래 줄에 있을수록 앞쪽에 보인다.z-index
를 묶어서 생각하는 범위<html>
)position
이 absolute
이거나 relative
이고, z-index
가 auto
가 아닌 경우position
이 fixed
이거나 sticky
인 경우z-index
가 auto
가 아닌 경우opacity
가 1보다 작은 요소z-index
의 기본 값인 auto
와 0
의 차이는 쌓임 맥락을 만드느냐 아니냐의 차이박스를 만들고 방향을 정해서 요소를 배치하는 방식
flex-direction
justify-content
- 기본축 방향의 정렬align-items
- 교차축 방향의 정flex-wrap : wrap;
gap
: 세로 가flex: grow, shrink, basis
flex-grow
- 플랙스 박스 안의 요소를 꽉 채우고 싶을 때. 1으로 둘 경우 꽉채워짐flex-shrink
- 요소를 얼마나 줄일지 정할 때. 내가 지정한 크기로 고정하고 싶을 경우 0으로 두면 된다.flex-basis
- 요소의 시작 크기. 기본값 autowidth
나 height
를 참고해서 시작 크기를 정한다.absolute
랑 fixed
는 요소의 원래 자리에서 쏙 빠져버리기 때문에 글의 흐름에서 빠지는 거랑 마찬가지로, 플렉스박스랑 상관없이 배치된다.
칸을 나눈 뒤 요소를 배치하는 방식
그리드 라인, 그리드
grid-template-rows(columns)
= grid-template
: rows(세로) / columns(가로)
px 대신 fr 사용! → 그리드 공간 안에서 부분을 상대적으로 나타내는 단위
minmax(min,max)
- min에는 fr XX, max에만 fr 사용 가능repeat(개수, 크기)
gap
: 세로 가
grid-auto-rows(columns)
그리드 템플릿에서 row 혹은 column 크기를 명시적으로 정하지 않았을 때, 이것을 사용/
grid-row(column)
: 시작line / 끝line
grid-area
- 이름을 지정하는 속성
grid-template-areas
: “rows” “cloumns”
“.”
+
연산자가 있을 때, 하나라도 문자열이면 모든 요소를 문자열로 변환함==
와 ===
==
, !==
- 동등과 부동등===
, !===
- 일치와 불일지템플릿 문자열
let name = "eva"
console.log(`내이름은 ${name}입니다`)
function getAge(n){
return 2023-n;
}
console.log(`${name}의 나이는 ${getAge(2000)}입니다.`)
null과 undefined
null==undefined : true
null === undefiend : false (자료형이 다르기 때문이다)
z-index가 작동안할 때 살펴볼 것
1. 요소의 위치 및 z-index의 순서가 올바른지 확인.
2. 자녀의 z-index 수준을 제한하는 부모 요소가 없어야한다.