오늘의 나는 무엇을 잘했을까?
- 레이아웃을 배우고 나니 요소 배치가 한층 쉬워졌다. 저번 주에 비해 미니 프로젝트를 완성하는 시간이 확 줄었다.
- 적절한 양의 Todo를 세워서 효율적으로 공부했다. 앞으로도 양을 찾아가면서 할 것!
오늘의 나는 무엇을 배웠을까?
[1] CSS 레이아웃
Position
normal flow에서 벗어나서 위치를 직접 정하는 방식
position 속성은 top, left, bottom, right 속성과 함께 사용된다.
instet :top,left,bottom,right한꺼번에 설정.
static
- 기본값. 적용을 안한 것과 같다. 따라서 top, left …의 속성은 무시된다.
absolute
- 가장 가까운 positioning된 상위 요소의 위치를 기준으로 상대적으로 배치해준다.
- 만약에 해당 요소 상위에
position속성이static이 아닌 요소가 없다면, 최상위에 있는<body>요소가 배치 기준이 된다. - 원래 배치에서는 자리를 차지하지 않는다. (기존의 배치에서 완전히 벗어나서 배치됨)
- width가 설정되지 않은 경우에, block display 처럼 부모 너비만큼 늘어나지 않는다.
relative
- 요소를 원래 위치를 기준으로 상대적으로 배치해준다.
- 원래 배치에서는 영역만큼 비워둔다.
fixed
- 스크롤을 내려도 그 자리에 고정되게 하는 기능다. (nav바나, 라이브 채팅 버튼 등..)
- 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트, 즉 브라우저 전체 화면이다.
- 일반적인 문서 흐름을 무시한다.
sticky
- 스크롤을 하다가 미리 지정한 위치(top, left 등)를 만나면 fixed 됨.
- 부모 요소 안에 갖혀있다
- 부모 요소가 화면에서 사라지면 같이 사라진다.
fixed와 마찬가지로 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트, 즉 브라우저 전체 화면이다.
z-index 속성
z-index를 정하지 않으면 기본값은auto인데, 이 값은 0이랑 마찬가지이다.z-index의 값이 같다면 코드 상에서 아래 줄에 있을수록 앞쪽에 보인다.
쌓임 맥락 (Stacking Context)
z-index를 묶어서 생각하는 범위- 쌓임 맥락이 만들어지는 조건
- 문서의 루트 요소(
<html>) position이absolute이거나relative이고,z-index가auto가 아닌 경우position이fixed이거나sticky인 경우- 플렉스박스나 그리드의 자식 중
z-index가auto가 아닌 경우 opacity가 1보다 작은 요소- etc..
- 문서의 루트 요소(
z-index의 기본 값인auto와0의 차이는 쌓임 맥락을 만드느냐 아니냐의 차이
Flexbox
박스를 만들고 방향을 정해서 요소를 배치하는 방식
배치할 방향
flex-direction- 기본값 : row (기본 축 왼 → 오른쪽) / column (기본축 위→아래)
- 기본축 Main Axis / 교차축 Cross Axis
- 기본축 방향으로 순서대로 배치, 교차축 방향으로 꽉채워서 배치
정렬하기
justify-content- 기본축 방향의 정렬align-items- 교차축 방향의 정
요소가 넘칠 때
flex-wrap : wrap;
요소들 사이 간격
gap: 세로 가
크기 늘이거나 줄이기
flex: grow, shrink, basisflex-grow- 플랙스 박스 안의 요소를 꽉 채우고 싶을 때. 1으로 둘 경우 꽉채워짐flex-shrink- 요소를 얼마나 줄일지 정할 때. 내가 지정한 크기로 고정하고 싶을 경우 0으로 두면 된다.- 기본 값은 1. 기본적으로 요소가 넘치면 크기를 줄여주기 때문이
flex-basis- 요소의 시작 크기. 기본값 auto- auto일 경우
width나height를 참고해서 시작 크기를 정한다. - flex-direction이 row일 때는 너비, column일 때는 높이 - 즉 axis 방향으로의 크기를 설정
- auto일 경우
absolute랑 fixed는 요소의 원래 자리에서 쏙 빠져버리기 때문에 글의 흐름에서 빠지는 거랑 마찬가지로, 플렉스박스랑 상관없이 배치된다.
Grid
칸을 나눈 뒤 요소를 배치하는 방식
그리드 라인, 그리드
격자 나누기
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
- line은 1부터 시작
- span을 사용하면 크기를 정할 수 있음
- ex) grid-row : 1 / span 3 = row 방향으로 라인 1부터 3칸 차지
이름으로 배치
grid-area - 이름을 지정하는 속성
grid-template-areas : “rows” “cloumns”
- 비워두고 싶을 때는
“.”
[2] JavaScript 자료형
- 문자열 안에 따옴표를 적고 싶을 때
- 앞쪽에 \ 쓰기
- 문자열을 `(백틱) 로 감싸기
- '코드잇' !== "코드잇” 은 참이다
- 문자열을 만들 때는 따옴표의 모양이 달라도 같은 문자열
- typeof()의 결과는 string이다.
- 형변환
- Number(??)는 string이지 숫자형태일 때, boolean값만 변환가능하다.
- true(1), fals(0)
- 일반적인 string은 NaN이
- Boolean(??) - 아래의 경우 빼고는 다 true로 반환
- falsy값들
- 빈 문자열
- 숫자 0, NaN(숫자가 아니라는 뜻)
- falsy값들
- 자동 형변환
+연산자가 있을 때, 하나라도 문자열이면 모든 요소를 문자열로 변환함- NaN은 어떤 연산이 오든 NaN으로 출력됨
- 비교 연산자 - 형이 달라서 비교할 수 없을 때도 false
-
==와=====,!==- 동등과 부동등- 자동 형변환이 일어남
===,!===- 일치와 불일지- 자동 형변환 XX, 즉 자료형까지 같아야 한다
-
템플릿 문자열
let name = "eva" console.log(`내이름은 ${name}입니다`) function getAge(n){ return 2023-n; } console.log(`${name}의 나이는 ${getAge(2000)}입니다.`) -
null과 undefined
- null : ‘값이 없다’를 의도적으로 표현할 때 사용하는 값
- undefined : 값이 없다는 것을 확인할 수 있는 값
- 선언을 한 뒤 값이 주어지지 않았다는 것을 의미한다
null==undefined : true
null === undefiend : false (자료형이 다르기 때문이다)
- Number(??)는 string이지 숫자형태일 때, boolean값만 변환가능하다.
오늘의 나는 어떤 어려움이 있었을까?
- Position과 관련한 쌓임 맥락 (Stacking Context) 이해가 어려워 따로 찾아보며 정리했다.
z-index가 작동안할 때 살펴볼 것
1. 요소의 위치 및 z-index의 순서가 올바른지 확인.
2. 자녀의 z-index 수준을 제한하는 부모 요소가 없어야한다. - 온라인은 왜이렇게 졸린지 모르겠다. 나태해지는 모습을 느끼고 있는데 정신 차려야겠다. 아무래도 어수선한 방 환경 때문인 것 같은데, 주말에 대청소를 할 예정!
내일의 나는 무엇을 해야할까?
- 알고리즘 스터디 모집
- 기본적인 미션
- Unix 강의
- Weekly Mission 2시간 투자
