어제 보다 나은 나

회사에서 일하는데, 개발에서 어떤 요소가 클릭이 안된다는 제보가 들어왔다. 분명 개발자 도구에서 봤을 때 element는 존재하는데 실제로 클릭도 안되고, 요소 선택도 안되는 것이다! 처음보는 상황에 js로 선택을 막아 놨나 했더니 그런 코드는 또 안보인다. 도통 모르겠는 와중에 다른 컴포넌트들과 비교해 보다가 이런 css가 들어있는 것을 보았다. pointer-events: none; 오..처음 보는 css 코드인데 검색해보니 포인터 이벤트 대상이 될 지 선택할 수 있는 옵션이라고 한다. js도 문제 없는데 선택이 안되면 이 속성을 먼저 의심해봐야겠다.

페이지 작업을 하다보면, 요소의 크기나 폰트의 사이즈를 너비비례(vw,vh)의 단위로 주게된다. 근데, 만약에 사용자의 뷰포트가 엄청 크다면? 폰트에 vw를 줬는데 요소 컨테이너의 사이즈는 고정이라면? 내가 원하는 디자인이 나오지 않을 수 있다. 때문에 우리는 max-width같은 최대 너비를 혹은 min-width같은 최소 너비를 설정해주기도 한다. 이를 좀더 쉽게 할 수 있게 해주는 css 함수가 있다. 바로 min()함수와 max()함수이다. min()함수 예를 들어 레이아웃을 width:70%로 잡았을 때, 너비의 상한을 제한하기 위해서는 width: 70%; max-width: 800px 이런 식으로 속성을 주게되는데, 이를 min() 함수로 표현하게 되면, . width: min(70%,800..

css를 처음 배울 때. html의 요소를 정렬하려고 하면 float:left속성으로 정렬시키던 기억이 있다. 근데 이게 매우 손이 많이 갔었다. 띄워서 정렬하고 부모에 clearfix 주고.. 하지만 이젠 그럴 필요가 없다. 우리에겐 Flex가 있으니까! 1 2 3 4 이렇게 flex를 준 요소가 Flex container가 되고 그 부모 바로 아래 있는 요소들은 Flex Item이 됩니다. flex에서 연계되는 속성은 이 두 요소들과 관련이 있습니다. 즉 - Flex Container의 속성 - Flex Item의 속성 으로 나뉩니다. Flex Container의 속성 display:flex 속성은 내가 정렬하고 싶은 요소의 부모 요소에게 적용시킵니다. 그러면 flex-item의 요소들은 displa..