CSS

border-radius: px;border: 굵기 색상;box-shadow: offset-x offset-y blur-radius spread-radius color inset rgb(x,y,z,k);<span style='background-color: &lt

맨날 까먹어서 정리 해놓는다 <img>나 <video> 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정가로세로비를 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절콘텐츠 박스 크기에 맞도록 하면서도 가로

꾸밀 대상, 속성을 줄 대상을 의미\*: 전체 선택자tag: 태그 선택자.class: 클래스 선택자\*\*\`선택자:가상상황: 가상 선택자📌 선택자에는 tag => class => id 순으로 우선순위 적용됨

실제로 html요소를 수정하지 않고 css만으로 가상 요소를 추가해 선택할 수 있다.<span style="background-color:flex-item이 여러개일 때, item들의 줄바꿈을 허용할 것인지 말 것인지 결정 flex-wrap: nowrap(기본값)

기본적으로 CSS는 부모 요소의 속성값을 자식 요소에게 상속한다.<span style="background-color:<span style="background-color:수많은 스타일 요소 중 어떤 스타일을 브라우저에 그릴지 결정해주는 CSS 우선순위 적용

폰트 관련 속성 font-size CSS에서의 Cascading 기준 기준1. 중요도 기준2. 구체성(명시도) 기준3. 선언순서 **기준1.<span style="background-c

화면을 구성하는 가장 기본이 되는 단위px은 웹에서 가장 많이 사용되는 절대 단위이며 흔히 화소라 불립니다.디지털 화면은 수많은 작은 네모들로 구성이 되어있으며, 이 네모 한 칸이 1px입니다.인쇄를 위한 단위pt는 인쇄를 위한 단위이기때문에 웹에서는 잘 사용하지 않습

요소의 배경에 색상을 지정요소의 배경 이미지를 한 개, 혹은 여러개 지정함📍이미지 중첩하기📍그라데이션 배경 만들기요소의 배경 이미지의 위치를 지정요소의 배경 이미지의 반복 여부와 반복 영향을 지정함.요소의 배경 이미지의 크기를 지정함.요소의 배경 이미지의 스크롤 여

문서상 원래 잇어야 하는 위치에 배치됨⛔️ 이때 top, left, bottom, right 속성을 사용할 수 없음.즉, 위치 조정이 불가능한 기본 HTML 요소의 상태원래 있던 자리를 기준 으로 요소의 위치를 조정절대 좌표를 기준으로 요소의 위치를 조정📍relati

css 속성을 이용한 변화의 전, 후 사이에 애니메이션을 추가해서 움직임을 부드럽게 만들어 줄 수 있음어떤 속성(property)에 transition을 적용할 것 인지를 지정함📍생략하면 all이 적용됨transition에 걸리는 시간을 지정함transition의 속

BEM (Block-Element-Modifier) 스타일은 CSS 클래스 네이밍 규칙으로,HTML과 CSS를 구조적으로 깔끔하게 유지하는 데 도움을 줘. BEM은 3가지 개념으로 나뉘어:1\. Block (블록)2\. Element (엘리먼트)3\. Modifier

:hover → 의사 클래스 (Pseudo-class)::placeholder → 의사 요소 (Pseudo-element)의사 클래스는 특정 상태에서 요소 전체에 스타일을 적용할 때 사용🔹 설명: input 요소에 마우스를 올렸을 때 border-color가 파란색으

✅ 부모 요소가 명확한 height 값을 가지고 있다면→ height: 100%이 정상적으로 부모의 높이를 따라감.❌ 부모 요소가 height: auto;이거나 min-height만 설정되어 있다면→ height: 100%이 적용되지 않고, 내용만큼만 높이를 가짐.💡

CSS 미디어쿼리(Media Query)는 웹 페이지가 다양한 디바이스와 화면 크기에 맞게 반응형으로 동작하도록 스타일을 적용하는 방법.즉, 화면의 크기, 해상도, 방향(세로/가로), 디바이스 유형에 따라 다른 CSS 스타일을 적용할 수 있음.예시@media는 미디어

CSS에서 요소에 이동, 회전, 확대/축소, 비틀기 등의 변형 효과를 적용하는 속성애니메이션, 인터랙티브한 UI, 시각적 효과를 만들 때 활용됨1️⃣ translate(x, y) 요소를 X축과 Y축 방향으로 이동 문법: 20px: X축으로 20px 이동25%: Y축

애니메이션(Animation): 연속된 이미지를 빠르게 보여줘서 움직이는 것처럼 보이게 하는 기법CSS에서는 요소에 움직임, 변화 효과를 부여할 수 있음1) transition 속성 활용 특정 이벤트(예: hover, focus) 발생 시 애니메이션 적용 변화 전

의미:폰트가 로드될 때까지 텍스트가 보이지 않는 현상 특징: 텍스트가 아예 보이지 않다가 폰트가 로드되면 갑자기 나타남 사용자는 "글자가 사라졌다가 등장"하는 것처럼 느낌 발생 원인: 웹폰트 로딩 지연 시 발생 브라우저가 폰트 로드 전까지 텍스트를 숨김의미:

Subset Font(서브셋 폰트)는 폰트 파일에서 필요한 문자만 추출하여 만든 폰트 파일을 의미.즉, 모든 글자를 포함한 일반 폰트 대신, 자주 사용하는 문자나 특정 언어만 포함한 경량화된 폰트.파일 크기 감소 → 로딩 속도 향상 전체 폰트보다 훨씬 작은 용량 페

CSS Grid Layout은 웹 페이지를 행(row)과 열(column) 단위의 격자로 배치할 수 있는 강력한 레이아웃 시스템▶️ display: grid; 를 사용하면 요소들을 쉽게 정렬하고 배치할 수 있어! 📌 CSS Grid는 2차원 레이아웃 시스템 Fl