오늘은 지금까지 학습한 HTML과 CSS에서 자꾸 헷갈리는 부분을
복습하였다.
학습한 것
-
css 다중 선택자
-
마진 겹침 현상 해결
-
가상요소 선택자
-
모바일 우선 개발
-
미디어 쿼리
-
W3C validator (오류 검사 사이트)
/css 다중 선택자 & 가상 요소 선택자/
눈에 안익어서 헷갈릴 떄가 있다.
다중 선택자
- .a, .b, .c { } => a 또는 b 또는 c (모두 적용)
- .a .b .c { } => a 내부의 b 내부의 c (부분 적용)
- .a.b.c => class a b c 처럼 모든 속성을 한번에 가지는 클래스에만 적용
가상 선택자
- a::after => a 뒤에 가상 요소 삽입
- a::before => a 앞에 가상 요소 삽입
/마진 겹침/
두 블록 요소의 상하 마진이 겹치게 되면 한쪽의 마진만 적용되는 현상이 있는데,
이 것을 마진 겹침이라고 함.
의도가 아니라면 이럴 떄는 padding(또는 border)을 통해 경계를 설정하여 해결해야 함.
마진 상쇄 벨로그(링크)
여기 설명이 잘 되어 있음.
/미디어 쿼리/
미디어쿼리 초보자(링크)
미디어쿼리 개념 설명된 벨로그(링크)
아직 viewport는 안 써봤는데 필수적으로 써줘야하나보다.
반응형.. 배치하는거 어렵다..
/모바일 우선 개발/
반응형 웹 디자인을 할 떄는 모바일을 우선으로 할지, 데스크탑을 우선으로 할지 정해야 한다고 한다.
통상적으로는 모바일 우선이 더 효율적이고 많이 쓰인다고 함.
직관적으로 이해한건 작은 것을 합치는 게 당연히 큰거를 쪼개는 것 보다 편할 것 같다..
mobile first develop (영문)
영어 문서 스터디 할 때 써먹을 적당한 사이트를 찾았다! ㅋㅋ
양이 많아서 다는 못읽었지만 주말까지 ㄱㄱ
/CSS 오류 검사 사이트/
http://jigsaw.w3.org/css-validator/
포트폴리오 제출할 때 꼭 돌리라고 하셔서 까먹을까봐 기록함
오늘의 일기
오늘은 제대로 못했던 1만시간의 법칙 페이지를 다시 클론해보고
제대로 개념이 안잡혔던 부분을 복습했다.
이미지를 figma로 픽셀 보는거랑 img파일 속성으로 값 확인하는 기본적인걸
못하고 있어서 잘 안됐던 것 같다.
그리고 이제 까먹을 것 같은게 많아져서 까먹거나 헷갈리면
벨로그를 꺼내먹어야 할 떄가 온듯.
탄천 달리기를 오래 했더니 컨디션도 좋다. 내일도 화이팅
