JudithHopps JudithHopps

브라우저 콘솔창 설정 개발자 도구 열기 윈도우: Ctrl + Shift + i 맥: command + option + i\ 콘솔 설정 👈 위치 왼쪽으로 이동 콘솔 Console 탭 열기 콘솔 비우기: Ctrl + L - 윈도우, 맥 모두 윈도우 한정 - 브라우저 스크롤바 엣지 주소창에 edge://flags 입력하여 접속 scrollbar 검색 Window style overlay scrollbars 찾아 Enabled로 변경 크롬 주소창에 chrome://flags 입력하여 접속 scrollbar 검색 Overlay scrollbars 찾아 Enabled로 변경 탭 사이즈 && 자동 줄바꿈 설정 VS Code 설정 창 열기 윈도우: Ctrl + , 맥: Command + , Tab Size 항목 2로 ..

1. contact a. radio 버튼 구현 .contact__tab { display: flex; flex-wrap: wrap; justify-content: center; font-size: var(--font-size-larger); } /* 라디오 버튼 커스터마이즈 */ input[type="radio"] { all: unset; display: inline-block; padding: 0.8em 4em; background-color: white; cursor: pointer; } input[type="radio"]:checked { color: white; background-color: var(--color-main); } #ct_1 { border-radius: 12px 0 0 12px;..

1. HTML & CSS 섹션 1. 초록색 체크 표시 /* 초록색 체크표시 */ .html-css__spec dd::before { content: ""; display: inline-block; margin-right: 0.4em; width: 12px; height: 6px; border-left: 4px solid var(--color-sub); border-bottom: 4px solid var(--color-sub); vertical-align: 0.2em; transform: rotate(-45deg); } 2. 로고 아래 그림자 .html-css__thumb { position: relative; } /* 로고 아래 그림자 */ .html-css__thumb::after { content: ..

1. main /* 데스크탑 */ @media (min-width: 769px) { main { display: grid; grid-template-columns: 1fr 1fr; } } .section { padding: 64px 16px; text-align: center; } .section__tag { font-size: var(--font-size-tag); color: var(--color-sub); } .section__title { font-size: var(--font-size-title); font-weight: bold; color: var(--color-text); } 2. about a.모바일 화면 /* 미디어 */ @media (max-width: 768px) { .about {..

1. header 상단 고정 header { display: flex; /* 위에 붙도록 */ position: sticky; /* 스크롤업되는 컨텐츠 위로 올라오도록 */ z-index: 2; top: 0; height: var(--height-toolbar); justify-content: space-between; align-items: center; background-color: var(--color-main); color: white; } 2. 데스크탑 메뉴바 a. 메뉴 나열 .header__nav-item { display: inline-block; position: relative; } .header__nav-item:last-child { margin-right: 1.6em; } .hea..

1. CSS 초기 설정 root 스타일 시트에 웹폰트, 기본 변수 설정 및 다른 스타일 시트를 import 한다. 2. CSS 인트로 배경 설정 a. 모바일 @media (max-width: 768px) { .intro { height: 100vh; } } b. 데스크탑 /* 데스크탑 */ @media (min-width: 769px) { .intro { height: 500px; } } c. dark 버전 .intro__dark { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; background-color: rgba(0, 0, 0, 0.5); } ==> dark로 할 부분을 따로 구역을 나눌 것 (opacit..

유명 프론트엔드 프레임워크들 👉 Bootstrap 👉 UIkit 👉 Materialize 👉 Bulma 🤔 프론트엔드 프레임워크를 쓰는 것이 좋을까요? 장점: 디자인 과정 없이 유려한 요소들을 빠르게 이용 가능 단점: 무거워지는 사이트, 커스터마이징시 복잡해짐 결론: 디자이너 부재시, 대형 프로젝트가 아닐 시 적합 아이콘 라이브러리 👉 Font Awesome 👉 Google Fonts Icons

clip 속성은 요소의 어느 부분이 시각적으로 보이도록 할지를 지정합니다. rect 함수 안에 top, right, bottom, left 값을 순서대로 넣어 위치와 크기를 조절합니다. position이 absolute 또는 fixed로 되어 있어야 작동합니다. clip은 sr-only 등에서 요소를 감출 때 사용됩니다. 그러나 요소를 잘라내는 용도 자체로는 더 새로운 속성인 clip-path가 보다 유용합니다. clip-path는 position 값에 상관없이 사용될 수 있습니다. clip 속성은 deprecated되었으므로 이후로는 사용하지 않는 것이 좋습니다. 웹 표준에서 탈락되었으므로 향후 지원되지 않을 수 있습니다. scroll-snap 관련 속성 scroll-snap-type 부모 요소에 스크..