...tlqkf. 실기 시험이 21일... 아니 5월 31일은 시험 당일이니까 이제 20일 남았다.
문제는 학원에서 수업을 들었는데도 내 지식은 html ! 누르는거랑 div 누르고 tab 누른다는 거 밖에 기억에 남지 않았다는것이다.
말한건 많지만 여튼 입닫고. 그래서~ 유튜브 보고 다시 공부하기로 함. 거의 노베나 다름없다. 자 잣됨을 느꼈으니 시작해보자.
- 단축키 -
bag 또는 bgc : background-color
근데, 이 왼쪽 사진 보면 이게 왼쪽 정렬도 되어 있는데, 전체가 가운데 정렬이 되어야 하니까, m0-auto를 준다.
m0-auto : 위 아래는 0, 왼쪽 오른쪽은 auto
위쪽의 여백 : 브라우저들이 가지고 있는 기본 여백
이걸 없애기 위해서는 * {m0 p0} 쓰기
*(별표시)는 전체선택한다는 의미라고 함. margin (바깥여백) padding (안쪽여백)
div를 정의하는 방법 : id, class
★ 이해 안가는거 : 왜 header에 로고는 보이는데 nav는 안보일까?
기본적으로 div는 display: block이라 세로로 쌓이기 때문에, .nav가 .logo 아래로 내려가서 header 영역 밖으로 밀려 안 보인다.
#header = 큰 종이
.logo = 그 위에 붙인 빨간 스티커
.nav = 그 위에 붙이려던 파란 스티커
이게 df를 줄때 .nav에다가만 주는게 아니라 #header에 주는 이유
flex는 내 "자식"들을 어떻게 배치할지를 정하는 속성이라서.
#header에 display:flex
→ header의 자식인 logo와 nav를 가로 정렬
.nav에 display:flex
→ nav 안의 자식들을 가로 정렬