<오전,오후 class = "이호준 강사님 Reset CSS, 공백처리, 주석 및 벤더프리픽스, CSS Selector, 선택자 우선순위, Box Model">
Reset CSS
브라우저마다 설정이 다르기 때문에 모든 설정을 초기화 시켜주는 CSS이다
- 에릭마이어의 CSS
싹 다 초기화
2011년 이후로 업데이트X https://meyerweb.com/eric/tools/css/reset/
CSS Tools: Reset CSS
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter
meyerweb.com
- normalize.css
좀 더 유연한 방법으로 초기화
비교적 최근 업데이트, 주석에 꼼꼼한 설명, 오늘날 가장 많이 쓰임 https://necolas.github.io/normalize.css/
Normalize.css: Make browsers render all elements more consistently.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
necolas.github.io
1만 시간의 법칙 페이지 간단하게 마크업
적정시간은 10분인데 20분을 주셨다
- 문제점
난 다 못했다 - 원인 파악
손이 느렸다, 어떤 순서로 할지 조금 막막한 감이 있어서 생각하는데 시간이 소요된다 - 해결방안
익숙해지도록 혼자 많이 연습해야한다
- 모달은 맨 마지막쯤에 작성한다
공백처리, 주석 다행히 아는 내용
벤더프리픽스 Vendor-Prefix
크로스 브라우징을 위해 레거시 브라우저를 지원해야하는 점도 잊지말기
https://autoprefixer.github.io/
Autoprefixer CSS online
include comment with configuration to the result Select result You can also see which browsers you choose by filter string on browsersl.ist Autoprefixer online — web repl for original Autoprefixer. It parses your CSS and adds vendor prefixes to CSS rules
autoprefixer.github.io
CSS Selector
<--수정예정
캐스태이딩
타입선택자의 우선순위가 높아서
선택자 우선순위
style적용시 우선하는 것
id>class>tag
--->
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
flexngrid
flex, grid 코드 에디터 .container { display: flex; } .item1 { flex: 1; } .item2 { flex: 2; } .item3 { flex: 1; } .item4 { flex: 1; } .item5 { flex: 2; } .item7 { flex: 1; } .container { display: flex; } .container1 { justify-content: space-between; }
flexngrid.com
CSS Box Model
오늘 솔직히 집중 잘 못함
체력 탓일까?
연휴동안 할 것
- 인프런 인프콘 보기
- 일만시간의 법칙 페이지 과제_깃허브 주소와 깃허브 페이지 주소 공유
- CSS 과제 확인
- 30분 요약강좌 HTML, CSS, JS, SPA 까지 쭉 훑어보기
- 종찬 강사님 유튜브 강의
'멋쟁이사자처럼 프론트엔드 스쿨 > FE TIL' 카테고리의 다른 글
| [멋사 프론트엔드 스쿨]9월 15일 목요일 TIL_CSS Selector 심화, CSS Combinator, Flex (0) | 2022.09.16 |
|---|---|
| [멋사 프론트엔드 스쿨]9월 14일 수요일 TIL_Text, position, Float (0) | 2022.09.14 |
| [멋사 프론트엔드 스쿨]9월 7일 수요일 iframe, audio, vidio, Tabular data, CSS특강 (1) | 2022.09.08 |
| [멋사 프론트엔드 스쿨]9월 6일 화요일 TIL_Text-level semantics, Embedded content (0) | 2022.09.06 |
| [멋쟁이사자처럼 프론트엔드 스쿨]9월 5일 월요일 TIL (1) | 2022.09.05 |