수업
.hidden {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}clip 속성 사용
rect: 네모나게 자르게 해주는 기능이다. top, left, right, bottom을 설정 가능하다.
반드시 position: absolute속성이 있어야 적용이 된다.
fixed도 잘라지지만 화면기준이라 같은 값이라도 absolute랑 조금 다르게 보인다.
참고 링크:
https://developer.mozilla.org/en-US/docs/Web/CSS/clip
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
CSS Sprite
참고 링크:
https://www.toptal.com/developers/css/sprite-generator/
어떨 때 사용하면 안될까?
-
업데이트가 많이 되어야 하는 이미지
-
sprite용량이 많이 크면 자제해야한다. -
nav표지판이나, 브랜드 아이콘 등이sprite로 많이 쓰인다.
Sprite 레티나 디스플레이 대응법
참고 링크:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio
두배되는 이미지가 필요하다.(가로 두배, 세로 두배니까 결국은 네배)
더 큰 스프라이트 만들면 된다.
Bootstrap
칼럼 클래스 4가지
-
Extra small (for smartphone) .col-xs-*
: 항상 가로로 배치 -
Small (for tablets) .col-sm-*
: 768px 이하에서 세로로 표시 시작 -
Medium (for laptops) .col-md-*
: 992px 이하에서 세로로 표시 시작 -
Large (for laptops / desktops) .col-lg-*
:1200px 이하에서 세로로 표시 시작
생각
부트스트랩은 정말 너무 신기하다. 이렇게 편리한게 있었다니... tailwind도 편하다던데 궁금하다.
느낀점
잘한점
- 드디어드디어 헬스장을 등록했다. 계속 앉아있으려니 체력적으로 힘들었는데, 매일매일은 힘들더라도 주 3회는 꼭꼭 운동을 해야겠다. 개인적으로 운동을 하면 전체적인 삶의 의욕도가 높아지는 편인 사람이기 때문에.. 춥고 귀찮아도 열심히 나가보자!
고칠점
- 주말은 항상 만족스럽지 못하다. 물론 주말에 쉬어야 다음 주도 잘 따라갈 수 있지만, 욕심은 욕심대로 나는데 그만큼 하지 못하니 스트레스를 받는 것 같다. 이번 주말도 계획은 열개 세운 것 같은데 한 세개정도 한 것 같다. 주말에 대해 좀 고민해봐야 겠다.
계획
- 주 3회 이상 운동하기
- 1시 전에 자기
- 주말 어떻게 보냈는지 회고해보고, 피드백하기!
