728x90 반응형 > 포트폴리오/wiggle wiggle7 [SASS] aside 메뉴 만들기 ( position 사용 ) 디폴트 값 position: fixed; top: 0; /* 최상단에 위치하도록 설정 */ left: 0; /* 왼쪽에 위치하도록 설정 */top: 0과 left: 0을 추가하여 항상 화면의 최상단에 고정되도록 합니다= 위치를 지정해줘야함. position: fixed로 고정하는 이유position: fixed;를 사용하면 요소가 뷰포트(화면)의 상단을 기준으로 고정됨.position: relative로 하면 왜 상단고정이 안되는 이유 position: relative;로 설정하면,요소는 자신의 원래 위치를 기준으로 상대적으로 위치가 조정됨. 따라서 top: 0;을 사용하면 원래 위치에서 상단에 고정되지 않고 그 자리에서 이동. 2024. 6. 23. [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. [SASS] 상단 바 만들기 HTML 🌸카카오톡 채널 추가 시 3천원 쿠폰 즉시 발급🌸 전체 감싸는 div = wrapper header 안에 들어 갈 것div .banner-top ( 문구 ) 뿐만 아니라 X 버튼 div 도 추가해줄 예정.SASS@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;}가운데 정렬을 하기 위해서text-align: cent.. 2024. 6. 18. [CSS] 메뉴 바 만들기 (1) - 이미지 사이즈와 맞추기, 이미지 여백 없애기 HTML 카카오톡 채널 추가 시 3천원 쿠폰 즉시 발급 o .container 로 로고 2개와 / 햄버거 메뉴 / 이미지들을 묶었다. CSS /* CSS Reset - 기본 설정 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* header */ .banner-top { background-color: #f5e44f; width: 100%; padding: 11px; height: 40px; display: flex; align-items: center; /* 세로 중앙 정렬 추가 */ justify-content: center; /* 가로 좌우 정렬 */ } .banner-top a { text-decoration: none; font-size: .. 2024. 4. 16. [CSS] 로고 위치 조정하기 - position 으로 띄우기 HTML div 3개 준비 = Flex 사용하기 때문 CSS /* container - 콘텐트 시작*/ .logo { display: flex; position: fixed; padding: 27px; width: 100%; } .wiggle img { width: 175px; height: 84px; } .menu img { width: 88px; height: 60px; } /* 세로 중앙정렬 추가 */ .menu { display: flex; align-items: center; } .wiggle { display: flex; align-items: center; } align-content: space-around; 이거 .logo 에 추가하려했으나 flex-grow:1 를 사용해서 굳이 필요없어.. 2024. 4. 16. [CSS] 상단 바 만들기 맨 위 상단바 제작 HTML 카카오톡 채널 추가 시 3천원 쿠폰 즉시 발급 반응형으로 만들 거기 때문에 이거 헤드 부분에 넣어줬다. CSS /* CSS Reset - 기본 설정 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* header */ .banner-top { background-color: #f5e44f; width: 100%; padding: 40px; height: 40px; display: flex; align-items: center; /* 세로 중앙 정렬 추가 */ justify-content: center; /* 가로 좌우 정렬 */ } .banner-top a { text-decoration: none; font-size: 1.. 2024. 4. 16. 이전 1 다음 728x90 반응형
