CSS60 [Modern CSS] 하단에 footer 고정하기 flex vs grid 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;.. 2020. 6. 30. CSS 가상 선택자 :is() 와 :where() 수 많은 가상 선택자들이 있지만 아직까지 브라우저 환경에서 일부 지원하지 않는 현상 때문에 많이 사용해오지 못하고 있습니다. 점점 많은 css 속성과 환경에 대한 스타일링이 중요시되고 있는 사실은 분명합니다. 이제 가상 선택자 :is()와 :where()가 Safari (Tech Preview 106) 및 Firefox (버전 78)의 미리보기 버전에서 지원됩니다. Chrome의 구현은 여전히 언제 지원될지는 모릅니다. can i use에서 보시다시피 여전히 먼 훗날이 될 것 같은 선택자이지만 간단히 알아보고 가시죠. :is() :is()를 사용하면 반복을 획기적으로 줄일 수 있습니다. /* BEFORE */ .embed .save-button:hover, .attachment .save-button:h.. 2020. 6. 13. CSS @charset "utf-8"; 을 쓰는 이유 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'; /.. 2020. 4. 19. 자바스크립트에서 CSS와 SASS의 변수 사용하기 뷰와 리액트 등 프레임워크 및 라이브러리 자바스크립트에서 css와 sass를 사용하는 일이 자주 있습니다. 그럴 때 마주하고 싶은 것이 바로 css Custom variable과 Sass variable로 어떻게 하면 비용절감을할 수 있을까 고민하게 됩니다. 이러한 상황에서 자바스크립트에서 css 및 sass의 변수를 다루는 법을 공유하고자 합니다. CSS 커스텀 변수와 Javascript 간단명료한 속성을 사용해서 가능한 부분입니다. // setProperty 사용하기 document.documentElement.style.setProperty("--margin", 10 + "rem"); // 10rem 그리고 자바스크립트에서 getComputedStyle 속성을 사용하여 CSS 변수를 검색할 수도 있.. 2020. 4. 5. 이전 1 ··· 9 10 11 12 13 14 15 다음
