분류 전체보기114 [HTML/CSS] 경로설정 오류 Refused to apply style from~is not a supported stylesheet MIME type, and strict MIME checking is enabled. 계속 CSS가 적용이 안 되어 크롬 개발자도구로 디버깅 해봤는데 다음과 같은 오류가 나왔다. Refused to apply style from 'http://127.0.0.1:5500/sass_hw/hw1.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. 이는 경로 설정이 잘못된 것으로 html파일의 이 부분에서 html이 css를 찾을 수 없는 경우이다. 보니까 html이 다른 파일 안에 있었다. 따라서 같은 폴더로 옮긴후에 원활히 작동되었다. 2023. 12. 13. Bootstarp Grid 레이아웃 (row와 col) [Bootstrap v5.1] ✅ 반응형 레이아웃 만들 때 빨라서 부트스트랩 사용하는 것!! 미디어 쿼리 등 필요 없다. ⭐ row : 내부를 12칸으로 쪼개주는 class명 ⭐ col : 행 쪼개기 정확히 쪼개고 싶으면 col-4 (정확히 4등분)과같이 하기. ⭐ col 이용해 가로로 쪼갠걸 반응형으로? 조건문 더하기 md사이즈 : 768px 등 ⭐ PC사이즈에선 가로로 3열 모바일에선 가로로 1열 ? ▶ 더 많은 예시는 Bootstrap 홈페이지의 Layout 메뉴에 있다. ⭐ order-first를 이용해 순서 재배치도 가능하다. [결과 화면] [HTML] Card title Some quick example text to build on the card title and make up the bu.. 2023. 12. 12. [Italiano] Today's Duolingo 2023. 11. 29. [Español] Today's Duolingo 2023. 11. 29. [HTML, CSS 실습] 반응형 레이아웃 만들기 - 쇼핑몰 레이아웃 [태블릿 사이즈 결과 화면] [모바일 사이즈 결과 화면] [CSS] div { /* width가 padding, border포함하게 하기 */ box-sizing: border-box; } body { margin: 0px; } .main-background { width: 100vw; height: 100vh; background-image: url(../versailles.jpg); background-size: cover; background-repeat: no-repeat; padding: 1px; } .main-title { color: white; font-size: 40px; font-family: 'Times New Roman'; margin-top: 40px; margin-right: 2.. 2023. 11. 19. [HTML, CSS] 반응형 레이아웃 만들기 (media query 문법) 📌 media query 문법을 이용해 반응형 레이아웃을 만든다. - break point를 설정한다. 1. ✅ 반응형 사이트 만들려면 head에 밑에 내용 복붙 필요 2. ✅ media query 문법 @media screen and (최대폭 설정하기) 현재 브라우저 폭이 설정한 최대폭 이하면 밑에 코드 적용하기 class 몇 개 적든 상관없음 - 여러개 사용 가능 ➡️ 스타일 중복이 생기면 밑에있는걸 우선적으로 적용함 보통 큰사이즈→작은사이즈 순으로 작성 breakpoint 기준 px값은 다른 사람 따라하는걸 권장. 1200px 992px 768px 576px breakpoint 너무 많이는 X @media screen and (max-width: 576px) { .main-title { font-s.. 2023. 11. 19. 이전 1 2 3 4 5 6 7 8 ··· 19 다음
