반응형 HTML&CSS HTML&CSS 2023. 1. 22. [CSS] querySelector의 특수문자 이스케이프와 CSS.escape() 메서드 - CSS querySelector Special Character Escape HTML 요소를 선택하는 방법중 가장 기초적인 방법은 getElementById() 와 getElementByClassName() 입니다. 근본 메서드이므로 빠르고 직관적이지만, 복잡한 CSS 선택자를 사용할 수 없는 제약이 다소 있습니다. 그래서 우리는 querySelector(), 또는 querySelectorAll() 을 조금 더 많이 사용합니다. 속도를 제외하면 여러가지 면에서 더 뛰어나기 때문에 습관적으로 사용하는 querySelector() 메서드지만 예기치 못한 단점도 있습니다. 먼저 근본 HTML 요소(들) 선택자로 다음 요소를 선택해보겠습니다. ID와 클래스 모두로 요소를 선택할 수 있고, 정확하게 선택이 됩니다. getElementByClassName() 메서드는 반환되는 값이 컬랙션(.. HTML&CSS 2022. 7. 8. [CSS 고급] mix-blend-mode CSS 속성으로 소수점 단위 별점 구현하기 mix-blend-mode 속성은 생소하지만, 모던 웹 브라우저에서는 모두 지원하는 안정화된 속성입니다. 이 속성은 겹쳐진 두 개의 레이어의 색상이 어떻게 섞이는지를 결정하는 속성입니다. 두 레이어의 색상을 혼합해서 하나의 레이어로 합쳐져 보이도록 만드는 컬러 필터 이펙트 효과입니다. 효과는 극적이지만, 활용할 수 있는 용도가 그렇게 많지는 않습니다. 별점 기능은 만드는 방법이 여러 가지 있고, 자바스크립트의 도움을 받으면 소수점 단위 별점 기능을 어렵지 않게 구현할 수도 있습니다. mix-blend-mode 속성을 이용하면 기존의 구현 방법보다 더 간결하고 빠르게 소수점 별점 기능을 구현할 수 있습니다. mix-blend-mode 속성은 배경색과 전경 색의 색상을 혼합해서 색상을 얻는 컬러 필터 기능을.. HTML&CSS 2022. 6. 24. CSS 컬러를 사용하는 방법과 지원 색상 영역(Color Space) 기초 (#웹컬러, 컬러이름, RGB, HSL, HWB, LCH, LAB) Modern CSS, 흔히 최신 웹 페이지를 제작하는데 필요한 모던 CSS 속성에서 컬러 속성은 가장 빈번하게 사용하는 탑 티어 CSS 속성입니다. 많이 자주 사용하지만 많은 개발자와 웹 디자이너에게 웹에서 표현하는 컬러 값 표현을 편하게 사용하는 것은 그렇게 만만치 않습니다. CSS로 표현하는 컬러 속성 값은 평소에는 우리가 사용할 일이 없는 16진수(#FABB88) 값이거나, CSS 속성 값 표현으로도 생소한 함수형 표현(rgb(255,128,128,. 5))으로 값을 정의합니다. 다른 CSS 속성과 달리 컬러 속성 값은 색상 공간이나 색상의 혼합에 대한 기초 개념이 있어야 하기 때문에 제대로 이해를 하는데 많은 시간이 걸립니다. 그리고 그전까지는 대체로 좀 더 싸 보이는 고급스럽지 않은 색상과 원색.. HTML&CSS 2022. 2. 7. 초보 웹개발자의 필수 CSS 작성 규칙 TOP 10 1. CSS Reset은 필수다. 가장 중요하기 때문에 1번입니다. CSS 리셋을 하는 방법은 여러 가지가 있습니다. 용도에 따라 자신만의 CSS 리셋을 만들어 쓰기도 하지만, 기본적으로 CSS 리셋은 더 최적화되고 적은 CSS 속성을 작성할 수 있도록 도움을 주는 가장 기본적인 CSS 코드 작성입니다. CSS 리셋은 브라우저간의 기본 속성 차이로 인해 발생하는 CSS 호환성 문제를 줄여주고, 단일 CSS 코드만으로 모든 브라우저에 같은 UI를 표시하는데 도움을 줍니다. 최근에는 브라우저간의 호환성 문제가 줄어들면서 이런 CSS 리셋의 중요도가 다소 불필요하게 보일 수도 있지만, 남용하지만 않으면 여전히 고전적이면서도 뛰어난 CSS 기법 중 하나입니다. * { margin:0; padding:0; } *.. HTML&CSS 2021. 11. 22. 웹페이지에 구글 웹폰트 적용하기 구글 웹폰트는 구글의 CDN을 통해서 웹 폰트를 바로 사용할 수 있기 때문에 웹폰트를 사용할 때 가장 기본적으로 적용하는 웹폰트 서비스입니다. 구글 CDN을 사용하기 때문에 CDN으로 서비스되는 웹 폰트 중에서 속도가 가장 빠른 편에 속하고, 웹 폰트 파일을 생성하거나 업로드하는 번거로운 작업 없이도 웹사이트, 블로그에 다채로운 글꼴을 적용할 수 있습니다. 구글 웹폰트는 기본이 되는 글꼴 외에 여러 가지 디자인 글꼴을 지원합니다. 한글 글꼴도 여러 가지 지원하기 때문에 취향에 맞춰 글꼴을 골라서 사용할 수 있습니다. https://fonts.google.com Google Fonts Making the web more beautiful, fast, and open through great typograp.. HTML&CSS 2021. 10. 28. 스크롤바가 보이지 않는 스크롤 박스 만들기 웹 레이아웃을 만들 때 폼 요소, 또는 스크롤바는 디자인을 예쁘게 만드는 게 쉽지 않은 요소입니다. 스크롤바 같은 경우 예쁘게 만들 수는 있지만, 약간의 호환성 문제가 있습니다. 크롬과 신형 엣지 브라우저는 벤더 프리픽스(공급사 접두어)를 사용하면 스크롤바를 원하는 데로 꾸밀 수 있습니다. .sidebar::-webkit-scrollbar { width: 6px; background-color: #F5F5F5; } .sidebar::-webkit-scrollbar-thumb { background-color: #aaa; } .sidebar::-webkit-scrollbar-track { background-color: #F5F5F5; } 웹킷(-webkit) 벤더 프리픽스를 적용해 구현한 이 스크롤바는 .. HTML&CSS 2021. 10. 27. HTML 폼(<form>)의 enctype 속성과 multipart/form-data 의 의미 HTML 폼을 POST 방식으로 전송할 때는 전송하는 데이터를 인코딩하기 위해 인코딩 타입에 대한 명시가 필요합니다. 인코딩 타입을 명시하는 속성은 "enctype"입니다. "enctype" 은 3가지 속성 값을 사용할 수 있습니다. enctype 용도 multipart/form-data 파일()이 포함된 폼을 전송할 때 사용. application/x-www-form-urlcencoded 파일이 없는 폼에 사용. multipart/form-data 를 제외한 모든 경우에 사용. enctype 속성이 없을 때 적용 기본 값. text/plain 인코딩 없이 전송. 보안성이 없어 디버깅 용도로만 사용해야 함. 3개를 제외한 나머지 인코딩 속성 값은 무시됩니다. "text/plain" 은 개발용 외에는 사용.. HTML&CSS 2021. 10. 26. HTML5 표준 HTML 페이지의 헤더 메타 태그 작성 방법 HTML5는 표준 HTML 문서의 헤더에 작성하는 메타 태그들도 간소화되고 표준화되었습니다. 혼동을 주던 과거 XHTML의 잔재였던 부분들은 모두 정리되었고, 표준적인 사용방법이 적용되었습니다. 아울러 인터넷 익스플로러가 퇴출되면서 그에 따른 호환성 표기도 사실상 불필요해졌습니다. 아직 소수 남아있는 인터넷 익스플로러 호환, 또는 지원 표기를 위해 추가적으로 명시해주는 메타 태그 정도만 필요합니다. 인코딩 메타 태그 기본적으로 모든 HTML5 문서는 "UTF-8" 인코딩을 사용합니다. 과거 HTML 문서에 한글 인코딩을 위해서 표기했던 내용들은 모두 잊어버리고 다음 인코딩 메타태그만 사용하면 됩니다. 인코딩 표기 중에 다음의 긴 인코딩 표기가 있는데 둘은 동일한 표현이며, 같은 의미입니다. 웹브라우저도 .. 이전 1 2 3 4 ··· 23 다음 반응형
![[CSS] querySelector의 특수문자 이스케이프와 CSS.escape() 메서드 - CSS querySelector Special Character Escape](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/bR0KF6/btrWR79VPmG/ZI0W18nfwQ7fdIM76JGt50/img.jpg)
![[CSS 고급] mix-blend-mode CSS 속성으로 소수점 단위 별점 구현하기](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/FNM0M/btrGOWbUTw6/nim95ofMQejqgh89eKtZK1/img.jpg)
