WEB개발/PUBLISHING (5) 썸네일형 리스트형 display flex, grid grid속성설명예시`display: grid`그리드 컨테이너를 설정.container { display: grid; }`grid-template-columns`그리드의 열 크기 정의.container { grid-template-columns: 100px 200px; }`grid-template-rows`그리드의 행 크기 정의.container { grid-template-rows: 100px 200px; }`grid-template-areas`그리드 항목의 배치 구조를 시각적으로 정의.container { grid-template-areas: "header header" "main sidebar"; }`grid-column-gap`열 간의 간격을 설정.container { grid-column-gap:.. Animation (transition, transform, keyframes) 기본적인 의사 클래스 이벤트 :hover 사용자가 요소 위에 마우스를 올렸을 때 스타일을 변경할 때 사용합니다.일반적으로 버튼, 링크 등의 강조 효과에 많이 사용됩니다. :focus 사용자가 요소를 포커스(클릭하거나 키보드 Tab으로 이동)했을 때 적용됩니다.주로 input, textarea 같은 폼 요소에 사용됩니다. :active 사용자가 요소를 클릭하고 있는 동안 적용됩니다.버튼을 클릭할 때 눌리는 효과를 만들 때 유용합니다. :target :target은 URL의 해시(#id)가 해당 요소를 가리킬 때 적용됨.주로 앵커링(페이지 내 이동)과 모달/토글 효과 등에 활용됨. :focus-visible :focus와 유사하지만, 키보드로 포커스할 때만 적용됩니다.마우스로 클릭하면 :focus-visib.. font-face, line-height, letter-spacing 1. font-facehttps://fonts.google.com/ Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com에서 web폰트 다운로드 적용 디렉토리 예시📁 /public/fonts/NotoSansKR/ ├─ 1️⃣ NotoSansKR-Regular.woff2 └─ 🆑 NotoSansKR-Regular.woff css@font-face { font-family: 'NotoSansKR'; src: url('/fonts/NotoSansKR/NotoSansKR-Regular.woff2') format('woff2'), url('/.. position : 기본 값은 static이며 top, left, bottom, right 속성값은 무시됩니다. 1. absolute 가장 가까운 relative, absolute, fixed 부모 요소를 기준으로 위치함.만약 그런 부모가 없으면 기준.문서 흐름에서 제거됨 → 공간 차지 안 함 2. fixed 브라우저 창(Viewport) 을 기준으로 위치.스크롤해도 항상 같은 위치에 고정됨.문서 흐름에서 제거됨. 3. relative 자기 자신이 원래 있던 자리(문서 흐름) 를 기준으로 위치를 이동.이동해도 자기 자리(공간) 는 그대로 유지됨.주로 내부 absolute 요소의 기준점으로 사용됨. position : rel.. CSS, SCSS 선택자 1. CSS기본선택자설명예제`*`모든 요소 선택`* { margin : 0;}``tag`특정 태그 선택`p { margin : 0;}``.class`특정 클래스 선택`.box { margin : 0;}``id`특정 ID 선택`#header { margin : 0;}` 속성선택자선택자설명예제`[attr]`특정 속성이 있는 요소 선택`[disabled] {opacity : 0.5;}``[attr="value"]`특정 값을 가진 속성 선택`[type=input] {color : red;}`` [attr*="value"] `특정 값을 포함하는 속성 선택`[class*="btn"] { padding :5px;}`` [attr$="value"] `특정 값으로 시작하는 속성 선택`[src$=".png"] { bor.. 이전 1 다음
