HTML·CSS (30) 썸네일형 리스트형 프린트 스타일을 지정하다, @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. poster, 비디오 준비 중일 때 미리보기 이미지 poster: 비디오 준비 중일 때 이미지경로 이전 1 2 3 4 다음
