HTML·CSS (31) 썸네일형 리스트형 Sass 기본사용법 SassSyntactioncally Awosome StyleSheetsCSS의 간결한 문법은 프로젝트 규모가 커지고 수정이 빈번히 발생하면 쉽게 지저분해지는 단점이 있다CSS의 한계와 단점을 보완하여 가독성 높고 재사용에 유리한 CSS의 확장.Sass는 변수사용, 조건문과 반복문, Import, Nesting, Mixin, Extend/Inheritance 도구를 제공한다. 브라우저는 Sass 문법을 알지못해 .scss파일을 css파일로 컴파일해야한다.시작하기전 Sass환경설치.npm install -g sasshttps://standout.tistory.com/49 cmd, CLI형태의 DOScmd 윈도우 명령어 처리기(Windows Command Processor) *CLI형태의 *DOS https.. 프린트 스타일을 지정하다, @page @media print 우선 최소한의 작업을 위해 bootstrap을 이용하기로 하자. https://standout.tistory.com/1074 개인 bootstrap stylesheet만들기 bootstrap을 통해 본인만의 stylesheet를 소유해보자. Bootstrap에 접속해 cdn 코드를 복붙한다. https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuil standout.tistory.com 우선 전체 코드를 첨부한다. Print Test This is a sample HTML content for testing pr.. 크로스브라우징: @supports, 속성지원여부에 따른 브라우저별 CSS 스타일 적용하기 크로스브라우징: @supports, 속성지원여부에 따른 브라우저별 CSS 스타일 적용하기 /* 만약 브라우저가 `display: grid` 속성을 지원한다면 이 스타일이 적용됩니다. */ @supports (display: grid) { .container { display: grid; grid-template-columns: 1fr 1fr; } } /* 만약 브라우저가 `display: grid` 속성을 지원하지 않는다면 이 스타일이 적용됩니다. */ @supports not (display: grid) { .container { float: left; width: 50%; } } <br>치기 귀찮을때, white-space 자동줄바꿈 총 두가지 방법이 있다. 두 코드의 차이가 있다면 pre-wrap은 공백을 인정하고 white-space: pre-wrap; pre-line은 연속된 공백이 있어도 하나로만 인식해 표현한다. white-space: pre-line; 로고png 블랙/화이트로 만들기, CSS filter 여러색상으로 이루어진 Google로고를 이용해보자 블랙 filter: brightness(0); 화이트 filter: brightness(0) invert(1); css 초기화, Eric Meyer’s Reset CSS,HTML5 Doctor Reset stylesheet 웹 페이지의 스타일을 초기화하는 인기있는 코드중 하나이다. Eric Meyer’s Reset CSS HTML5 Doctor Reset stylesheet http://meyerweb.com/eric/tools/css/reset/reset.css http://html5doctor.com/wp-content/themes/html5doctor-2012/style.css 위 경로로 들어가 코드를 직접 복사해 css파일에 넣어놓은 뒤 사용해도되지만, link태그를 이용하여 연결해 사용할 수도 있다. top버튼, only css 최소코드 top버튼 top html {scroll-behavior: smooth;} .back-to-top {position: fixed; bottom: 20px; right: 20px;} preload 음악/비디오 재생전 로딩속성 preload: 음악/비디오 재생전 모두 불러올지 결정 auto: 페이지 로드 시 즉시 로딩 metadata: 동영상의 길이, 크기 등의 정보만 로딩하므로 재생 전에는 일부분만 로딩됨. none: 사용자가 비디오를 재생하기 전까지는 아무것도 로딩되지 않음 Your browser does not support HTML5 video. 이전 1 2 3 4 다음
