학습을 그냥 나열하는 것 + 느끼고 회고한 점 + 개선하고 싶은 점
수업
수평 정렬
div는 블록속성이라 한줄을 다 차지하는 욕심쟁이
width를 줄여도, margin으로 다 채워버린다
float, flex를 안쓰고 수평정렬은 inline-block을 쓰면 된다.
inline은 margin-top, bottom을 못준다. width가 적용이 안 된다.
그래서 inline-block으로 써야 한다.
근데 밑에처럼 썼을 때 공백이 왜 생길까??
display: inline-block;
<div>안녕하세요</div>
<div>안녕하세요</div>
<div>안녕하세요</div>줄바꿈은 공백으로 인식하기 때문이다. 그래서 한줄로 코딩하면 된다!
<div>안녕하세요</div><div>안녕하세요</div><div>안녕하세요</div>근데 이게 어려워서 인라인블록으로 수평정렬을 잘 안한다.
다른방법: 부모에게 font-size=0, div에 font-size를 다시 준다.
귀찮아져서 수평정렬할 때는 잘 안 쓴다.
position 복습
static: normal flow
relative
absolute
position: fixed
- 팝업창, 퀵메뉴, 다크모드로 가기 등
더보기 button을 굳이 absolute를 하는 이유
스크린리더는 요소 순서대로 함
내용이 나오고 더보기를 눌러야 하니까.
논리적 마크업 순서 때문에 굳이 앱솔루트를 써서 위에 놨다.
그게 아니고 윗칸에 하나로 묶어 놓으면 더보기를 내용보다 먼저 읽어버리니까!
float
자식이 float되면 부모가 알아보지 못한다.
형제들도 float된 형제들을 알아보지 못해서 요소들이 섞인다.
부모가 자식의 존재를 확인하기 위해서는
overflow:hidden;밑에있는 형제가 확인하기 위해서는
clear:left/right/both 를 쓰면 된다.
float을 해제하는 여러가지 방법들
overflow:hidden이 부모의 영역만큼만 보여주기 때문에 애매하다면, 안에 내용이 잘린다, 하면
display: inline-block을 줘도 된다. 이 때는 요소의 넓이값을 따로 줘야한다.
<clear-fix>방법
부모요소에 가상의 자식요소를 만들어서 content를 꼭 넣어주고
가상요소는 인라인 값을 가지고 있다. 그래서 width를주기 어려워서 display: block을준다.
::after는 마지막 자식 뒤로 간다.
마지막 자식 뒤에 clear 속성이 들어간다.
float에 있는걸 normal flow 형제들이 감지할 수 있게 해준게 clear!
생각
오늘은 실습을 많이 했다.
- 항상 느끼는 거지만, 아는 것과 실습은 다르다.
- 나보다 빠른 사람들을 보면 조급해진다.
- 이제 일주일! 조급해하지 말고 차근차근 탄탄하게 쌓아가기
- cs지식도 공부해야겠다. 기초적인 지식을 더 쌓아갈 필요성을 느낀다.
느낀점
고칠점
- 조급해한다
- 개념을 좀더 정확하게 이해할 수 있게 해야겠다.
- 어떻게 결과는 나와도 그게 왜 그렇게 나왔는지 의아한 경우가 있다.
- 자신이 쓴 코드를 설명할 줄 알아야겠다.
계획
손코딩을 하면서 다시 되새기다보면 막연하게 알고있는 것들이 많다는 걸
알게된다. 실습만큼 손코딩을 좀 많이 하는게 도움이 될 듯하다.
여태까지 실습하고, 과제한 것들을 내가 스스로 설명하는 연습하기!
피드백
- 누군가에게 설명해주고 있다고 가정하고 말을 하면서 복습하니까 더 꼼꼼하게 정리하게 된다. 말하다가 막히는 부분을 위주로 정리하니, 내가 모르는 부분이 확실하게 보인다. 실제로 사람에게 알려주면 더 많이 배울 수 있을 것 같다.
