상황 emotion 라이브러리를 사용해서 react개발을 할 때 위의 에러가 발생하면 css를 적용한 컴포넌트나 요소가 화면에 렌더링 되지 않는다. 에러 메세지 해석 에러 메세지를 해석해 보면 css function에 대입되는 객체를 직접 stringify 하지 말라는 내용이다. 나의 경우 css를 컴포넌트 body에 작성했는데 이 css가 return문의 중괄호 안으로 대입되면서 객체 형태가 된다. 지금의 경우는 직접 중괄호 안에 대입했기 때문에 오류가 발생한다. emotion 내부에서 처리를 해주어야 하기 때문이다. 해결 1. 태그 내부에 css 속성으로 잘 썼다면 /** @jsxImportSource @emotion/react */ 를 코드 맨 위에 추가하기 2. 혹시 className 혹은 sty..

프로젝트를 하던 중 input 태그에 위와 같은 스타일을 적용하고 focus 되었을 때 border의 색을 바꿔주고 싶어 focus 가상 클래스에 아래와 같이 border를 바꾸어 주었다. 그런데 이렇게 적용이 안되고 까만색으로 표시된다. 문제를 찾기 위해 개발자도구를 켰지만.. 개발자 도구 상으로는 잘 적용됐다고 나온다..!!ㅋㅋㅋ 저번에는 배경 색을 변화시킬 때 background-color 대신 background를 사용했더니 잘 적용된 기억이 있어서 혹시 border 대신 사용되는 속성이 있는지 찾아보았다. 구글링 해보니 outline이라는 속성을 찾을 수 있었다. 따라서 border 대신 outline을 사용해서 구현해 보았다. 구현은 잘 되는데 과연 border과 outline을 바꿔서 사용해..

position 은 부모 요소 내의 자식 요소에 부여해 자식 요소의 위치를 결정하는 방법이다. position으로 줄 수 있는 속성은 다음의 5가지가 있다. static html에서 기본적으로 나에게 부여하는 위치. 블록 요소라면 위에서 아래로, inline 요소라면 한국어 쓰는 순서대로 배치된다. relative 원래 나의 static 위치를 기준으로 움직인다. 원래 내가 있던 공간은 그대로 비워져 있다. (특별히 다른 요소를 조작하지 않는 한 다른 요소는 침범하지 않는다.) 따로 left, right, top, bottom 값 중 하나도 주지 않으면 static 자리에 그대로 존재한다. relative를 부여하면 요소가 붕 뜨게 된다. 포토샵을 해 보았다면 포토샵에서 레이어 하나를 위에 더 생성해 거..

css에서 스타일을 작성했는데 적용이 안 되는 경험, 다들 한 번씩 있으시죠? css의 스타일 적용 우선순위를 고려하지 않을 경우 이런 문제가 발생할 수 있습니다. 오늘은 css cascading에 대해 알아보겠습니다. cascade란 cascade는 작은 폭포를 뜻합니다. 즉 여러 단계가 존재하는 대상이나 현상을 말할 때 사용됩니다. CSS에서는 규칙이 우선순위 순서대로 적용됩니다. 이를 cascade, cascading이라고 합니다. cascading은 세 가지 주요 기준에 의해 결정됩니다. 1. 중요도 (importance) 2. 특정도 (specificity) 3. 소스 순서 (source order) 중요도 해당 스타일이 얼마나 중요한지를 나타내는 요소로 다음의 순서를 따릅니다. 번호가 작을수록..

html은 태그의 문법에 를 쓰다 보니 텍스트 내부에 등의 내용을 넣고 싶을 때는 주의애향 합니다. 안녕하세요! 태그는 제목을 쓸 때 사용합니다. 태그로 닫아줍니다. 이렇게 작성하면 을 태그로 인식하기 때문에 원치 않게 과 사이 글자가 크게 작성될겁니다. 따라서목적대로 작성하고 싶다면 를 사용해야 합니다. 안녕하세요! 태그는 제목을 쓸 때 사용합니다. 태그로 닫아줍니다. 이렇게 작성하면 원하는대로 text를 띄울 수 있습니다.