수업
미디어쿼리
- print 프린트 미리보기
<style>
@media print {
abbr::after {
/* attr() : css 속성 함수입니다. */
content: ' ('attr(title)')'
}
}
</style>
<abbr title="world wide web consortium">w3c</abbr>
abbr뒤에 가상요소를 주는데, 거기에 attr(title)의 내용을 넣는다.
그러면 body안에 title값(world wide~~)이 올라간다.
다만, @media print가 있기 때문에 인쇄 미리보기나 인쇄시에만 볼 수 있다.
다만, 실무에서는 거의 안 쓴다..
- device-pixel-ratio
@media screen and (-webkit-device-pixel-ratio : 2){
body{
background:royalblue;
}
}pixel-ratio가 2인 화면에서는 배경이 royalblue로 보이게 하겠다!
내껀 1.25였다...
웹표준검사, css검사
마크업하고 가장 기본적으로 해야 하는 검사. (두가지는 필수!)
reset.css
- content
content: '';
content:none;
css2랑 css2.1에 둘다 대응하기 위해 둘다 줬다..!
https://stackoverflow.com/questions/6803250/content-vs-content-none/6803278
- 숨김처리
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}마크업 할 때는 필요하지만 화면에 보일 필요 요소를 처리할 때 쓰는 css!
생각
어제밤에 한 시까지 붙잡고 있던 버튼이 멋사 안에 작은 버튼대회에서 수상(?)했다..!
진짜 어제까지 많이 우울하고, 잘 하고 있는게 맞을까 걱정했는데 너 잘하고 있다고 위로받는 기분이었다.
느낀점
잘한 점
- 어제 버튼 구현 하는 부분에서 막힌 부분이 있었는데, 결국 욕심 때문에 하나하나 조정하면서 결국 완성했다. 근데 오늘 다른 분의 코드리뷰를 하다가, 내가 막혔던 부분을 완전 시원하게 해결하는 것을 봤다. 얼른 적어놓고, 코드 공유 받아놨다! 막혔던 부분은 그냥 넘어가지 않고, 한 번 더 시도해보고 발전하려고 하는 모습에 스스로 조금 뿌듯했다.
고칠점
- 나도 코드리뷰를 받고 싶다고 생각했지만, 자신감을 내지 못했다. 잘 하지 못해도 자신 있게 코드를 보여주며 피드백을 받고 싶다고 하는 분들을 보며 반성했다. 나도 못하지만 당당하게, 내가 부족함을 인정하고 도움을 받아보고 싶다! 좀더 당당해질 필요성이 있다.
계획
- 혼자서 1만시간 사이트 미디어쿼리 사용해서 만들어보기!(피그마 제대로 참고해서!!)
- 다음에 막히는 부분이 있을 때 내가 먼제 코드리뷰 요청하기!
2021.11~