본문 바로가기
반응형

css trick & base46

boostrap5 col Bootstrap의 반응형 그리드 시스템col-xxl-8: xxl는 "extra extra large"를 의미하며, 매우 큰 화면(최소 1400px 이상)에서 요소가 그리드의 12열 중 8열을 차지하도록 지정합니다.col-lg-8: lg는 "large"를 의미하며, 큰 화면(최소 992px 이상)에서 요소가 그리드의 12열 중 8열을 차지하도록 지정합니다.이 두 클래스를 함께 사용하면 화면의 크기에 따라 다른 스타일을 적용할 수 있습니다. 예를 들어:화면 크기가 992px 이상이고 1400px 미만인 경우, col-lg-8이 적용되어 요소는 8열의 너비를 가집니다.화면 크기가 1400px 이상인 경우, col-xxl-8이 적용되어 요소는 여전히 8열의 너비를 유지합니다. 2024. 11. 2.
vscode extention 확장프로그램 #1. 기본프로그램Auto Rename Tag  (여는태그 닫는태그 맞추기)Html to css autocompletion (html에서 만든 클래스 있으면 css입력시 자동으로 그 클래스 가져오기)indent-rainbow (들여쓰기 레인보우)live server (라이브서버)prettier - code formatter  (코드이쁘게 정리)css peek (html에서 클래스 클릭하면 해당 css로 파일로 이동)svg (svg미리보기)  #2. 사스live sass compilersass  #3. 걸프 gulp tasks  #4. 깃git graphgitLens=========================================== 사스 환경설정(세팅>settings.json)   걸프 환경설정 2024. 10. 26.
스켈레톤 skeleton Skeleton | Components | BootstrapVue 2024. 10. 25.
커서 색상 변경 커서색상 변경/* Keyword values */ caret-color: auto; caret-color: transparent;    /* ios에도 적용가능 */caret-color: currentcolor; /*  values */ caret-color: red; caret-color: #5729e9; caret-color: rgb(0 200 0); caret-color: hsl(228deg 4% 24% / 80%); 캐럿색상 caret-color CSS 속성은 입력한 다음 문자가 삽입될 위치에 표시되는 마커인 삽입 캐럿의 색상을 설정합니다. 이를 텍스트 입력 커서라고도 합니다. 캐럿은 과 같은 요소 또는 contenteditable 속성이 있는 요소에 나타납니다. 캐럿은 일반적으로 더 눈에 띄게 .. 2024. 10. 25.
모바일 주소영역 색깔 meta name="theme-color" content="#081c31">  주소, 상단영역에 색깔 줄수있음  https://yeoulmok.imweb.me/ 여울목펜션가평군 여울목펜션입니다.yeoulmok.imweb.me 테일윈드로 만들어짐 https://stackoverflow.com/questions/26960703/how-can-i-change-the-color-of-header-bar-and-address-bar-in-the-newest-chrome-ve 2024. 10. 8.
하단 네비게이션 fixed 커리어 홈 - 사람인 (saramin.co.kr) 커리어 홈 - 사람인커리어를 위한 모든 것 | 커뮤니티, 현직자 1:1 멘토링 매치, 커리어 진단, 직무별 맞춤 클래스, 취업 정보 공간 카페인까지 커리어에 필요한 모든 것을 한 곳에서 만나보세요!m.saramin.co.kr 부모에 padding-bottom 없이 영역의 길이가 유동적이지 않을때 고정형으로 쓸 수 있다 부모 => 영역을 가진다 .wrap_bottom_menu {     position: relative;     width: 100%;     height: 56px; } 자식 .wrap_bottom_menu .inner {     position: fixed;     bottom: 0;     z-index: 700;     width: 1.. 2024. 10. 3.
반응형