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

`상황, 맥락, 문맥 상의 의미` 등으로 이해되는 용어 사실상, 컨텍스트는 - 그냥 텍스트(Text) 처럼 바로 이해되는 단순히 원본 정도가 아니라, - 문맥 및 상황에 따라, 어떤 해석이 가미되어 이해되는 한 차원 높은 공간, 영역을 의미 전산 뿐만 아니라 방송, 예술 등의 분야에서도 널리 사용되는 용어 [출처] 컨텍스트 [정보통신기술용어해설]

@content가 포함된 영역이 스타일 블록이 된다. 이 방식을 사용하여 기존 Mixin이 가지고 있는 기능에 선택자나 속성 등을 추가할 수 있다. @mixin icon($url) { &::after { display: block; content: $url; @content; } } .icon1 { @include icon("/images/icon.png"); } .icon2 { @include icon("/images/icon.png") { position: absolute; }; } .icon1::after { display: block; content: "/images/icon.png"; } .icon2::after { display: block; content: "/images/icon.png";..

mill-study.tistory.com/207#question-1 [Do it! 자바스크립트 기본] 08. 웹 문서를 다루는 방법, 문서 객체 모델(DOM) - 상세 설명 보기/닫기 ( 에디오피아 게뎁 상품명 : 에디오피아 게뎁 판매가 : 9,000원 배송비 : 3,000원 (50,000원 이상 구매 시 무료) 적립금 : 180원(2%) 로스팅 : 2019.06.17 장바구니 담기 상세 설명 보기 상품 상세 정보 원산지 : mill-study.tistory.com

부모 구분 속성 기본값 축약 방향 flex-direction row flex-flow *값의 위치는 제약이 없다. [예제] flex-flow: cloumn wrap flex-flow: wrap cloumn 줄바꿈 flex-wrap nowrap 정렬 justify-content normal place-content [값이 1개인 경우] place-content: align-content | justify-content *align, justify 값이 동일하게 적용 [값이 2개인 경우] place-content: align-content justify-content *띄어쓰기로 값을 구분한다. [예제] gap: center gap: 8px 16px align-content normal align-items..

order의 기본 값은 0이다. 0보다 일찍 항목에 표시하려면 음수 값을 설정한다. order 값이 낮은 항목들이 먼저 나타난다. See the Pen flex item 순서 바꾸기 by mill (@millfeel) on CodePen.

justify-content는 그룹으로만 항목을 처리하기 때문에 justify-items. justify-self 속성이 없다. (보통 align-iems와 함께 사용하다보니, justify-content가 item을 정렬하는 것으로 오해를 많이 한다.) 그렇다면 justify-self를 사용하지 않고, 단독 정렬은 어떻게 해야할까? 정렬할 대상에 margin-방향: auto를 사용한다. See the Pen [CSS3] flex의 justify-self처럼 단독으로 정렬하는 방법 by mill (@millfeel) on CodePen.

See the Pen [CSS3] flex의 align-content와 align-items의 차이 by mill (@millfeel) on CodePen.

img의 적절한 사용 페이지 출력시 이미지를 포함시킬 경우 이미지에 경고 아이콘과 같은 중요한 의미가있는 경우 img의 실용적인 사용 이미지가 로고, 다이어그램 또는 사람 (스톡 사진 인물이 아닌 실제 인물)과 같은 콘텐츠의 일부인 경우 브라우저 크기 조정에 의존하여 텍스트 크기에 비례하여 이미지를 렌더링하는 경우 배경 이미지 대신 img를 사용하면 배경에서 애니메이션 성능을 크게 향상시킬 수 있다. background-image를 사용하는 경우 이미지가 콘텐츠의 일부가 아닌 경우 이미지 위에 텍스트가 들어가는 경우 페이지 출력시 이미지를 제거해야하는 경우 sprite 이미지를 사용하는 경우 sprite처럼 이미지의 일부만 표시해야하는 경우 전체 창을 채우기 위해 배경 이미지를 늘리는 경우 아이콘과 같이..

부모의 z-index 레벨을 점검해 본다. .content { position: relative; z-index: 1; } .modal { position: fixed; z-index: 100; } .side-tab { position: fixed; z-index: 5; } [원인] modal의 z-index가 100이라도, 부모인 content의 z-index가 1이면 side-tab은 modal의 위에 배치될수밖에 없다. 이유는 마크업에서 같은 레벨의 부모의 z-index 값이 낮으면 자식의 값도 강제로 값이 낮아지기 때문이다. (z-index를 100해봐야 content 안에서만 100이라는 의미) [해결 방법 2가지] modal을 content 밖으로 뺀다. content의 position을 제거..

See the Pen [CSS3] background-size by mill (@millfeel) on CodePen. 값 background-size: 25px 50px; 기본 값은 auto auto이고, 이미지를 비율에 맞게 늘린다. 값이 하나인 경우: 너비 값에 적용되고, 높이 값은 auto가 된다. 값이 두개인 경우: 첫번째 값은 너비, 두번째 값은 높이가 적용된다. 여러 배경 이미지의 크기를 지정하려면 각각의 값을 쉼표로 구분한다. 키워드 background-size: cover/contain; [cover] 이미지가 잘려도 이미지를 최대한 크게 조정한다. 빈 공간이 남지 않는다. [contain] 이미지가 잘리지 않는 기준에서 가장 크게 이미지를 조정한다. 빈 공간이 남는다. [공부 좌표] b..