💻 더 나은 개발자 되기/html, css 11

캐스케이드, Cascading 이란? css에는 캐스케이드 라는 개념이 있다. Cascade. 작은 폭포, 여러 단으로 된 폭포 라는 뜻이 있다. 그럼 css에서의 캐스케이드는 어떤 의미일까? 원래의 뜻처럼 폭포처럼 규칙에 따라 CSS규칙을 적용하는 것을 뜻한다. "종속"이라고 번역을 하기도 하며, 우선순위에 따라 속성이 적용된다. 1. 시트별 우선순위 style.css > 브라우저 기본 스타일시트 - 두개에 동시에 동일한 선택자가 존재하면, 우리가 작성한 코드의 우선순위가 높다. 즉, 디폴트로 제공하는 것에 우리가 원하는 대로 추가를 했다고 생각하면 되지 않을까? 2. 코드순서 위쪽 < 아래쪽 - 위에서 아래로 흐르는 느낌으로 동일한 속성값이 있다면 가장 아래쪽의 코드가 반영이된다. 예를들어 하나의 클..

이미지의 갯수가 3개 이상일 때 자동으로 줄 바꿈 되어 보여주고 싶었다. 가로로 배치가 되고, 정렬 역시 가로로 되고 있다. 컴포넌트 구조 ViewList.jsx - MainPlace.jsx MainPlace를 ViewList에서 import해서 뿌려주고 있고, ViewList에서는 map형태로 호출을 해주고 있다. const Wrapper = styled.div` display : grid; grid-template-columns : repeat(3, minmax(100px, auto)); grid-gap: 100px; padding : 50px; width : 80%; padding-top:70px; ` function MainViewList(props){ return ( {data.map((plac..

자동 슬라이드 기능 만들기 gif가 아니지만.. 순차적으로 내부의 글자등이 바뀌는 자동 슬라이드 기능 만들기. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com swiperjs에 들어가서 Get Started를 누르면 사용하기 위한 코드를 받을 수 있다. 난 나중을 위해 블로그에 그대로 기록. Slide 1 Slide 2 Slide 3 ... 스크롤을 움직이면 html구조도 함께 받을 수 있다. new S..