TechScribe Notes

방법 1: 수동으로 만들기프로젝트 폴더(예: my_project)로 이동.vscode 폴더를 직접 생성Windows: 파일 탐색기 → 마우스 우클릭 → 새 폴더 → 이름을 .vscode로 변경Mac/Linux: 터미널에서 실행mkdir .vscode방법 2: VS Code에서 자동 생성VS Code에서 프로젝트 폴더 열기Ctrl + Shift + P (Mac은 Cmd + Shift + P) 누르고 "Preferences: Open Workspace Settings (JSON)" 검색 후 선택설정을 변경하고 저장하면 .vscode/settings.json 파일이 자동으로 생성됨방법 3: 확장 기능 설치 후 자동 생성ESLint, Prettier 같은 확장 기능을 설치하고 설정을 변경하면 .vscode 폴더..

이전에 앵커 클릭시 스크롤 이동되는 기능을 하려면 jquery로 짜고는 했는데,아주 간단한 경우에는 css로도 해결이 가능! Scroll-behavior를 스크롤이 되어야할 영역 전체를 감싼 요소에 사용하면 스크롤이 작동할 때 조금 더 부드럽게 애니메이션이 적용된 것 처럼 가능함.scorll-behavior : auto ; //기본값scroll-behavior : smooth; // 부드럽게 스크롤 이동  1. 예시[HTML] 1 2 3 1 2 3 [CSS]a { display: inline-block; width: 50px; text-decoration: none;}nav,.scroll-container { display: block; margin: 0 auto; text-ali..

CSS방법론: CSS를 더 효율적으로 구성하기 위한 방법론. CSS에서의 클래스 네이밍 컨벤션.-> 원활한 유지보수, 코드의 재사용성, 클래스 이름으로도 유추 가능함, 확장 가능성. 1.OOCSS: CSS를 모듈 방식으로 작성하여 중복을 줄이는 방식-공통적인 부분을 추출하고 각 고유한 스타일을 지정해 사용함-스트럭쳐와 스킨 분리 / 컨테이너와 컨텐츠 분리- 중복 최소화, 코드의 재사용성이 높음-가독성이 떨어지고 코드가 길어진다.-부트 스트랩, 테일윈드 2.SMACSS :  CSS코드를 역할에 따라 분류 (베이스, 레이아웃, 모듈, 스테이트, 테마)-공통된 부분을 정의하여 재사용 가능-구조적 상황 상관없이 클래스로 스타일 구분-공통 클래스가 많아지면 유지보수가 어렵고 가독성 떨어짐. 3.BEM(Block,..

퍼블 하면서 종종 겪은 문제인데 적당히 바쁘다는 핑계로 흐린눈 하고 지나가던 지난 날들.. 이 참에 블로그 작성 과제에 흥미로운 주제가 있어서 작성해본다. Margin은 요소 사이에 간격을 주고 싶을 때 쓴다. 그래서 적절한 마진 값을 주면 알아서 잘 떨어질 거라고 생각하지만 잘 적용되지 않는 경우가 있다. 이럴 때는 우선 block이나 inline요소인지 확인하고 display를 block요소로 바꿔주면 해결! 될 때도 있지만 가장 애매모호하고 알 수 없는 문제는.. 분명 margin값이 잘 안들어갈 이유가 없어보이는데도 원하는 양만큼 적용이 안되어 있을 때... 마진 겹침 현상(margin collapsing) 그래서 이 마진 겹침 현상은 요소사이에 margin-top나 margin-bottom이 겹..

💡sticky는 fixed와 비슷하지만 조건부로 고정이 된다. -fixed: 항상 화면에 고정이 되는 요소에 사용 -sticky: 스크롤이 되어서 이 요소가 화면에 나오면 고정된다. 그리고 부모박스를 넘어서서 스크롤이 되면 사라진다. ⭐주의할 점 1.스크롤 할만한 부모박스가 있어야 함. 2.top등과 같은 좌표속성이 있어야 제대로 보임

종류 설명 em 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준으로 비율값을 지정한다. 1em = 10px rem 문서 시작부분(html)에서 지정한 크기를 기준으로 비율값 지정 ex 해당 글꼴의 소문자 x의 높이를 기준으로 비율값을 지정함. px 모니터의 1픽셀 기준으로 비율값 지정 pt 폰트 글꼴 지정시에 많이 사용. vw 뷰포트 가로 너비의 백분율 1vw=전체 화면 너비의 100분의1 vh 뷰포트 세로 너비의 백분율 1vw=전체 화면 너비의 100분의1