CSS
-
-
-
CSS - grid 이해하기CSS 2020. 9. 6. 00:35
flex와 grid의 가장 큰 차이점: - flex는 1차원(한방향) 레이아웃 시스템, grid는 2차원(가로, 세로/ 두방향) 레이아웃 시스템 - grid가 더 복잡한 레이아웃 표현이 가능 IE에서도 지원하지만 방법이 다름 firefox사용하면 그리드 사용하기 더 편리하다고 한다. 1 2 3 4 5 6 7 8 9 부모요소 Grid Container 자식요소 Grid Item 시작 부모요소에 display: grid; Grid Track - grid의 행 또는 열 Grid Cell - grid의 한 칸 의미 Grid Line - gird 셀을 구분하는 선 Grid Number - Grid 라인의 각 번호 Grid Gap - gird 셀 사이의 간격 Grid Area - gird 셀의 집합 컨네이너에 적용..
-
-
CSS + Jquery 이미지 페이드인 슬라이드 만들기CSS 2020. 9. 3. 22:31
자동 페이드인 슬라이드 HTML Starters Web developers CSS .slide{ height:730px; overflow:hidden; position: relative; top:0; left:0; } .slide > div{ position: absolute; height:100%; } Jquery $(".slide > div:gt(0)").hide(); setInterval(function() { $('.slide > div:first') .fadeOut(2000) .next() .fadeIn(2000) .end() .appendTo('.slide'); }, 6000); - 현재 웹사이트 제작 외주 일에 사용할 판매 사이트에 적용하면서 만든 코드 - setInteval 만들 땐, 뭔지..
-
-
-