수제 녹차 수제 녹차

컴퓨터/HTML & CSS

• [CSS] IOS 노치 화면 safearea 이슈

  컴퓨터/HTML & CSS 2021. 8. 12. 19:03

  * 하단에 토스트 팝업 등을 띄울 때 ios나 안드에서 잘리는 이슈가 생길 수 있다. 예를 들어, 단말기 화면 가장자리가 둥글 때 발생한다. 이 때 사용할 수 있는 방법이 safe-area-inset-top/right/bottom/left 참고: https://wit.nts-corp.com/2019/10/24/5731 아이폰X 안전영역(Safe Area) 대응 사례 | WIT블로그 Safe Area는 원래 TV에서 처음 도입된 개념입니다. TV 해상도 비율이 다양해지면서 영상에서 타이틀, 자막 등이 필수 콘텐츠의 노출을 보장할 수 있는 영역입니다. wit.nts-corp.com // iOS 11.0 버전 constant(safe-area-inset-top) constant(safe-area-inset-r..

  Read More
• image 색깔 바꾸기

  컴퓨터/HTML & CSS 2020. 3. 27. 11:46

  https://codepen.io/sosuke/pen/Pjoqqp CSS filter generator to convert from black to target hex color ... codepen.io 'use strict'; class Color { constructor(r, g, b) { this.set(r, g, b); } toString() { return `rgb(${Math.round(this.r)}, ${Math.round(this.g)}, ${Math.round(this.b)})`; } set(r, g, b) { this.r = this.clamp(r); this.g = this.clamp(g); this.b = this.clamp(b); } hueRotate(angle = 0) { a..

  Read More
• [HTML] input tag : autocomplete, type, required, readonly, disabled, 모바일 기기에서 제공

  컴퓨터/HTML & CSS 2020. 2. 4. 20:32

  * 읽어보기 : www.freecodecamp.org/news/what-is-sql-injection-how-to-prevent-it/ SQL injection 대비하기 * readonly, disabled 읽기만 가능할 뿐 변경은 불가능하다. 차이점 : form으로 값을 보낼 때 disabled의 값은 전송되지 않는다 * autocomplete 자동 완성 기능 끄기 * type="file" file 이외에도 : password, number, telephone(tel), email, url, search, Datetime-local, date, time, month, week, color, range 등 가능 accept: 파일 탐색기 열 때 해당 파일 형식만 뜨도록 한다. Note: 다른 형식 첨부 ..

  Read More
• width N height of elements

  컴퓨터/HTML & CSS 2019. 10. 22. 08:55

  width height min-width max-width min-height max-height ** 그림 자료가 어느 블로그 캡쳐한건데 기억이 나지않는다 1. HTMLElement.offsetWidth, HTMLElement.offsetHeight read-only property that returned the layout width of an element as a integer. - transform이 없다면 Element.getBoundingClientRect()과 비슷 - total amount of space an element occupies, including the width of the visible content, scrollbars (if any), padding, and bor..

  Read More
• display: grid

  컴퓨터/HTML & CSS 2019. 10. 2. 10:04

  - container에 .container { display : grid; grid-template-columns: 40% 60%; } - grid-template-columns: 4fr 6fr; -> 4:6으로 나눠갖는다. (fr: fraction) 40%, 60%하는 것과 같다. 너비가 40% 60%인 칼럼 두 개가 생긴다. 1st item 2nd item 34 56 순으로 배치된다. - grid-gap: 1rem; 여백을 만든다. grid-template-columns가 40%, 60%일 때는 여백으로 인해 container 밖으로 아이템들이 삐져나온다. (스크롤이 생긴다) 4fr, 6fr일 때는 여백만 생길 뿐 container 안에 있다. - grid-template-columns: repeat..

  Read More
•  (공백)

  컴퓨터/HTML & CSS 2019. 8. 28. 17:13

  " " : 공백 한 칸을 의미 HTML : 공백을 아무리 많이 삽입해도 공백 1개로 간주한다. 공백을 여러 개 사용해야 할 때는 로 표시한다. ex. 공백 4칸 aaa bbb

  Read More
• requestAnimationFrame()

  컴퓨터/HTML & CSS 2019. 8. 28. 15:41

  1) 부드러운 인터렉션을 위해 초당 60번 화면을 그린다. requestAnimationFrame()을 사용하면 브라우저가 리소스 사용을 더욱 최적화하고 애니메이션을 더욱 부드럽게 만들 수 있다.

  Read More
• CSS : table

  컴퓨터/HTML & CSS 2019. 8. 28. 15:32

  이름 직업 직책 이메일 도라에몽 연구원 - doraemong@gmail.com - table element is set as "display: table" tr -> display:table-row td -> display: table-cell - table 셀 너비보다 텍스트가 길 경우 말 줄임표 표시하는 방법 1) 속성으로 table-layout: fixed; 주기 2) td { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } - tr의 border styling 하는 법 tr에 클래스를 준 후 tr.border_bottom td { border-bottom:1pt solid black; } 이런 식으로 css 파일 만들기

  Read More