공부기록용

❓script의 권장되는 위치는 하단이라는 것을 처음에 배워서 인식은 하고 있지만 다른 위치에서 사용했을 때 올바르게 사용하는 방법도 알고 싶었다.1. "DOMContentLoaded" 이벤트는 HTML 문서의 모든 DOM 요소가 완전히 로드되고 파싱되었을 때 발생하는 이벤트로 즉, 스타일시트, 이미지 및 하위 프레임 로드가 완료되기 전에 발생시킨다.   ➕defer, async➕ 외부에서 script를 작성하고 head안에서 연결을 해줄 때 사용하는 속성인데, 개인적으로 이 속성들을 사용했을 때 이유는 정확하지 않지만 원하는 순서로 작동하지 않았던 기억들이 많아서 사용하지는 않는 방법이라 좀 더 공부가 되야 할 듯 한 부분이다.2. 제일 하단 요소를 먼저 다 읽은 후 작동되도록 가장 하단에 작..

@extend기존의 스타일을 상속하고자 하는 경우에 사용한다.@extend 선택자; Initial button --> order add chcekout /* style.scss *//* Google Web Font - "Montserrat", sans-serif*/@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap");*{ font-family: "Montserrat", sans-serif;}body{ display: grid; justify-content: center; align-items: center; height: 100vh;}...

@mixin재사용할 그룹을 선언(정의 및 지정)/* SCSS 선언 방식 */@mixin 믹스인 이름 { 재사용할 스타일 속성들}/* Sass 선언 방식(주로 SCSS를 사용하니 참고만) */= 믹스인 이름 { 재사용할 스타일 속성들} @include정의된 @mixin을 사용(포함)/* SCSS 사용 방식*/선택자 { @include 믹스인 지정 이름}/* Sass 사용 방식*/선택자 { + 믹스인 지정 이름}@mixin과 @include 사용 codingworks publishing class new letter broadcast /* .scss *//* Google Web Font - "Montserrat", sans-serif*/@import url("https://fonts...

At-rule란,At-rule는 css에 동작 방법을 지시하는 CSS문이다.at 기호 @로 시작하고 그 뒤에 식별자가 오고 다음 세미콜론 또는 다음 css 블록 중 먼저 오는 것까지의 모든 항목을 포함한다.ex. @media / @font-face / @keyframes  Sass에는 일반적인 CSS at-규칙에 대한 몇 가지 동작이 추가된다. 보간법을 포함할 수 있고 스타일 규칙에 중첩될 수 있다. @media및 같은 일부 기능은 보간 @supports없이 규칙 자체에서 SassScript를 직접 사용할 수도 있다. @import @import CSS @규칙은 다른 스타일 시트에서 스타일 규칙을 가져올 때 쓰인다. 이 규칙은 @charset 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 한다 CS..

Sass(SCSS)의 주석기본적으로 CSS의 주석와 동일한 /* */구문을 사용하며 추가로 한 줄을 위한 // 주석처리도 가능하다. 단 한 줄 주석은 .css로 컴파일되면 보이지 않는다..scss/*여러 줄을 동시에*/// 한 줄만 주석처리> 하지만 빌드된 css에서는 한 줄 주석을 처리되지 않으니 주의해야 함중첩 규칙(nesting)CSS에서는 스타일을 정의하기 위해서 선택자를 서로 다른 선언문에서 반복해서 작성해주어야 하는 경우가 많다. /* div의 반복 */div{ width: 100%;}div p{ color: red;}div p span{ color: blue;} Sass에서는 선택자를 서로 다른 선언문에서 계속 반복해서 작성하지 않고 서로 중첩하여 사용할 수 있다.>..

Sass 구문으로 작성된 코드는 Sass전처리기와 컴파일러의 도움을 받아야 CSS파일로 빌드(build)되어야 사용할 수 있다. PC에서 Sass를 CSS로 빌드할 수 있는 도구가 준비되어야 한다.1. VS code확장 기능 이용하기vs code의 확장 프로그램을 설치해서 사용하는 방법이다 html을 만들고 style 폴더를 생성후 .scss로 파일을 생성한다. scss에 스타일을 작성하고  하단에 위치한 Watch Sass를 눌러주면 CSS파일로 변환을 해준다. 그럼 작성한 SCSS를 CSS로 변환한 CSS 파일도 생성된다. 코드를 변경할때는 SCSS의 코드를 변경하면 CSS는 자동으로 build되어 반영되므로 수정시 SCSS를 수정하는 것이 좋다.기존 dart Sass와 Ruby Sass가 있었는데 ..