요모조모

🍰 주석: SCSS, Sass 구문 간 주석이 작동하는 방식이 다름. // 컴파일 된 CSS 파일에 출력 X/* 컴파일 된 CSS 파일에 출력 O but 압축 모드에서는 X *//* 이 주석은 인터폴레이션도 포함 O* 9 + 7 = #{9 + 7} *//*! 이 주석은 압축 모드에서도 출력 O */🍰 변수(variables): Sass 가 제공하는 변수 구문은 독자적인 방식으로 웹 브라우저가 해석할 수 없음. 아래 코드는 SCSS 변수. 🍰 중첩 규칙(nested rules): Sass는 HTML과 동일한 시각적 계층 구조를 따르는 방식의 스타일 작성 방법 지원단, 무리한 중첩은 복잡성 증대시켜서 피해야 함.🍰 믹스인(mixins): 재사용할 코드 그룹 선언 가능🍰 인자: 자바스크립트 함수처럼 ..

🍰 설치하기Node.js 설치 완료 후 sass 패키지를 설치한다. 실습에서는 로컬로 설치했다.npm i -D sass-D는 --save-dev의 약자: Sass 패키지를 개발 의존성(devDependency)으로 설치한다는 의미.개발 의존성: 프로젝트의 개발 단계에서만 필요한 패키지 설치. 프로덕션 환경에서는 이 패키지들 필요 없음.목적: 테스트, 빌드, 도구, 린팅, CSS 전처리기 등 개발 중에만 필요한 도구들을 관리 할 때 사용함.-D 사용해서 설치 시 package.json 파일의 devDependencies 항목에 추가됨.=> package.json, dependencies가 뭐지? https://kellyjs.tistory.com/33설치 후 파일 두 개와 폴더가 생김🍰 컴파일 명령어: ..

🍰 package.json: Node.js 프로젝트의 구성 파일. 프로젝트에 대한 메타 데이터, 의존성 정보 포함. 프로젝트 관리, 배포에 중요.주요 구성 요소name(프로젝트 이름)version(프로젝트 버전)description(프로젝트에 대한 간단한 설명)main(진입점 파일)scripts(프로젝트에서 사용할 수 있는 명령어 모음)dependencies(프로덕션 환경에서 필요한 패키지들)devDependencies(개발 환경에서 필요한 패키지들)등등...🍰 dependencies: 프로덕션 환경에서도 필요한 패키지.애플리케이션이 실행되는 동안 필요한 패키지들 나열.서버에서 실행되는 코드, 클라이언트 애플리케이션에서 직접 사용되는 라이브러리 등 포함.설치 명령어: npm install / npm..

🍰 새로운 진도 나간 날!🍴 Node와 NPM(Node Package Manager)Node.js - 자바스크립트를 실행할 수 있는 런타임 환경NPM - 자바스크립트 프로그래밍 환경에서 패키지를 설치하고 관리하는 도구(Node.js 설치 시 같이 다운로드 됨) 🍴 패키지 매니저 종류NPM - 가장 널리 사용됨Yarn - 페이스북이 NPM의 단점 보완하기 위해 개발. 빠른 속도와 안정성 제공.PNPM(Performant NPM) - NPM과 호환되면서 성능 개선함. 디스크 공간 절약, 빠른 설치 속도, 모노레포에 강점. 🍴 package.json은 어떤 파일?Node.js 프로젝트에서 사용되는 메타 데이터와 의존성 정보 담음의존성 정보: 프로젝트가 제대로 작동하기 위해 필요한 외부 라이브러리나 패키..

