profile
UX Engineer
post-thumbnail

Playwright v1.40.0 update

New tools to generate assertions, New APIs and Other Changes

2023년 11월 17일
·
0개의 댓글
·
post-thumbnail

Note) css rem/em 사용 안티패턴

디자이너가 글꼴을 14픽셀로 만들라고 하면 머릿속으로 10으로 나누고 1.4 rem을 입력하면 상대 단위를 계속 사용하면서 쉽게 계산할 수 있습니다. (참 쉽죠?)

2023년 11월 16일
·
0개의 댓글
·
post-thumbnail

Note) css 속성마다 값 나열 순서가 다른 이유

모서리에서 두 개의 측정값을 지정하는 속성으로 작업하는 경우 "직교 격자"를 생각하면 됩니다. 요소 주위의 각 변에 대한 측정값을 지정하는 속성으로 작업하는 경우 "시계"를 생각하면 됩니다.

2023년 11월 16일
·
0개의 댓글
·
post-thumbnail

Note) margin/padding 입력 순서 기억법

기억법은 우리나라만 쓰는 줄 알았는데, 해외도 쓴다.아래처럼 나열해서 값을 입력하는 css에 대해서, 그 순서를 외우는 법은 TRouBLe이다.순서가 기억안나는 트러블.. T RouB Le ... top right bottom left!TRouBLeTop > Righ

2023년 11월 16일
·
0개의 댓글
·
post-thumbnail

Note) css에서 상속을 활용하는 주요 프로퍼티

body 태그에서 한번 선언한 뒤, 하위 엘리먼트에서는 상속된 값으로 사용하는 게 좋을 속성들 입니다.어쩌면 웹페이지 통일성 관점에서 당연할 값들 입니다.color, font, font-family, font-size, font-weight, font-variant,

2023년 11월 15일
·
0개의 댓글
·
post-thumbnail

Note) css 인터랙션 스타일 기억법 "LoVe/HAte"

Pseudo 선택자는 명시도가 같습니다. 명시도에 대해 Pseudo 선택자를 쓸 땐, 선언 순서가 중요해집니다. 일반적인 케이스의 인터랙션 스타일링 시 LoVe / H Ate 순서로 선언해줍시다.

2023년 11월 15일
·
0개의 댓글
·
post-thumbnail

Note) pseudo-class selector의 명시도

Pseudo 클래스 선택자(예: `:hover`)와 attribute 선택자(예: `[type="input"]`)는 각각 클래스 선택자와 동일한 명시도(specificity)를 갖습니다.

2023년 11월 15일
·
0개의 댓글
·