728x90 반응형 flex4 [SASS] 로고와 메뉴바 위치 지정하기 (display:flex) 양 사이드로 각각 배치하기.scss.banner-header { display: flex; align-items: center; position: relative; width: 100%; justify-content: space-between; padding: 27px; .hamburger_menu { width: 80px; // span 태그에 스타일 적용 span { display: block; height: 10px; background-color: $main_color; margin: 15px 0; transition: all 0.3s ease; border-radius: 10px; &:first-child.. 2024. 6. 21. [SASS] 상단 메뉴바 생성과 position 이해 ( X버튼 추가 ) HTML 🌸카카오톡 채널 추가 시 3천원 쿠폰 즉시 발급🌸 X 닫기 버튼인 X 버튼도 추가해줌. ( 나중에 자바스크립트로 닫기 해 줄 버튼 )position: absolute를 사용하여 close 버튼을 배치@use "reset";/* 색상 변수 */$main_color: #f5e44f;$sub_color: #e33258;/* header */.banner-top { background-color: $main_color; width: 100%; padding: 11px; text-align: center; font-size: 12px; display: block; // 나중에 자바스크립트로 건들.. 2024. 6. 19. 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. [CSS] flex 사용해서 상자 나열하기 네모박스 flex 써서 나열하기 HTML 정사각형 6개를 준비해준다. 그리고 flex 는 부모에다가 적용하는 것이므로 부모 태그(square-flex)도 하나 생성해줌. CSS /* 정사각형 */ .square { width: 375px; /* 너비 설정 */ height: 375px; /* 높이 설정 */ border-radius: 32px; /* 모서리 둥글게 처리 */ border: 2px solid #ffbe01; margin: 50px; } .square-flex { display: flex; /* justify-content: space-around; 정사각형들이 화면 전체에 고르게 분포하도록 함 */ justify-content: center; align-items: center; flex-.. 2024. 3. 29. 이전 1 다음 728x90 반응형
