float-grid2 2021-05-21 (39일차) float-grid, 밑줄 애니메이션, flex, flex-grow, 수직정렬방법 align-items, align-self, 버튼만들기 149강~150강 - float-grid .float-grid::after { content:""; display:block; clear:both; } .float-grid > * { float:left; box-sizing:border-box; } - 밑줄 애니메이션 1) 좌 > 우 효과를 주고 싶은 태그의 뒤 or 앞에 absolute를 놔주기 ex) 태그::after { content:""; background-color:white; width:0; height:2px; position:absolute; bottom:0; left:0; transition:width .3s; } :hover > a::after { width:100%; } 2) 가운데 > 양쪽 효과를 주고 싶은 태그의 뒤 or 앞에 .. 2021. 5. 22. 2021-05-17 (35일차) float:left, float, block, content, clear:both, float-grid, max-width, overflow-x:hidden; 145강~147강 - float : left display : inine-block처럼 작동 → 가로정렬, 띄어쓰기공백 없음, 최소한의 크기로 줄어들음, verticle align:top없이 위에 붙음 문제점 : block요소인 부모는 float를 무시하는 법칙이 있음 해결방법 : 부모인 block요소가 자식인 float요소를 무시하지 않기 위해 float의 형제에 block요소 추가 문제점 : 추가된 block요소만 부모에게 인식되고, float요소들은 여전히 무시됨 해결방법 : 추가된 block요소에 clear : both를 주면 모든 문제점 해결 ↓↓↓↓↓↓↓↓최적의 방법↓↓↓↓↓↓↓↓↓ 부모>자식 {float:left;} 부모태그::after {content:""; display:block; cl.. 2021. 5. 18. 이전 1 다음
