Frontend

CSS 정리

단점이없어지고싶은개발자 2023. 9. 24. 23:03

회사에서 급하게 화면을 작업해야되는 시기가 있었다. 그래서 화면 UI/UX 화면을 작업하는 업무를 진행했고, react와 styled component로 화면 작업을 하는데 애를 먹은 기억이 있다. css를 공부하기에 앞서 꼭 공부를 따로 해야되나? '작업할 때 필요할 때, 구글링을 통해 진행하면 되지 않을까' 라는 생각을 했다. 하지만 막상 그 때가 오면 내가 원하는 기능에 대해 어렴풋이 알고있지 않다면 오히려 더 많은 시간을 잡아 먹는 일이 발생했다.

회고

UI/UX를 하면서 개인적으로 애를 먹었던 점이 2가지 있다.

1. 이미 font 색상이 #fff인 부분에서 배경을 #ffffff, opacity를 주었을 때, 색상도 #fff 즉 하얀색이여서, 글씨색과 배경색이 겹쳐져 안보이는 현상이 발생했다. 그랬을 때, rgba로 변경해서, rgba(red, green, blue, alpha)에 alpha 값을 이용해 색상을 조정해줬을 때, font 색상도 같이 보여지게 고쳐졌다. rgba 값도 같이 적절하게 수정해 해당 문제를 수정했다.

- opacity속성을 사용하면, 요서의 배경에 투명도를 모든 하위 요소가 동일하게 상속받게 된다. 이로 인해 완전히 투명한 요소 내부의 텍스트를 읽거 어렵게 만들 수 있다. 하지만 rgba를 사용하면, 하위 요소에 불투명도를 적용하지 않게 할 수 있다.

Note: When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read.

2. 해당 영역을 display: flex로 수정했고, width값도 적절하게 주었지만 한글 글씨가 세로로 나오는 문제가 발생했다. 부모 요소도 고쳐보고, 하다가 겨우겨우 css를 뒤지다가 white-space:nowrap 으로 바꾸고 나서 제대로 나왔다.

이처럼 CSS에 대한 지식이 나처럼 알량하게 있는 상태면 개발보다 다른 곳에서 시간을 많이 뺏기는 문제가 발생한다.

CSS에 대한 생각을 다시 다잡고 따로 강의를 듣거나, 어떻게 해야할까 고민을 하던 와중에 몇몇 사이트에서 무료로 이론과 튜토리얼을 해놓은 좋은 사이트들이 있어서 추천을 먼저 해보려 한다.

티스토리

CSS 정리

CSS 정리

회고

추천 사이트