🍰 테킷 프론트 엔드 스쿨 시작한 지 벌써 4주째. 뭘 했다고...?🍴 배운 것반응형 웹, 그리드, svg 이미지, 스프라이트 이미지, 마스크 이미지, container-query 등등...🍴 아쉬운 점내 복습 속도가 진도를 따라가지 못했다.가끔 수업을 귀로는 듣는 데 머리로는 따라가지 못할 때가 많았다. 약간 멍 비슷한 걸 때릴 때 의식해서 집중하려고 노력했는데 잘 안됐다. 수업 때 하는 실습을 따라가고픈 욕심이 있어서 코드를 치면서 수업을 듣는 데, 선생님과 결과 화면이 다르면 원인 찾다가 수업을 놓칠 때가 굉장히 많았다. 필기를 포기하고 블로그에 매일 TIL 작성하는 것을 그만뒀음에도 복습을 열심히 하지 않았다.그렇게 수업 내용을 다 이해하지 못한 채 과제를 하니까 열 시간 넘게 걸리는 건데...

🍰 저번주 금요일 걸 지금 쓴다...🍴 BFC(block formatting context)주변 블록 배치에 영향을 주는 것들이 BFC를 만듦.(ex. float 사용 시 다음 줄 요소가 밀려나는 것)overflow도 독립적인 블록 형태로 포맷팅 형성🍴 float노멀 플로우를 벗어나서 화면에 뜨게 배치.노멀 플로우: 흘러가는 흐름. inline인지 block인지.🍴 네이밍 방법론BEM(Block Element Modifier)block: 기본 구성 요소. 독립적으로 존재하는 블록.element: 블록 안에서 구체적인 부분. ex. text, iconmodifier: 요소의 상태나 변형 정의. ex. 버튼 색상/크기 변경OOCSS(Object-Oriented CSS)CSS를 객체 지향적으로 접근하는..

🍰 진도 급발진...🍴 아이콘 삽입하기1. web font 사용https://fontawesome.com/start Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.fontawesome.com2. 로 이미지 삽입회원가입 3. background로 삽입🍴 그림자 효과box-shadow값 두 개: offset-x(가로축 수평 거리), offset-y(세로축 수직 거리). 요소 박스로부터 그림자의 거리 지정.값 세 번째: blur-radius - 흐림 효과 지정. 값이 높을 수록 커짐(넓어..

🍰 CSS 진도. 천천히 나가 주세요...🍴 숨김 콘텐츠 - overflow, clip-path: 숨겨 놓지만 스크린 리더와 같은 보조 기기에서는 접근 가능(a11y-hidden같은 class명 추천)display: none은 존재하지 않는 것. DOM 트리 상에도 존재하지 않아서 스크린 리더도 읽지 못함.그럼 언제 사용? => 영구적인 none 이 아닐 때. 특정 조건이 활성화 됐을 때 읽을 수 있는 상태로 만들 때.overflow - 요소의 콘텐츠가 너무 커서 블록 서식 맥락(BFC)에 맞출 수 없을 때의 처리법 지정overflow 속성이 효력 가지려면 block level container의 height 설정하거나 white-space를 nowrap으로 설정visible(기본값)hidden: 콘..

팀 회고 시간에 git에서 공동 작업을 해보자는 얘기가 나와서 오늘 해보았다. 우선 조장님이 저장소를 만들어 와서, 팀원들은 그걸 clone 했다.그리고 내 전용 브랜치를 만들고 이동했다.그러고 push 하는 연습 하려고 main에 했더니 실패했다. 알고 보니 저장소 주인이 권한을 줘야 한다!이메일로 초대 메일 오면 들어간다!그러고 main의 파일들 수정해보고~ merge도 하고~끝

웹 페이지를 만들다 보면 icon을 사용할 일이 많다. 보통 font awesome을 사용하는데, VSCode 내에서 아이콘을 검색하여 사용할 수 있는 방법이 있다.https://marketplace.visualstudio.com/items?itemName=tomasvergara.vscode-fontawesome-gallery Font Awesome Gallery - Visual Studio MarketplaceExtension for Visual Studio Code - VSCode Extension Sidebar Panel with a gallery view of FontAwesome's 5/6 free icons.marketplace.visualstudio.com위 사이트에 들어가서 install ..