leeda-cloud

css작성 시 자주 사용하고 있는 flex! flex를 처음 접했을 때는 어리버리 했는데 지금은 여기저기 유용하게 잘 사용 중이다. 그런 의미에서 복습 겸 정리를 해보자! 일단 flex는 mdn에서 정의하기를 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이라고 한다. 하지만 글로는 잘 이해가지 않는 법! 실제로 예제를 통해 적용해보자. 일단 flex를 사용할 html 구조를 만들어준다. flex 관련 html 구조 예제 1 2 3 4 5 flex-container : 컨테이너 flex-item : 아이템 html을 살펴보면 아이템 5개를 컨테이너가 감싸고 있는 형식이며, 아직 스타일도 적용하지 않아 아래 이미지처럼 나열되어 보인다. 여기..

SVG SVG의 장점 SVG 이미지는 확대 축소 시에도 깨지지 않는다. 애니메이션을 추가할 수 있다. 용량이 적어 빠르다. SVG의 단점 IE 하위에서는 작동하지 않는다. 복잡한 svg를 구현 시 속도가 저하된다. width, height, viewBox svg 크기는 width와 height로 조정 가능하며, viewBox를 이용해 svg의 기준점과 배율을 정할 수 있다. viewBox = "min-x, min-y, width, height"를 의미하며 아래처럼 작성 시 ! 화면에 이런 식으로 나오는 걸 볼 수 있다. TEXT (fill, stroke, stroke-width, stroke-dasharray) SVG 요소는 텍스트로 구성된 그래픽 요소를 그린다 My cat is Grumpy! 위처럼 입..

background-attachment:fixed를 사용해 모바일에서 확인해 본 결과 모바일에서는 작동하지 않거나 버벅인다. 이를 잡기 위해서는 clip-path를 이용해야 한다. clip-path는 클리핑 마스크로써 다양한 모양을 만들 수 있다. 하지만 브라우저 호환성은 한번 알아만 두자. https://caniuse.com/?search=clip-path "clip-path" | Can I use... Support tables for HTML5, CSS3, etc CSS Masks Method of displaying part of an element, using a selected image as a mask caniuse.com html css .bg-fixed { position: relati..

이 css는 비표준이지만 모바일에서 많이 사용한다. 모바일에서 링크를 클릭시 해당 부분이 영역이 잡히는 것이 보이는데 이런 부분을 투명으로 만들고 싶을 때 아래처럼 많이 사용한다. -webkit-tap-highlight-color: transparent; /* for removing the highlight */ 투명이 아니라 다른 색상으로도 표현할 수 있다. -webkit-tap-highlight-color: red;

이런 식으로 video 태그를 사용한 뒤 테스트를 해봤는데 아이폰에서만 작동이 되지 않는다. 찾아보니까 muted 기능을 넣으라는 말이 있는데 나 같은 경우는 그걸 넣어도 전혀 재생되지 않았다. 그래서 찾아본 결과! https://medium.com/code-divoire/autoplaying-inline-videos-on-iphone-ios-10-using-angular-d4e2ea ba2164 Autoplaying inline videos on iPhone iOS 10 using Angular Starting with iOS 10, Safari on mobile (iPhone and iPad) started allowing developers to autoplay videos inline provid..

SASS는 CSS의 한계나 단점을 보완하기 위해 만들어진 CSS 확장 언어로 CSS 전처리기이다. SASS 는 SASS 와 SCSS로 두 가지로 나누어지는데 SCSS가 CSS와 조금 더 유사한 형식을 가졌다. /* .css */ nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } /* .sass */ nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px..

css를 쓰다보면 height: 100% 가 생각보다 정확하게 작동하지 않는다는 걸 깨닫는다. 그래서 vw,vh(viewport 기준 단위)가 나왔을 때 잘 사용했지만 이 역시 모바일에서 완벽한 높이를 불러오지 않는다. 왜냐하면 모바일 브라우저에서 가지는 주소창 높이나 혹은 아래 버튼 영역의 높이가 있기 때문이다. 이런 부분까지 고려해 height값을 가지고 와야만 한다. 먼저 JS에 이렇게 css의 변수를 설정한다. let vh = window.innerHeight * 0.01 document.documentElement.style.setProperty('--vh', `${vh}px`) 그 후 css에 이런 식으로 적용하면 된다. .my-element { height: 100vh; /* css var(..

작업을 하다 보면 스크롤 div 안에 스크롤 div가 또 들어있는 경우가 있다. HTML 삽입 미리보기할 수 없는 소스 여기서 문제는 안에 있는 div에서 스크롤이 끝나면 다음에는 자동으로 바깥에 있는 div의 스크롤이 이어진다는 것이다. 이걸 스크롤 체이닝이라 말하는데 가끔 이런 기능이 불필요할 때가 있는데 그때 쓸 수 있는 것이 overscroll-behavior-y 이다. overscroll-behavior-y: contain; 이걸 추가하면 스크롤이 자동으로 넘어가지 않는다. HTML 삽입 미리보기할 수 없는 소스 그 밖의 auto나 none도 있는데 auto 를 쓰면 원래처럼 스크롤이 작동하고 none 을 쓰면 인접한 곳에서만 스크롤이 이어지지 않는다.

HTML에서는 특수문자가 포함된 텍스트가 있을 경우, 이것이 코드인지 그냥 텍스트인지 구분하지 못한다. 그래서 필요한 것이 유니코드인데 여러가지가 있다. 자주 사용하는 특수문자표 특수문자 유니코드 & & > " " ' ' # # ; ; (공백, space) ^ ^ 위의 것들을 제외하고도 다양한 유니코드가 있다. 예를 들면 아래와 같다. 특수문자 유니코드 ← ← ↑ ↑ → → ↓ ↓ ↔ ↔ 이런 화살표도 표현이 가능한데 더 자세히 알아보고 싶다면 아래 링크로 들어가서 구경해보는 것도 재미있다. https://www.w3schools.com/charsets/ref_utf_basic_latin.asp(기본) HTML Unicode UTF-8 W3Schools offers fre..