밀 종합 ٩(`╹ω╹´)و

선언 방법 사용자 지정 속성은 두 개의 붙임표로 시작하는 속성의 이름과 함께, 유효한 CSS 값이라면 아무거나 그 값으로 지정해 선언할 수 있다. :root { /* 보통 이 패턴을 많이 사용한다. */ --main-bg-color: brown; } div { /* 요소에서도 사용 가능하다. */ --main-bg-color: brown; } 사용 방법 var() 함수를 지정하고, 매개변수로 선언한 사용자 지정 속성의 이름을 사용한다. /* :root로 사용했을 경우 */ :root { --main-bg-color: brown; } .header { background: var(--main-bg-color); } /* 요소에서 사용했을 경우 */ div { --main-bg-color: brown; ba..

See the Pen [CSS] 는 transform이 적용되지 않는다. by mill (@millfeel) on CodePen. 는 inline 속성이기 때문에 transform이 적용되지 않는다. 를 display: block, inline-block으로 설정하면 사용 가능하다. [공부좌표] Transform CSS property doesn't work with element [duplicate]

:nth-child 태그의 종류에 상관없이 형제 순서로 선택을 한다. See the Pen [CSS3] :nth-child by mill (@millfeel) on CodePen. out item1 - div inner item1 - li 2 3 4 inner item2 - li out item2 - p out item3 - div .item:nth-child(1) { color: red; } .item:nth-child(2) { color: blue; } *out item1 - div는 의 첫번째 자식이고, inner item1 - li는 의 첫번째 자식이다. *.item:nth-child(2) { color: blue; }가 적용되지 않은 이유는 기준 두번째 자식은 이고, 기준 두번째 자식은 2인데,..

[참고한 사이트] https://www.navercorp.com/ Naver Corporation 네이버(주) 회사 소개, 주요 서비스, 투자 및 채용 정보 제공 www.navercorp.com PC인 경우 - background-size는 이미지의 크기와 동일하게 설정한다. - background-position은 포토샵 좌표 값과 동일하다. - width, height는 이미지와 1:1 비율이다. 모바일인 경우 모바일 레티나 디스플레이는 해상도가 2배이기 때문에 (원본 이미지 크기 / 2)를 해서 background-size를 설정한다. background-position도 (원본 이미지 크기 / 2) width, height도 (원본 이미지 크기 / 2) SVG도 가능하다 https://a11y.g..

See the Pen [CSS] table-layout by mill (@millfeel) on CodePen. - table의 width 값을 고정할 때 사용한다. - 고정 width값을 사용하지 않은 경우, 테이블의 width 값이 균등하게 나뉜다.

word-break 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정한다. See the Pen [CSS] word-break by mill (@millfeel) on CodePen. word-break: normal(기본값) | break-all | keep-all; [normal] 기본 줄 바꿈 규칙을 사용한다. [break-all] overflow를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있다. (한중일 텍스트 제외) [keep-all] 한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않는다. 비 CJK 텍스트에서는 normal과 동일하다. overflow-wrap(=word-wrap) 어떤 문자가 내용 칸 외부 넘치지 않게 브라우저가 단어 마..

See the Pen [CSS] text-overflow by mill (@millfeel) on CodePen. 숨겨진 오버플로우 콘텐츠가 사용자에게 어떻게 보여질 방식을 설정한다. 잘라내거나 줄임표 ('…')를 표시하거나 사용자 지정 문자열을 표시 할 수 있다. 단, text-overflow 속성은 overflow가 발생하도록 강제하지 않기 때문에 텍스트가 컨테이너를 넘치게하려면 overflow와 white-space를 설정해야한다. [공부 좌표] https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

요소 내부의 공백이 처리되는 방식을 설정한다. 그리고 속성은 다음 두 가지를 지정한다. 공백 축소 여부 및 방법 줄을 바꿈 여부 See the Pen [CSS] white-space by mill (@millfeel) on CodePen. 값 설명 normal (기본값) 연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리합니다. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다. nowrap 연속 공백을 하나로 합침. 줄 바꿈은 요소에서만 일어납니다. pre 연속 공백 유지. 줄 바꿈은 개행 문자와 요소에서만 일어납니다. pre-wrap 연속 공백 유지. 줄 바꿈은 개행 문자와 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다. pre-line 연속 공백..

- overflow-x, overflow-y의 속기 속성 - 요소의 콘텐츠가 커서 블록 서식 컨텍스트에 맞지 않을 때 양방향으로 설정된다. 값 키워드: visible(기본값), hidden, scroll, auto [값이 하나일 경우] overflow-x와 overflow-y가 동일한 값으로 설정된다. [값이 두개일 경우] 첫 번째 키워드는 overflow-x에 적용, 두 번째 키워드는 overflow-y에 적용된다. 설명 - visible(기본값) 이외의 값을 지정하면 새 블록 형식 컨텍스트가 작성된다. - overflow를 사용하려면 블록 수준 컨테이너여야 한다. - 설정된 높이가 height 또는 max-height가 있어야 한다. - white-space가 nowrap으로 설정되어 있어야한다. (..

See the Pen by mill (@millfeel) on CodePen. 포인터 이벤트 대상이 되지 않게 하기 위해서 사용 pointer-events: none; [공부 좌표] MDN