HTML·CSS (32) 썸네일형 리스트형 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. poster, 비디오 준비 중일 때 미리보기 이미지 poster: 비디오 준비 중일 때 이미지경로 textarea, 가로세로 글자 갯수설정 textarea: cols, rows 123456789012345678901234567890 2. standout 3. standout 4. standout 5. standout 6. standout 7. standout 8. standout 9. standout 10. standout select, 다중선택과 그룹화 multiple="multiple": 여러개선택 optgroup: 옵션을 그룹화 standout standout standout standout standout standout standout standout CSS 선택자 속성값에 특정단어포함여부 + 정규표현식 div [data-role| = row] : 속성값에 특정단어 div [data-role ~ = row] : 속성값에 특정 단어포함 div [data-role*= row]: 속성값에 특정 단어포함 div [data-role^ = row] : 속성값에 특정단어로 시작 div [data-role$ = 9]: 속성값에 특정단어로 끝 STANDOUT STANDOUT STANDOUT STANDOUT STANDOUT STANDOUT https://standout.tistory.com/73 코드를 줄여주는 정규표현식 정규표현식 regular expression, 간단히 regexp 또는 regex, rational expression) 또는 정규식이라 불림. 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 .. CSS 선택자, 번갈아 선택하기 nth-last-child(2n+1) , nth-child(2n+1) li:nth-last-child(2n+1) 마지막에서 2의배수 li:nth-child(2n+1) 첫번째부터의 2의배수 STANDOUT STANDOUT STANDOUT STANDOUT STANDOUT STANDOUT STANDOUT 리스트의 갯수가 조건에 맞아야지만 적용된다. CSS 선택자 첫/마지막번째, *-of-type h1:first-of-type : h1형제중 첫 번째 h1 태그 h1:last-of-type : h1형제중 마지막 h1 태그 STANDOUT STANDOUT STANDOUT STANDOUT CSS 선택자, 번갈아 선택하기 nth-of-type() h1:nth-of-type(2n+1) h1:nth-last-of-type(2n+1) STANDOUT STANDOUT STANDOUT STANDOUT STANDOUT STANDOUT STANDOUT CSS 선택자, 번갈아 선택하기 odd/even p:nth-child(even), 홀수 p:nth-child(odd), 짝수 STANDOUT STANDOUT STANDOUT STANDOUT STANDOUT STANDOUT STANDOUT CSS 선택자, input 활성화/비활성화 감지 :enabled, :disabled input:enabled input:disabled STANDOUT CSS 선택자 :link/:visited 링크텍스트/방문링크 a:link, 링크가 걸린 텍스트 a:visited, 방문한 링크 STANDOUT STANDOUT STANDOUT STANDOUT CSS 선택자 ::first-letter/line 첫번째 글자/줄 p::first-letter p::first-line 첫번째 글자, 첫전째 줄 선택 STANDOUT STANDOUT STANDOUT STANDOUT CSS 선택자 ::selection, 드래그한 글자 p::selection 사용자가 드래그한 글자를 선택함 STANDOUT STANDOUT STANDOUT CSS 선택자 :not(), ~가아닐때 p:not(.something) 아닌것, 반대로 STANDOUT STANDOUT STANDOUT 스크롤 커스텀 css 지금 이 블로그에 적용된 스크롤 css이다.*::-webkit-scrollbar { width: 16px; /* 스크롤바의 너비 */}*::-webkit-scrollbar-thumb { height: 30px; /* 스크롤바의 길이 */ background: #a2a2a269; /* 스크롤바의 색상 */ background-clip: padding-box; border-radius: 10px; /* 여백을 주고싶을때 */ border: 5px solid transparent; /* 여백을 주고싶을때 */ cursor: pointer;}*::-webkit-scrollbar-track { background: rgba(102, 102, 102, 0.028); /.. 정보 노출여부, get/post 인터넷서핑을 하다보면 길어지는 url을 자주 만나볼 수 있다. 이처럼 url에 정보를 표시해 넘기는 방식을 get, 숨겨 넘기는 방식을 post라 한다. get 얻다 (http://www.example.com/formsubmit?input1=value1&input2=value2) post 우편물 (http://www.example.com/formsubmit) get은 정보를 얻어내 노출, post은 포장하듯 노출하지않는다. 마우스/키보드를 인식하다, :hover :active :facus 마우스/키보드를 인식하다, :hover :active :facus :hover 움직임 (마우스를 가져다 댔을때) :active 활성화 (버튼이나 링크를 클릭할 때) :facus 포커스 (Tab 키를 사용하여 다음 input으로 이동할 때) a 태그에서 세트로 많이 쓰인다.a:hover,a:active,a:focus{color:skyblue} footer에 이용하다, address 주소/정보 및 footer에 이용한다. 회사명 주소: 서울시 강남구 역삼동 123-456 전화번호: 02-123-4567 이메일: info@company.com 입력양식 묶음, fieldset와 legend fieldset: 입력양식 묶음 legend: 입력양식 title 개인 정보 이름: https://standout.tistory.com/165 데이터를 전송하는 form태그데이터를 전송하는 form태그 action URL, 어디로 전송할지 method 노출, 값을 보여줄것인지(get,post) enctype 인코딩, 어떻게 전송할지(application/x-www-form-urlencoded, multipart/form-data) 개인 정보 이름:standout.tistory.com input 속성의 모든 것 input 속성의 모든 것 input에는 정말 많은 속성이 있다. button, checkbox, file, hidden, image, password, radio, reset, submit, text, color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week.. input 속성을 확인해보다가 문득 그래서 input 속성의 처음과 끝이 궁금해졌다. W3C 명세서와 MDN 문서에서 확인 할 수 있는데, 아래의 링크 2개에 접속하면 자세히 확인해 볼 수 있다. W3C 명세서 https://html.spec.whatwg.org/multipage/input.html#common-input-elem.. @media 미디어 쿼리 속성, 장치의 회전 orientation @media 미디어 쿼리 속성, 장치의 회전 orientation 미디어 쿼리에는 여러가지가 있지만 자주쓰이는게 있다면 width와 orientation이다. Portrait 초상화 세로모드 Landscape 풍경화 가로모드 // orientation: 장치의 방향 @media screen and(orientation:portrait){ html{} } @media screen and(orientation:landscape){ html{} } 외 속성은 한번 읽어보며 이런것들이 있다~ 정도만 알아두도록 하자. orientation: 장치의 방향 width: 화면의 너비 height: 화면의 높이 device-width: 장치의 너비 device-height: 장치의 높이 device-aspect-rati.. 말줄임 코드, 영역을 벗어나면 ... 로 말줄임 코드, 영역을 벗어나면 ... 로 영역을 벗어나면 ... 로 표현된다. white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 어떻게 전송할지 결정하다, enctype application/x-www-form-urlencoded 각 데이터 사이에 &를 추가하고, 키와 값 사이에는 = 추가해 문자열로 전송 multipart/form-data 데이터를 여러부분으로 나누어 전송, 대용량 파일전송이 가능하다. 개인 정보 이름: https://standout.tistory.com/165 데이터를 전송하는 form태그 데이터를 전송하는 form태그 action URL, 어디로 전송할지 method 노출, 값을 보여줄것인지(get,post) enctype 인코딩, 어떻게 전송할지(application/x-www-form-urlencoded, multipart/form-data) 개인 정보 이름: standout.tistory.com 이전 1 2 다음
