오늘의 CODE

긴 설명은 필요 없다.:empty 가상 클래스는 자식이 전혀 없는 요소에 적용하는 선택자이다. 요소 안에 주석이 있어도 가능하다.하지만, 공백이 있으면 적용되지 않으므로 주의해야 한다. p:empty { color: red; }

문제. 노치라는 영역은 웹뷰에서는 문제없이 노출되지만 아이폰으로 확인 시 가려지거나 짤려보이는 현상을 말한다. 노치는 다른 표현으로 안전영역(safe Area)라고 할 수 있다. 아이폰 화면의 레이아웃이 변경되면서 생긴 문제로 X버전부터 이런 문제가 발생하기 시작했다. 해결. 1. 전체 화면 설정 meta 태그를 추가한다. viewport-fit이란? viewport에 새로 추가된 속성으로 단순한 사각형 모양의 디스플레이가 아닌 디스플레이를 위한 속성이다. vieport-fit을 지정하지 않으면 기본값은 auto로 콘텐츠를 모두 보여줄 수 있도로 콘텐츠를 축소하여 보여준다. viewport-fit을 위와 같이 cover로 지정 시 viewport를 스크린 전체로 확대한다. 아이폰X가 나오면서 단순히 네모..

will-change: 값이 변경될 속성에 대한 힌트 웹이 동적으로 상호작용하는 복잡한 어플리케이션을 위한 플랫폼으로 진화함에 따라 transform, opacity 등 css 속성 값이 동적으로 변화하는 효과를 자주 사용한다. 이때, will-change는 브라우저에게 엘리먼트의 어떤 속성이 높은 확률로 변할 것인지 힌트를 줄 수 있다. 브라우저는 이 힌트로 앞으로 일어날 변화에 대해 미리 대비해 더 매끄러운 트랜지션을 구사할 수 있다. will-chagne: auto; // 기본값 will-chagne: scroll-position; // 엘리먼트의 스크롤 위치가 바뀜 will-chagne: contents; // 엘리먼트의 컨텐츠 중 일부가 바뀜 // 특정 css 속성을 명시할 수 있음. // tr..

list-style-position: 리스트 마커 위치 지정 리스트 아이템 앞에 오는 리스트 마커는 기본적으로 li 태그 바깥에 위치한다. list-style-position의 값을 inside로 줘서 마커가 li 태그 안으로 들어오도록 설정할 수 있다. list-style-position: inside; // 마커가 li 태그 안에 위치 list-style-position: outside; // 마커가 li 태그 바깥에 위치

overflow-wrap: 오버플로우가 일어날 경우 줄바꿈 처리 word-break: keep-all(단어 단위로 줄바꿈이 일어남) 과 함께 overflow-wrap: break-word를 사용할 경우, 오버플로우가 일어났을 때 문자 단위로 줄바꿈이 생기도록 설정할 수 있다. overflow-wrap: normal; // 기본값 overflow-wrap: break-wrap; // 오버플로우가 일어나면 단어를 문자로 쪼개서 줄 바꿈 단어 단위로 줄바꿈이 발생했을 때 어색하게 들쭉날쭉하던 문단의 끝을 정리할 수 있다.

user-select: 텍스트 선택, 드래그 설정 user-select는 사용자가 텍스트를 선택할 수 있는지를 지정할 수 있다. 좀 더 자세히 말하면 텍스트를 더블클릭하거나 드래그했을 때 동작을 설정할 수 있다. user-select: auto; // 더블클릭, 드래그 시 선택됨 user-select: text; // 더블클릭, 드래그 시 선택됨(auto와 동일한 값) user-select: none; // 클릭, 드래그 불가 user-select: all; // 클릭 한번으로 전체 텍스트가 선택됨

touch-action: 브라우저에게 맡길 터치 액션 지정 기본적으로 터치 이벤트의 처리는 브라우저가 담당하는 영역이지만 touch-action 속성을 통해 어떤 요소 내 브라우저가 처리할 터치 액션 목록을 지정할 수 있다. 표준 터치 제스처로는 터치를 사용한 스크롤(paging)과 확대/축소(pinch zoom)이 있으며, 브라우저에 따라 더블 탭으로 확대 등 표준이 아닌 제스처를 지원하는 경우도 있다. touch-action: auto를 사용할 경우를 제외하고, 명시해준 속성의 터치 액션만이 브라우저에 의해 처리된다. 예를 들어, touch-action: pinch-zoom 속성을 갖는 엘리먼트에서는 터치를 사용한 스크롤이 (자바스크립트로 별도 처리해주지 않는 이상) 무시된다. touch-action..

animation이 1초 동안 진행이 되지만 반복되기 전 4초 정도의 딜레이를 주고 싶다고 가정해보자. 말로는 쉽지만 하려고 하니까 참 생각처럼 되지 않았다. animation-delay라는 속성이 있지만 이 속성은 animation이 처음 시작하기 전 딜레이를 주는 속성으로 내가 원하는 효과에는 도움이 되지 않았다. Solution. animation: shinig 5s infinite; animtion의 during 시간을 5초로 설정한 후 keyframe에서 4초동안 아무 움직임이 없도록 하는 편법을 사용했다. @keyframes shinig { 0% { // 아무 움직임 없음. } 80% { // 내가 원하는 값을 입력 } 100% { // 내가 원하는 값을 입력 } } 내가 너무 허술하게 설명하..

button { &:first-child { &:nth-last-child(1) { width: 100%; border-radius: 5px; } } } *nth-last-child() 형제 그룹에서 제일 마지막 요소부터 순서를 매기는 패턴으로 nth-child와 쓰임은 유사함. 프로젝트를 진행하다보면 하나의 요소 안에 한개의 자식 컨텐츠가 들어갈 때도, 두개의 컨텐츠가 들어갈 때도 있다. 한개 한개를 다 잡아주는 것도 맞는 방법이지만, 뭔가 최대한 깔끔한 코드를 만들어보려고 발악중 scss의 조건문보다는 위처럼 적용하는게 훨씬 간결해질것같아서 사용해봤다~ 아직 저 상태로 사용 시 생길 버그에 대해서는 검증 전이므로 확인 후 사용할 것

vue 프로젝트 진행 시 다양한 프레임워크나 컴포넌트를 사양하게 됩니다. 자식 컴포넌트에 원하는 css 를 적용하고 싶은데 그게 안될때 딥셀렉터를 사용합니다. !! 자식 컴포넌트의 css에 쉽게 접근되지 않는 이유 웹컴포넌트의 스타일 캡슐화 때문!! 현재 컴포넌트에 적용된 css(scss)가 현재의 컴포넌트에만 적용되고 다른 컴포넌트에는 적용되지 않도록 하기 위한 특성때문이라고 생각하면 됨. scoped를 유지하면서 자식 컴포넌트에 css 적용하기 위의 세가지 방법으로 적용하면 모두 동일하게 아래와 같이 컴파일 되면서 자식 컴포넌트까지 접근이 가능하게 됨. .a[data-v-f3f3eg9] .b {/*...*/} 단, 첫번째와 두번째 방법은 css에서는 문제가 없으나 scss, sass, less 같은 ..