이름 | 배운 내용 | memo | 보충할 것 | 질문하고 싶은 것 |
권지혜 | transition-delay로 원래 설정한 애니메이션을 딜레이시켜서 마우스를 이미지에 갖다댔을 때 몇초 후에 <p>에 쓴 부분이 나타나는게 흥미로웠다. | Ultimate CSS Gradient Generator : css 그라데이션 만들고 싶을 때 여기 들어가서 하고싶은 프리셋 누르고 opacity랑 location 등등 수정한 후 코드를 복사하면 끝! | ||
김설하 | 팀 설명하는 p태그 안보였다가 hover시에 보이게 하기
max-height: 0;
overflow: hidden;
| 무난무난
..이라고 생각하지만 혼자서 구현할 수 있는지 한번 테스트해봐야겠다! |
이름 | 배운 내용 | memo | 보충할 것 | 질문하고 싶은 것 |
권지혜 | display: table-cell 설정한 후에 text-align: center, vertical-align: middle을 써서 컨텐츠가 가운데로 오게 하는 점이 신기했다. flex가 대중화되기 전에 쓴 방법인 것 같았다. | |||
김설하 | font: inherit; 폰트 초기화의 역할
보통 대부분의 프로젝트에서 주는 초기화 옵션
display: table; 로 반응형 구현한 것 신기했다
flex의 호환성 문제에 대응 가능할 듯
이미지 하단 뜨는 공간 →
1. display:block (재현님 방식)
2. vertical-align: top; (종찬님 방식)
세로정렬이 까다롭다
1. vertical-align: center;??
vertical-align은 인라인과 인라인 간 세로정렬을 도움
2. padding: 100px 0; 좋은 방법은 아님
3. 부모요소에게 display: flex , align-items: center;
4. 호환 고려 -> display: table; 테이블의 반응적 속성과 세로 정렬 속성
미디어쿼리 파트
width: auto; 로 기본 속성 해제 (width의 initial value가 auto이므로 )
| h1,h2,h3,h4,h5 {
font: inherit;
margin: 0;
}
:root 에 대해 찾아봄
HMTL문서의 루트(최상단 요소)
모든 다른 요소는 이 요소의 후손이어야 한다 |
