교육후 개인공부/CSS5 [css] 라이브러리없이 캐러셀 구현하기 라이브러리 의존성을 없애기위해 라이브러리없이 캐러셀을 구현한다. 1. 사진을 일정한 사이즈로 맞춤 .slide-box img { width: 700px; height: 450px; } 2. 일단 사진을 가로로 정렬 display: flex; 3. 화면을 벗어난 사진은 일단 가린다. .slide-container { border: 10px solid red; display: flex; overflow: hidden; } 4. 사진크기만큼 옆으로 이동하면 다른 사진이 보인다. .slide-box img { width: 700px; height: 450px; transform: translate(-700px); } index랑 관련하다 보니까 transform을 css파일에 두는것보다 js부분에 templat.. 2024. 4. 21. [CSS] table설정 table은 기본적으로 틈이 존재한다 그걸 없애려면 border-collapse: collapse 셀 안의 요소 상하정렬 vertical-align: top/middle/bottom td 하나로 합친거처럼 보이게 하려면 (총가격보이는식) td colspan="5" 5칸을 합친 사이즈라는의미다. 2023. 12. 2. [CSS] width가 %일경우 width를 %로 설정하면 부모요소의 %로 설정된다. 근데 width %의 문제는 PC사이즈에서 너무 크다는것이다. 그래서 max-width를 같이 쓴다.(최대폭을 설정한다) 2023. 12. 2. [CSS] position설정 position: relative 내 원래 위치를 기준으로 이동하세요 position: static 좌표 이동하지 말아주세요 position: fixed 현재화면이 기준(viewport 기준) 상단메뉴같이 위치 고정되는거 만들때 사용한다. position: absolute 내 부모 태그중에 position:relative를 가진 부모가 기준이다. position: absolute준 요소 가운데 정렬 하려면 position: absolute left: 0; right: 0; margin: auto; width: 알아서설정. 어떤 두가지를 겹쳐서 보여주려고할때 margin을 -로 설정하면 밑에 보여지는 화면이 밑으로 깔린다. 밑에 보여지는 화면이 위로 등장하게 하려면 position: relative; to.. 2023. 12. 2. 이전 1 2 다음
