CodePen
자식 선택 방법
1.
nth-child(n)
부모 엘리먼트의 모든 자식 엘리먼트중 n번째
ex) div:nth-child(n) → n번째 자식 중에 div인 것
2.
nth-of-type(n)
부모 엘리먼트의 특정 자식 엘리먼트중 n번째
ex) div:nth-of-type(n) → div만 고려했을 때 n번째 인 것
3.
이외 방법
nth-last-child(n), first-child, last-child 등
display
1.
inline-block
a.
글자화
b.
너비를 최소로 만듬
c.
img, a, span 등이 있다.
2.
block:
a.
블록화
b.
너비를 최대로 만듬
c.
대부분 태그들이 block에 속한다.
emmet
1.
강력한 자동완성 기능 등으로 HTML 작성 속도를 크게 향상시켜주는 플러그인
2.
사용예시) div[name=”Paul”][age=”23”]{내용}
3.
visual code에서도 사용 가능
선택자
크기 조정
1.
100%로 지정하면 margin을 줬을 때 너비가 100%보다 커진다.
2.
크기를 고정하면 margin을 양쪽에 주는건 사실상 불가능하므로 이때는 auto를 하면 된다.
크기 또는 반대쪽 margin을 auto로 설정하면 됨
백엔드도 프론트를 배우기 쉬워진 이유
1.
크롬 대통일: 엣지 등에서도 내부적으로 크롬을 씀
2.
flex display
3.
tailwind -1차원적 css코딩
default값을 알면 좋음
1. 글자 color default : inherit, body의 값을 상속 받아서 기본적으로 모든 태그가 검정색이 되는 원리
2. margin, padding의 기본값은 0
3. div의 width기본값은 auto
노멀라이즈
태그의 기본 디자인을 끄는 것
