main 이나 aside 등과 같이 조금은 독보적인 div들은 그냥 이름 그 자체로 사용하자
id를 굳이 안써도 된다는 이야기
tag의 기본설정(다른 프로그램에도 사용하는 것들)은 위에다가 그냥 통으로 정의해주면 됨.
ex) body tag는 자체적으로 margin 이 존재하니 이를 제거하는 tag등...
완전 베이스가 되는 것들은 기본 파일을 하나 새롭게 파는게 요즘 추세인다..
본격적인 궁금점 확인 해보자!
1. margin 과 gap 차이
gap 은 요소들 간에 띄우는 거다!
margin 은 요소뿐만아니라 무조건 띄움
한마디로 요소들이 없다면 gap은 동작이 없을 것! 반면 margin은 그대로~
참고로 margin 테스트 하다가 margin 충돌이 일어날 수 있으니 주의할 것!
2. em과 rem 차이가 뭐지? 아니 그전에 em rem이 뭐야 도대체
이걸 알려면 기본적으로 상대 단위와 절대 단위라는 개념부터 알고 가야한다!
1. 절대 단위
=> 말그대로 절대 단위이다.
대표적으로 px이 절대단위이다
2. 상대 단위
==> 부모요소를 따라가는 상대적인 단위이다.
대표적으로 em rem vw vh가 있다
em rem 차이
em rem 모두 상대적인 단위인데
rem은 r이 root라서 최고 부모의 px 값을 받게 된다.
em은 그 div나 span에서 pixel 값의 상대적인 값을 부여받게 됨.
- 0.5em = 16 px x 0.5 = 8px
- 1em = 16 px x 1 = 16px
- 2em = 16 px x 2 = 32px
- 3em = 16 px x 3 = 48px
이런식이다.
3. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 란 무엇인가
viewport 가 사용자에게 보여지는 영역이다.
width=device-width는 디바이스의 크기만큼 크기가 된다는 의미이다.
initial-scale=1.0 초기 크기 값이다
max랑 min도 존재한다!
4. body 에다가 바로 만들기 뭐할때 div를 만들면
그것의 이름을 container 이런식으로 지어주는게 좋을 듯하다