틈

대형 사이트에서 작업할 때, 여러가지 변수가 많은데,그 중에 'DOM 간 간격을 어떻게 처리할 것인가?' 가 최근 이슈가 되어 정리해본다. 지금 작업하는 화면은 마크업 변경을 최소화해야 하는 프로젝트이다.또한 잘못된 코드도 안고 가야 하는 문제가 있어, CSS로 80% 이상 커버해야 한다.이미 12년에 육박하는 2500페이지의 레거시.이전에는 있는 줄도 몰랐던 :has 선택자, [class*=클래스] 같은 속성 선택자를 비롯하여!important가 난무하는 무서운 프로젝트이다. 작은 사이트의 경우 DOM과 DOM이 만날 때여백은 크게 문제가 되지 않는다.그냥 적당히 처리해도 된다. 그런데 10페이지 이상, 100 페이지 이상, 1000페이지 이상의 화면은 어떨까?규칙이 잘 적립되고, 그 규칙에 맞추어 작..

div를 textarea처럼 사용가능합니다. HTML 삽입 미리보기할 수 없는 소스 여기 편집 가능

1. display:grid,inline-grid 2.grid-template-rows,grid-template-rows (-ms-grid-rows, -ms-grid-columns, 그리드 사이즈 관련) : none : grid 시스템 없음. auto : 사이즈를 정한 부분을 제외한 나머지 부분을 채운다. max-content : 각 row 에서 가장 큰 item을 기준 min-content : 각 row에서 가장 작은 item 기준 fr(단위) : 1fr,1.5fr,2fr.... 등으로 응용하며 fr로 지정된 모든 단위를 더한뒤 각 fr의 숫자만큼 비율적으로 너비를 부여 repeat() : repeat(3,1fr) 등으로 사용. 1fr 3번 반복.repeat(3, 1fr 2fr 3fr) 으로도 사용 가..

iphone-x는 M자 탈모로 유명한데, 이 화면에서는 위/아래 자동 마진값이 잡혀 화면 대응이 어려울 수 있다. 전체 화면을 원한다면 해당 조치가 필요하다. (네비게이션, 혹은 header menu 영역과 겹치지 않게 조치할 수 있다.) 1. viewport 추가 2. env() 적용 - 해당 코드는 iphone-x에서만 대응합니다. .wrap { padding-top:calc(constant(safe-area-inset-top) + 15px); padding-bottom:calc(constant(safe-area-inset-bottom) + 15px) } https://wit.nts-corp.com/2019/10/24/5731 아이폰X 안전영역(Safe Area) 대응 사례 | WIT블로그 Safe ..

html {-webkit-text-size-adjust:100%;} [모바일] 특정 device에서 글자가 크게 보이는 경우. 비표준 속성이므로 벤더 프리픽스 사용 * {text-decoration-skip-ink:auto;} 위 아래 높낮이가 있는 글자에 밑줄을 그을 때 아래로 내려오는 글자를 무시하고 선을 그을 것인가(none), 아래로 내려오는 글자를 피해서 선을 그을 것인가(auto) *{-webkit-tap-highlight-color:transparent;} 해당 요소에 focusing이 될 때, 하이라이트 색상 비표준 속성이므로 벤더 프리픽스 사용 .ellipsis { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertica..

e.preventDefault()의 기능을 css로 해결할 수 있는 속성 클릭이 가능한 태그의 이벤트를 막아줄 수 있다. pointer-events: auto; pointer-events: none; svg 에 대한 추가 속성도 있다! 더보기+