공용ui (2) 썸네일형 리스트형 [css, 공용 ui, js] max-height, max-width로 접었다 피는 폴딩 ui 반응형 만들기(% 단위를 사용하지 못할 때) 목적폴딩 ui는 css의 transtion과 max-height, max-width 속성을 이용해서 아주 간단하게 만들 수 있다.문제는 화면의 크기가 가변적인 상황에서 반응형 ui로 만들때인데,ui가 펴지는 상황에서 max-height와 max-width에 퍼센티지(%)를 사용할 수 없는 경우가 있다.이럴 때에는 펴지는 상황의 예상크기를 js로 계산하여 직접 스타일을 주어야 하는데, 그럴 때 사용하는 ui다. 원리이 폴딩 ui는 최초에 접힌 상태로, max-width와 max-height가 0으로 설정되어 있다.우선, 최초에 document가 로드된 시점에 max-width, max-height 제한을 풀어서 ui의 원래 크기로 되돌린다.그리고 이 크기를 변수로 저장한 후 다시 접힌 상태로 스타일을 되.. [css] ul, ol 태그 공부 (+: custom- ul 만들기) 용도ul과 ol은 문단의 시작점(li 태그)에 1,2,3....n, 혹은 ● 같은 리스트 스타일(marker)을 적용할 수 있는 태그이다. 원리ul과 ol의 marker은 list-style이라는 shorthand 설정으로 한번에 설정가능하고, 이는 list-style-type, list-style-image, list-style-position으로 구성된다. 이 중에서 list-style-type, list-style-image은 marker의 형태를 결정하고 list-style-position은 들여쓰기 모드를 결정한다. display:list-item li에 marker를 표출하기 위한 display 설정 list-style-type marker의 형태를 string 형태로 적용한다.미리 준.. 이전 1 다음
