CSS

    Shadow DOM - DOM을 캡슐화 하자!

    Shadow DOM이란? 웹 페이지의 DOM 트리 안에 또 다른 독립되는 DOM 트리를 생성하는 방식입니다. Shadow DOM을 이용하면 웹 페이지 내의 요소들을 잘 캡슐화하여 외부에서의 접근 제한하고, 컴포넌트 간의 의존성을 관리할 수 있습니다. 우리가 많이 사용하는 input, button, video.. 등등 html 요소들이 shadow DOM으로 만들어진 요소들입니다. 이런 요소는 이미 기능, 동작, 모양, 스타일 등등 이미 만들어져 있는 템플릿이라고 볼 수 있습니다. 많은 div, span 등 그리고 내부 스크립트와 스타일 등을 결합하여 캡슐화하면 이렇게 shadow DOM을 만들 수 있습니다. 기본으로 제공하는 이런 html 요소 뿐만 아니라, 우리도 shadow DOM을 만들 수 있습니다..

    [CSS] 틀에 맞추는 스크롤 스냅 만들기 - Scroll Snap

    위의 애니메이션처럼 스크롤 하면 틀에 맞게 스크롤 되는 것을 스크롤 스냅 (Scroll Snap) 이라고 합니다. 이 스크롤 스냅도 자바스크립트 없이 오직 CSS로 만들 수 있습니다. 코드 .scroll-box.horizon { flex-direction: row; overflow: auto hidden; scroll-snap-type: x mandatory; } .scroll-box.vertical { flex-direction: column; overflow: hidden auto; scroll-snap-type: y mandatory; } .item { scroll-snap-align: start; min-width: 100%; } 위의 코드중 .scroll-box가 부모 element이며 .ite..

    [CSS] 문장 맨 앞 글자 크게 만들기 - Drop Cap 만들기

    위와 같이 문단 가장 앞의 글자를 크게 써 두는 것을 Drop Cap 이라고 합니다. CSS에서 위와 같은 Drop Cap을 만드는 방법은 아주 쉽습니다. .drop-cap-text::first-letter { margin-right: 10px; font-size: xx-large; font-weight: bold; float: left; } 클래스명 뒤에 ::first-letter를 넣는 것이 핵심입니다. 그러면 맨 앞의 글자 하나만 CSS 속성의 대상이 됩니다. See the Pen drop cap by wooncloud (@wooncloud) on CodePen.

    [CSS] 잘라낸 텍스트 만들기 / Cut out Text

    위의 사진과 같은 텍스트를 컷아웃(Cut out) 텍스트라고 합니다. CSS로 위와 같은 효과를 만드는 방법을 알아보겠습니다. .cut-out-text { mix-blend-mode: screen; } 가장 중요한건 mix-blend-mode: screen; 입니다. 텍스트에 배경을 믹스할 때 이러한 속성을 사용합니다. screen은 이미지 합성 방식입니다. 포토샵을 잘 다루고 익숙하신 분들은 아시겠지만, 속성이 많습니다. 이 부분은 차후 다루겠습니다. 그라디언트 배경 See the Pen Cut Out Text by wooncloud (@wooncloud) on CodePen. 사진 배경 See the Pen Cut Out Text2 by wooncloud (@wooncloud) on CodePen.

    [CSS] background에 fade color 넣기

    개요 이번 CSS 코드는 이렇게 카드에 배경화면을 넣고 linear-gradient를 넣어 페이드 효과를 주는 방법입니다. background shortcut을 사용하여 1. 그라디언트 2. 이미지 url 순서로 넣어서 효과를 완성할 수 있습니다. .card-fade-bg-right { background: linear-gradient(to right, #000F, #0000), url('image url'); } .card-fade-bg-left { background: linear-gradient(to left, #000F, #0000), url('image url'); } .card-fade-bg-top { background: linear-gradient(to top, #000F, #0000), ..

    [CSS] 긴 글자를 Fade Out으로 숨기는 CSS

    See the Pen long text fade out by wooncloud (@wooncloud) on CodePen.

    [CSS] CSS 텍스트 줄이기 ... 표시

    제목만으로 어떤 말인지 알기가 힘든데 그림으로 어떤 내용을 포스팅할지 보여드리겠습니다. 게시판이나 리스트의 제목을 줄이는 방법입니다. 엄청나게 긴 글을 게시판 리스트에 표시한다면 제목이 칸 밖으로 넘어가거나 줄 바꿈이 됩니다. 공간의 크기를 늘려서 보기 싫게 만드는 모습. 바꾸고 싶으실 겁니다. 어떻게 바꾸시겠습니까? 자바스크립트로 for문으로 DOM탐색해서 제목 요소를 하나하나 선택하고 특정 글자 수까지 표현하실 건가요? CSS를 이용해서 클래스 하나만 추가하면 일괄적으로 쉽게 변경할 수 있습니다. 방법 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; CSS의 class에 위의 코드를 입력하는 것이 키워드입니다. 위의 코드가 모두 있어야..

    [HTML] 웹 컬러 도구 사이트

    CSS로 웹을 디자인하면 색감에 대해 고민을 많이 하게 됩니다. 어떤 색이 예쁜 색인지, 어떤 색이 잘 보이는 색인지 잘 모를 때가 많습니다. 이번에 소개할 사이트 3가지는 html의 네임드컬러, RGB코드, Hex코드, Hsl코드 등 쉽게 정보를 얻을 수 있고, 색 선택에 도움을 주는 사이트입니다. ✅ 이 포스팅은 더 좋은 정보가 있으면 갱신하는 사이트입니다. 만약 소개드린 사이트 이외 좋은 내용 있어서 덧글로 알려주신다면 감사드립니다. w3schools HTML Color Picker www.w3schools.com/colors/colors_picker.asp HTML Color Picker Selected Color: Black Text Shadow White Text Shadow www.w3sch..

    [CSS 프레임워크] CSS 프레임워크 모음

    1. bootstrap bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크. 프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드 bootstrapk.com getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life ..