{** Tip **}
dbcut, 지디웹 : 웹 사이트 모음 사이트. 디비컷이 좀 더 보기 편하다!
언스플래쉬 : 사진 무료 사이트. 사람 얼굴이 나온 사진은 초상권이 걸릴 수 있고,
2차 제작물을 위한 사이트니 많이 변형하여 사용하면 좋다.
[이미지 비율]
이미지를 넣을 때 상위 엘리먼트와 비율이 안 맞아 삐져나오거나 부족한 경우,
object-fit: cover;을 사용하여 비율을 지키며 꽉 채울 수 있다.
[position]
-static: 기본값
-absolute: fixed와 한가지를 제외하고 모두 같은 특징을 가진 속성값이다. fixed는 viewport를 기준으로, absolute는 position:relative;인 상위 엘리먼트를 기준으로 절대적인 위치를 가진다.
[위치 속성]
- 값은 left, right, top, bottom
- 위 네가지 값의 속성값은 부모 역할을 하고있는 엘리먼트를 기준으로 가진다.
- 만약 100%를 속성값으로 넣었다면 부모 엘리먼트 너비 or 높이 + absolute의 너비 or 높이로 이동하여 화면밖으로 넘어갈 수 있다. ㄴ(스크롤이 생성된다. )
위에서는 body를 부모 엘리먼트로 작용하고, 아래에서는 position: relative;인 top-box를 부모 엘리먼트로 갖는다.
그래서 2차 네비바를 만들려면 top: 100%;를 적용하여 아래로 늘어뜨려야 한다.
탑박스에 마우스를 올렸을 때 자식 엘리먼트 css를 조절하는 방법.
(굉장히 획기적인 방법이다.. 맨날 js로만 짰는데..)
