폴리프레임

#sec .dot:nth-child(5n + 5) { width:20px; }위 코드는 sec ID를 갖은 요소안에는 많은 요소가 있습니다. 그 중에 dot 클라스들에서 5번째 단위로 골라 폭을 20px 로 만들라는 명령어 입니다. 여기서 ()안을 방정식으로 생각하고, n을 0 번부터 계속된다고 보면 됩니다. 즉 5X0 + 5 는 5, 5x1 + 5 = 10 이러한 방식으로 5의 배수를 선택하라는 명령입니다. /* 목록의 두 번째 선택 */li:nth-child(2) { color: lime;}/* 임의의 그룹에서 네 번째에 위치하는 모든 요소 선택 */:nth-child(4n) { color: lime;}

html + css 2025. 5. 13. 14:07

~ (틸트)선택자CSS에서 ~(틸드)는 일반 형제(General Sibling) 선택자입니다. 즉, 특정 요소의 같은 부모를 가진 형제 요소들 중에서, 뒤에 위치한 요소들만 선택하는 역할을 합니다.#dots .active.dot ~ .dot { background: #555;}#dots 내부에서 .active.dot 클래스를 가진 요소 뒤에 위치하는 모든 .dot 요소를 선택하여 background: #555; 스타일을 적용합니다. 즉, 다음 줄 요소들 중에 dot 클래스를 갖은 모든 요소. + 선택자인접 형제 선택자로 뒤에 바로 붙어 있는 .dot 한 개만 적용 됨.active.dot + .dot { background: #555; }

html + css 2025. 5. 13. 13:55

전역사용아래의 경우는 모든 요소에서 활용는 되는 경우입니다.:root { --clr: #ff2972; /* 모든 요소에 적용할 색상 */}#clock div { color: var(--clr);} 개별사용 ** css **#sec,#min,#hr { position: absolute; display: flex; justify-content: center; align-items: center; inset: 0; text-align: center; color: var(--clr);}// 이 경우는 --clr은 개별 3가지 객상으로 분리되어 사용이 됩니다.

html + css 2025. 5. 13. 12:25

normalize.css브라우저 기본 스타일을 정리하여 모든 브라우저에서 일관된 스타일을 제공하는 css 파일 입니다.기본적으로 HTML 요소의 스타일을 조정하여 브라우저 간 차이를 줄입니다.예를 들어, 태그의 크기나 의 기본 스타일을 통일하는 역할을 합니다. HTML5 요소 지원 ( , )활용 방법1. CDN을 사용하여 적용HTML 의 태그 안에 다음 코드를 추가 하면, 별도의 다운로드없이 온라인으로 최신버전을 바로 사용할 수 있음2. 프로젝트에 직접 다운로드하여 적용공식 사이트에서 normalize.css 파일을 다운호드하여 프로젝트의 css 폴더에 저장한 후, HTML에서 불러옵니다. MUI의 CssBaseline Material UI에서 제공하는 CSS 리셋 컴포넌트입니다.normalize..

html + css 2025. 5. 12. 12:37

단일 콜론 (:) - 의사 클래스 (pseudo-class)- 의사 클래스는 요소의 특정 상태를 나타내는 데 사용됩니다. - 예를 들어, :hover는 마우스 커서를 요소 위에 올렸을 때의 상태를 나타냅니다. 일반적으로 의사 클래스는 요소가 특정 상태에 있을 때 스타일을 적용하는 데 사용됩니다. 즉,  a:hover는 링크 요소에 마우스를 올렸을 때 스타일을 적용합니다.이중 콜론 (::) - 의사 요소 (pseudo-element)- 의사 요소는 요소의 특정 부분을 스타일링하는 데 사용됩니다. - 예를 들어, ::before는 요소의 시작 부분에 콘텐츠를 삽입하고, ::placeholder는 입력 요소의 자리 표시자 텍스트를 스타일링합니다. 즉,  input::placeholder는 입력 필드의 자리 표..

html + css 2025. 1. 28. 10:55

요소에서 cx와 cy 속성은 그라디언트의 중심 좌표를 설정하는 데 사용됩니다. 이 좌표는 SVG 좌표 시스템을 기준으로 하며, 단위를 사용하지 않으면 0에서 1 사이의 비율로 해석됩니다.cx: 그라디언트의 중심의 x좌표를 설정합니다.cy: 그라디언트의 중심의 y좌표를 설정합니다. cx="0.25"와 cy="0.25"는 그라디언트 중심이 SVG 좌표 시스템의 좌측 상단에서 25% 지점에 위치하도록 설정합니다.

html + css 2025. 1. 7. 21:01

1. Viewport (뷰포트)viewport는 SVG가 화면에 표시되는 실제 크기와 위치를 정의합니다. 이는 SVG의 픽셀 공간을 결정하며, 일반적으로 HTML 문서에서 SVG 요소의 width와 height 속성에 의해 설정됩니다.픽셀 단위: viewport는 물리적 픽셀 공간으로 동작합니다.CSS와 관련: HTML 문서 내에서 CSS를 사용해 크기 조정을 적용할 수 있습니다.설정하지 않으면 기본적으로 SVG의 내용이 포함된 본질적 크기(intrinsic size)를 사용합니다.viewport를 설정하지 않고 CSS의 width와 height를 사용하면 외부 컨테이너에 따라 유연하게 변합니다. 2. ViewBox (뷰박스)viewBox는 SVG의 내부 좌표 시스템을 정의합니다. viewBox는 다음..

html + css 2025. 1. 7. 13:42

text-anchor 속성은 SVG(Scalable Vector Graphics) 내 텍스트 요소의 앵커링 위치를 설정하는 데 사용됩니다. text-anchor는 SVG에서만 사용 가능하며, HTML의 일반 텍스트 요소에는 적용되지 않습니다. start: 텍스트의 시작 부분을 기준으로 앵커링합니다.middle: 텍스트의 중간 부분을 기준으로 앵커링합니다.end: 텍스트의 끝 부분을 기준으로 앵커링합니다.예를 들어, text-anchor: middle을 사용하면 텍스트가 중간을 기준으로 정렬됩니다.

html + css 2025. 1. 7. 13:30