: ) Web41 [Sass] @mixin 문법 사용 방법 ▶ 기본적으로 @extend와 비슷하나 @mixin을 이용하면 특정 요소만 바꿀 수 있다. 1. .scss파일에서 @mixin을 이용해 원하는 이름으로 작명하여 공통 코드를 작성한다. @mixin 작명() { 공통 코드 } ▶ 여기서 () 안에 특정한 요소를 $로 지정하면 나중에 코드에 넣을 때 $부분을 다르게 줄 수 있다. @mixin 색깔($버튼색깔){ background-color: $버튼색깔; } 2. @include을 이용해 1에서 만든 것을 이용하여 공통 코드 부분을 넣어준다. @inlcude 작명(); @include 색깔($초록); ▶ $는 여러개 사용가능하고 왼쪽에 넣을 수도 있다. 2023. 12. 13. [Sass] @extend 문법 사용 방법 1. .scss파일에서 공통으로 작성할 코드를 임시클래스로 작성한다. %임시클래스명 { 공통 코드 작성 } %btn { margin: 5px; padding: 5px; border: 2px solid black; border-radius: 10px; color: black; } 2. extend 문법을 이용하여 공통 코드 넣기 @extends 임시클래스명; .red-btn { @extend %btn; background-color: red; } .blue-btn { @extend %btn; background-color: blue; } .yellow-btn { @extend %btn; background-color: yellow; } ▶ 임시클래스는 단독으로 컴파일 되지 않는다. ▶ @extend 뒤에 .. 2023. 12. 13. [Sass 실습1] [Nesting 문법] Sass를 이용해 리스트 만들기 Q. 리스트 만들기 , 태그 등을 이용해 위 사진에 나온 리스트의 HTML과 CSS를 디자인해보세요. (조건1) 태그에 .active라는 클래스가 부여되면 배경이 저렇게 파란색으로 변해야합니다., 마우스를 올려놓으면 빨간색 배경으 (조건2) 셀렉터를 길게 나열하지 않고 Nesting 문법을 이용합니다. [결과화면] [마우스 올렸을 때] [HTML] tomo cerveza con Messi para vivir felizmente soy de Corea feliz navidad [SCSS] ul { li { list-style-type: none; padding: 10px; border: 1px solid gray; } .active { background-color: skyblue; color: white.. 2023. 12. 13. [HTML/CSS] 크롬 개발자 도구를 이용한 오류 수정 / 알 수 없는 Padding 제거 가끔 padding, maring을 전혀 안 건드렸음에도 다음과 같이 왼쪽은 많이 남고 오른쪽은 조금 남는 등 안 맞는 경우가 자주 있다. 크롬으로 연 후에 f12키를 눌러 크롬 개발자 도구를 켜서 이를 해결할 수 있다. 개발자 도구를 켠 후 다음과 같이 어디에서 왼쪽 여백이 발생하는지 찾아본다. 보니까 ul에서 paddinf-inline-start로 40px만큼의 패딩이 들어가 있었다. 한눈에 보기 쉽게 이미지로 확인할 수도 있다. 따라서 ul에 padding을 0으로 주었더니 해결됐다. [완성] [HTML] tomo cerveza con Messi para vivir felizmente soy de Corea feliz navidad [SCSS] ul { li { list-style-type: non.. 2023. 12. 13. [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. 이전 1 2 3 4 5 6 7 다음
