728x90 분류 전체보기530 자식이 부모의 state 가져다 쓰고 싶을 때는 props 보호되어 있는 글 입니다. 2024. 5. 9. map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때 보호되어 있는 글 입니다. 2024. 5. 9. CSS에서 display: grid 의 사용법 CSS Grid 완전 정리 끝판왕 😎 (youtube.com)flex / grid아이템을 자유자재로 배치.flex - 아이템들을 1차원 적으로 배치.grid - 2차원 적 배치.물론 wrap 을 사용하면 flex 에서도 줄바꿈 가능.grid grid 도 flex 처럼 부모 Container에 grid 라고 지정해줘야 한다.이렇게 지정해주면 자식 요소들은 grid cell 로 변하게 됨.부모 Container 인 Grid 에 지정해 줄 수 있는 속성grid-template-columns가로 축으로 총 몇 개의 column 이 들어갈 수 있는 지,각각 column의 사이즈는 얼마인 지 지정해줄 수 있음.grid-template-rows세로로 몇 개의 row 가 있는 지, 사이즈가 어떻게 되는 지 지정해줄 .. 2024. 5. 8. 리액트 환경에서 동적인 UI 만드는 법 (모달창 만들기) 보호되어 있는 글 입니다. 2024. 5. 7. CSS Flexbox 완전 정리 CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript (youtube.com)float텍스트와 이미지 배치Flex박스(콘테이너) 에 적용되는 속성아이템들에 적용되는 속성 존재박스 적용 속성아이템 적용 속성Flex 박스에는 중심축과 반대축 존재 왼쪽에서 오른쪽으로 정렬되는 거 확인수평축 - 메인축(중심축)수직축 - 반대축수직축 - 메인축수평 - 반대축실습하기JS Bin - Collaborative JavaScript Debugging JS BinSample of the bin:jsbin.comitem 마다 고유의 번호를 의미 = item$$ = 지정번호*10 = 10번 반복하기Container(박스) 에 속성 부여display: .. 2024. 5. 6. [SASS] & 의 사용법 &의 역할&는 부모 선택자를 참조하는 특수한 키워드&를 사용하면 현재 규칙의 부모 선택자를 참조&:last-child.parent { color: blue; &:last-child { color: red; }}&:last-child는 부모 요소의 마지막 자식 요소를 선택하는 CSS 의사 클래스입니다.&:last-child 는 .parent:last-child 로 해석&:last-child의 역할.background { display: flex; justify-content: space-between; width: 100%; height: 100vh; position: absolute; padding: 0 1rem; span { display: block; h.. 2024. 5. 5. 이전 1 ··· 36 37 38 39 40 41 42 ··· 89 다음 728x90
