와 12월 첫 TIL! 👽👽 🎉🎉🎉🎉🎉🎉🎉🎉
🎆 오늘 한 것
- html, css 기초 공부 & 복습(멋사)
- 11월 회고 쓰기
- 그리드 조금 알아보기
- 리액트 복습 조금...
- deep dive 14~15장 읽기
- 타입스크립트 책 읽기(3장 반 정도까지)
🙄 오늘 하려고 했는데 못한 것
- 알고리즘 강의 조금 보기
- 구멍난 마크업 언어 지식 채워넣기 2
✨ float
단어 뜻 그대로 float 해서 정렬하는 레이아웃 프로퍼티. 이 css 자체의 설명보다는 float가 어려운 이유 관련으로만 적는당.
👇의문인 상황 가져와봄
형제요소인 그룹 1 2 3 중 그룹 1에만 플롯을 넣은 상황
그룹1에 플롯을 넣어서 허공에 떠있기 때문에 요소가 겹쳐진 건 알겠는데 그룹2 글자는 갑자기 왜 밀려난거임?
내부의 요소가 인라인이어서 밀려남(텍스트는 인라인 요소이기 때문에 밀려난 것임)
예전에 썼던 워드 이런 거에 이미지 삽입할 때랑 똑같은 거임
float엔 고질병이 있는디...
띄워놓은 것이기 때문에, 부모 요소가 자식 요소의 높이값을 인식하지 못함
(absolute랑 비슷한 상황이라고 보면 될 듯)
예전엔 이걸 해결하려고 after 써서 클리어 넣는 방법 밖에 못 써봤는데... 사실 그 클리어픽스는 너무 어렵고 플렉스는 너무 쉬워서ㅋㅋ; 플렉스로 대충 다 해결하고 있었음...플렉스는 사람을 게을러지게 하는 군아...
암튼 저런 고질병을 해결하는 방법
🎇 display : flow-root
The element generates a block element box that establishes a new block formatting context, defining where the formatting root lies.
📌 block formatting context, BFC에 대해서
mdn 문서의 설명인데, 저걸 써주면 대충 BFC라는 요소를 하나 생성해서 다른 요소들과 상호작용을 할 수 있게 한다는 의미인듯...?
float를 넣은 요소의 부모 요소에 display : flow-root 를 넣어버리면 바로 해결
근데 이건 나온지 얼마 안돼서 아직 웹 호환성이 처참하다고 함. 언젠간 수월하게 지원될 수도? 있으니 알아놓는다고 손해는 아닌듯. 암튼 모던한 방식은 이거다.
🎇 overflow : hidden
부모 요소한테 overflow:hidden 을 넣어버리면 오버플로우는 내부 자식의 크기을 알아야 제대로 작동하기 때문에 플롯을 넣어놓은 친구들의 높이도 인식하게 됨.
이건 현업에서 여전히 많이 쓰이나보다. 근데 이 방식은 잠재적인 위험이 있다고 한다. overflow로 hidden을 넣어놨기 때문에 자식 요소를 left나 top 같은 걸로 위치를 옮겨버리면 부모요소를 벗어나는 순간 안 보이게 됨.
🎇 clear fix(div에 직접적으로 추가하는 방법)
.clearfix {
clear: both;
}결국 돌고 돌아 클리어픽스.
플로트 요소 마지막에 클리어픽스라는 div를 삽입하고, clear 속성을 주면 바로 해결되어버림.
(클리어픽스라는 이름을 관례적으로 많이 쓰는 것 뿐이지 꼭 이 이름이어야 될 필요는 없다!)
🎇 clear fix(after로 해결하는 방법)
.main::after {
display: block;
content: "";
clear: both;
}부모 요소한테 after 만들어서 display를 block으로 바꿔주고 얘한테 클리어를 넣어버리면 해결된다.
But 가상으로 요소를 만들어낸 것이기 때문에 이런 상황에서 flex 같은 걸 써버리면 레이아웃 이슈가 생겨버린다. 알고 있어야 될듯.
✨ display : grid
구글 검색하면 바로 나오는 1분 코딩의 그리드
대충 이 글을 토대로 공부했다. 이분 글로 플렉스도 어느 정도 익혔는데 정말 잘 설명되어있다.
flex와 grid의 차이는 flex는 한 방향 레이아웃 시스템이고 (1차원), Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)이라는 점이다.
.container {
display: grid;
}flex와 동일하게 grid도 부모 요소에 display : grid;를 넣어주면 된다.
🎇 기본 용어
기본적인 용어 말고 내가 잘 모르는 것만 가져왔다. 세부적인 것들은 그냥 개발자 도구에서 이것저것 눌러보면서 배우는 게 더 효과적이기 때문에... 글로 적진 않을 것ㅎㅎ
- 그리드 트랙 (Grid Track) : Grid의 행(Row) 또는 열(Column)
- 그리드 셀 (Grid Cell) : Grid의 한 칸. Grid 아이템 하나가 들어가는 “가상의 칸(틀)”이라고 생각하면 됨
- 그리드 라인(Grid Line) : Grid 셀을 구분하는 선
- 그리드 번호(Grid Number) : Grid 라인의 각 번호
- 그리드 갭(Grid Gap) : Grid 셀 사이의 간격
🎇 부모 요소에 넣는 속성
display: grid;: 이게 있어야 그리드를 쓸 수 있음. 당연함
🚀 grid-template-columns/grid-template-rows
grid-template-columns: 열의 배치를 지정해주는 속성grid-template-rows: 행의 배치를 지정해주는 속성
.container {
grid-template-columns: 200px 200px 500px;
/* grid-template-columns: 1fr 1fr 1fr */
/* grid-template-columns: repeat(3, 1fr) */
/* grid-template-columns: 200px 1fr */
/* grid-template-columns: 100px 200px auto */
grid-template-rows: 200px 200px 500px;
/* grid-template-rows: 1fr 1fr 1fr */
/* grid-template-rows: repeat(3, 1fr) */
/* grid-template-rows: 200px 1fr */
/* grid-template-rows: 100px 200px auto */
}
// 굉장히 다양한 단위로 지정할 수 있다...grid-template-columns: 100px 2fr 1fr;이런 식으로 혼종을 만들어낼 수도 있음
📌 여기서 fr 이란?
fraction, 숫자 비율대로 트랙의 크기를 나누겠다는 의미. 1fr 1fr 1fr 라고 쓰면 1:1:1 의 비율로 칸을 나누게 됨
🎇 자식 요소에 넣는 속성
🚀 각 셀의 영역을 지정하는 속성
라인의 번호로 범위를 결정한다.
- grid-column-start
- grid-column-end
- grid-column
- grid-row-start
- grid-row-end
- grid-row
.item:nth-child(1) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}👇 위의 css가 적용된 모습
🚀 영역 이름으로 그리드 정의
- grid-template-areas
grid-template-areas:
"header header header"
" a main b "
" . . . "
"footer footer footer";.header {
grid-area: header;
}
.a {
grid-area: a;
}
.main {
grid-area: main;
}
.b {
grid-area: b;
}
.footer {
grid-area: footer;
}보이는 그대로...
🎆 내일 할 것
- 수업 들은 거 정리하고 복습
- 구멍난 마크업 언어 지식 채워넣기 2
- 알고리즘 강의 보기
- 타입스크립트 책 읽기(3장 끝까지), 그리고 내용 정리해서 쓰기
- 리덕스 진입하기
📝 오늘의 일기
친구가 지인분에게 책을 받아왔길래,,, 나도 보여달라고 빌어서 같이 보기로 했다 히히... 자기 전에 조금씩 읽을 예정... 리액트도 책이 있으면 좋겠는뎁... 나중에 사야지
오늘 수업에 대해서
오늘은 vscode 설정이랑 html, css 관련으로 이것저것 배우는 일정이었어서 후딱 따라 가고 짬날 때마다 다른 공부...를 했다. 그치만 나 엉성하긴 해도 퍼블리셔였기도 하고,,,ㅎㅎ,, 어차피 화면이 거대해서 수업 켜놓고 옆에 다른 거 할 수 있음ㅎㅎ... 그래도 float는 여전히 잘 모르는 개념이라 열심히 집중했음
휴 맨날 말하는 감자, 말하는 감자, 했는데 알고보니 말도 못하는 감자였다 나는... 마크업 열심히 공부해야지...
📌 오늘의 틈새 팁
