Front End Develop Front End Develop

HTML markup this-file-has-a-really-really-really-long-filename. pdfCSS.filename { display: flex; min-width: 0;}.filename__base { text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}.filename__extension { flex-shrink: 0;} flex container의 기본 min-width는 auto 입니다. min-width가 auto일 때는 자식 요소들의 최소 너비를 보장하려고 합니다.이로 인해 텍스트가 긴 경우 text-overflow:ellipsis가 적용되지 않을 수 있는데요.이 때 min-width를 0..

CSS 속성중에 revert 속성이란 것이 있습니다. 부모 속성으로 돌아가거나 부모가 없을 때는 최초의 상태로 돌아가는 것입니다.

스크롤바가 어디에 있는지에 대한 강한 기대를 깨뜨리기 때문에 일반적으로 이것을 추천할 수는 없습니다. 많은 사람들에게 핵심 접근 기능이며 유용합니다. 그러나 그것은 매혹적인 CSS 트릭이며 웹은 때때로 이상한 해결책이 필요한 상황을 알 수 없는 규모의 큰 장소입니다. 테크닉1 : Directional Trickery CodePen Embed Fallback direction:rtl 이 핵심 테크닉2 : Rotational Tricker 회전으로 나타내는 것입니다. CodePen Embed Fallback 이것은 두 가지 이유로 특히 어색합니다. 스크롤 요소는 기본적으로 맨 아래로 스크롤됩니다 스크롤 방향은 스크롤 휠과 반대로 느껴집니다. 스크롤바 자체는 예상대로 작동해야하지만 트랙 패드 또는 마우스 스크..

meyerweb 재 설계의 또 다른 측면은 CSS 그리드 행을 사용하여 더 많은 레이아웃 유연성을 제공하는 방식입니다. 먼저 meyerweb에서 페이지의 기본 레이아웃을 시각화 해보겠습니다. 간단하고 flexbox로도 가능합니다! 그러나 항상 상황이 단순하게 유지되어야합니다. 이 두 사이드 바의 내용이 사이트의 한 부분에서 다른 부분으로 다를 수 있기 때문에 아마 그렇지 않을 것입니다. 경우에 따라 사이드바들이 세로로 정렬되기를 원합니다. 블로그 아카이브의 초기 디자인 프로토 타입에서는 링크를 기본 컨텐츠 열의 맨 아래로 이동하기 전에 “다음 포스트” 및 “이전 포스트” 링크를 이러한 지점 중 일부에 배치했습니다. 따라서 현재로서는 그 기능을 사용할 수 있지만 해당 지점을 사용하는 것은 없습니다. 필요에..

Moder CSS 첫 번째 주제 - footer 하단 고정 flex vs grid 괜찮은 Modern Css 소개 페이지가 있어 연재를 하려고 합니다. 그 첫 번째 시간으로 하단에 footer 고정하기 See the Pen Footer 하단 고정 Flex & Grid by YoungMinKim (@oinochoe) on CodePen. 먼저 Flex를 통하여 고정시키는 방법이 있습니다 body { min-height: 100vh; /* 최소 높이를 지정 */ display: flex; flex-direction: column; } footer { margin-top: auto; /* 최소 높이 하단에서 자동으로 뻗어나가도록 설정 */ } /* optional */ main { margin: 0 auto;..

수 많은 가상 선택자들이 있지만 아직까지 브라우저 환경에서 일부 지원하지 않는 현상 때문에 많이 사용해오지 못하고 있습니다. 점점 많은 css 속성과 환경에 대한 스타일링이 중요시되고 있는 사실은 분명합니다. 이제 가상 선택자 :is()와 :where()가 Safari (Tech Preview 106) 및 Firefox (버전 78)의 미리보기 버전에서 지원됩니다. Chrome의 구현은 여전히 언제 지원될지는 모릅니다. can i use에서 보시다시피 여전히 먼 훗날이 될 것 같은 선택자이지만 간단히 알아보고 가시죠. :is() :is()를 사용하면 반복을 획기적으로 줄일 수 있습니다. /* BEFORE */ .embed .save-button:hover, .attachment .save-button:h..

CSS를 사용할 때 @charset "utf-8"을 많이 보셨을 것입니다. 이 선언은 html 문서 내의 태그 내에는 적용이 되지 않습니다. 유니코드 문자열(비 아스키코드)이 있을 때 utf-8로 명시적으로 선언해주어 utf-8 인코딩 셋을 지정합니다. [data-set="dragon"]::before { content: ' ↗'; display:block; width:10px; } 예를 들어 위와 같은 유니코드 문자열이 있을 경우에 Windows-1252로 인코딩이 읽히기도 합니다. html 문서 내에 와 같이 작성하는 것은 obsolete(사용하지 않는 상태로 됨) 되었습니다. 작성 규칙은 다음과 같습니다. @charset "UTF-8"; /* 유효 */ @charset 'iso-8859-15'; /..

뷰와 리액트 등 프레임워크 및 라이브러리 자바스크립트에서 css와 sass를 사용하는 일이 자주 있습니다. 그럴 때 마주하고 싶은 것이 바로 css Custom variable과 Sass variable로 어떻게 하면 비용절감을할 수 있을까 고민하게 됩니다. 이러한 상황에서 자바스크립트에서 css 및 sass의 변수를 다루는 법을 공유하고자 합니다. CSS 커스텀 변수와 Javascript 간단명료한 속성을 사용해서 가능한 부분입니다. // setProperty 사용하기 document.documentElement.style.setProperty("--margin", 10 + "rem"); // 10rem 그리고 자바스크립트에서 getComputedStyle 속성을 사용하여 CSS 변수를 검색할 수도 있..