728x90 반응형 > 포트폴리오/맥도날드9 [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. [JS] 캐러셀 만들기 (4개 사진)* 캐러셀 만들기 (사진4개) - 버튼 클릭으로 이동 HTML CSS /* 캐러셀 */ .container { /* max-width: 1200px; */ width: 100%; /* height: 200px; */ /* padding: 0 20px 0 20px; */ } .slide-container { width: 400vw; overflow: hidden; justify-content: center; } .slide-box { width: 100vw; float: left; /* 왼쪽으로 치우치게 해준다. */ text-align: center; padding: 0 20px; /* border-radius: 5vw; */ } .slide-box img { /* 사진 조금 잘리는 걸 아래의 코드로 해결... 2024. 3. 26. [JS / CSS] 햄버거 언더 메뉴바 만들기 (2) CSS 완성 후 할일 ☆ CSS 작성완료 후 숨겨놨다가 - 숨겨둔 모달을 보여주는 클래스 하나 생성 - 또는 버튼 클릭하면 숨겨둔 모달 보이게 하기. ☆ JS 를 통해서 햄버거모양을 누르면 보이게 해야함. 1) CSS 로 언더바메뉴 숨겨놓기 .under-menu { background-color: #fccf4b; display: none; } 2) 숨겨둔 모달 보여주는 클래스 생성 .show-under { display: block; } 3) 클래스를 떼었다 붙이는 토글 기능을 사용해서 자바스크립트로 작성. document.getElementById("menu-icon").addEventListener("click", function () { document .getElementsByClassName(.. 2024. 3. 26. [HTML / CSS] 햄버거 언더 메뉴바 만들기 (1) 언더 메뉴바 디자인 햄버거 버튼 누르면 아래로 내려오는 메뉴바 만들기. 돋보기하고 햄버거 클릭돼야 함. 기존 메뉴바 HTML 변경 대충 짜놨던 html 코드를 바꿔주기. ( 클릭 되게 ) MENU STORE WHAT'S NEW STORY 아이디 추가해줌. .search-icon .menu-icon 기존 메뉴바 CSS /* 써치하고 메뉴 아이콘 포인터 부여. */ .search-icon, .menu-icon { cursor: pointer; } 그리고 CSS 추가. - 눌러지는 듯한 손가락 효과. /*--- 우측 메뉴바 navbar 꾸미기 */ .navbar li { /* 옆으로 나열 */ display: inline-block; /* 가로 배열을 위해 inline 사용 */ margin-right: 33.. 2024. 3. 26. [CSS] li 태그 - 가로 정렬, 밑줄 제거 display: inline-block; 기본적으로 display:block; 돼있는 걸 바꿔줌. 밑줄 제거 text-decoration: none; 2024. 3. 24. [CSS] 화면 늘리면 이미지 커질 때, 이미지 사이즈 설정 .slide-box img { /* width: 100%; */ max-width: 820px; /* padding: 20px; */ height: auto; border-radius: 2vw; /* 뷰포트 너비에 따라 둥근 모서리 크기 조정 */ display: block; margin: auto; /* text-align: center; */ /* height: auto; 이미지가 세로로 늘어나지 않도록 추가 */ } max-width: 820px; 를 줬더니 화면은 늘려도 이미지가 엄청 크게 늘어나지 않음. .slide-box img { /* 사진 조금 잘리는 걸 아래의 코드로 해결.*/ width: 100%; max-width: 920px; height: auto; border-radius: 20.. 2024. 3. 24. border-radius 화면 축소 시 변형이 올 때 화면 축소 전 화면 축소 후 radius 값이 더 커져 보임 . .slide-box img { width: 90%; height: auto; border-radius: 15px; display: block; margin: auto; } 이렇게 줬던 코드를 .slide-box img { width: 90%; height: auto; border-radius: 2vw; /* 뷰포트 너비에 따라 둥근 모서리 크기 조정 */ display: block; margin: auto; } /*모서리의 둥글기가 상대적으로 일정하게 유지*/ 2vw 를 사용함으로써 화면을 축소해도 동일한 둥글기를 유지하게끔 만듦. User /* @media screen and (max-width: 1200px) { .box { font-s.. 2024. 3. 19. 반응형 웹페이지 축소 - 모바일 사이즈 display: none @media screen and (max-width: 768px) { .wrapper { min-width: 200px; } .navbar li { display: none; } } 이걸로 수정. .navbar li { display: none; } 이걸 쓰고 그냥 깔끔하게 처리했다. 이걸 쓰지 않았을 경우, 이렇게 지저분하게 남음. 폰트 줄이면 폰트가 작아서 안보임 MENU STORE WHAT'S NEW STORY html 을 이렇게 짜 놔서 li 를 숨기는 쪽으로 했다. 2024. 3. 19. 반응형 웹사이트 만들기 - max-width / min-width 하단에 설명 있음. .wrapper { min-width: 1440px; } 처음 전체 창 크기 설정만 함. 창을 줄일 수록 오른쪽이 잘림. .wrapper { min-width: 1440px; } 이렇게 고쳐봤는데 이거보단, .wrapper { width: 100%; } 이렇게 수정해주고, css하단에 @media screen and (max-width: 1200px) { .wrapper { min-width: 100%; } .navbar a { font-size: 16px; } } @media screen and (max-width: 570px) { .wrapper { min-width: 100%; } .navbar a { font-size: 10px; } } 이거 추가 해줌. 그리고 추 후에, @m.. 2024. 3. 19. 이전 1 다음 728x90 반응형
