일반적인 CSS에서는 url 속성을 다음과 같이 설정합니다..SomeStyle { background-image: url('./directory/to/the/image.svg');} 이를 React에서 사용하기 위한 JSX 형식으로 바꾸면 이렇게 될텐데요,const SomeStyle = { backgroundImage: "url('./directory/to/the/image.svg')"}; 실제로 이를 실행하면 정상적으로 동작하지 않습니다. 이는 React가 실행되는 방식과 관계가 있습니다. 우리가 작성한 JSX 코드는 프로젝트를 실행할 때 실행 가능한 JS 코드 형태로 변환됩니다.이 과정에서 파일의 위치 또한 달라질 수 있는데, 파일 경로 자체가 수정되거나 용량이 작은 파일인 경우 JS 코드에 포함..

JSX 문법을 사용해 CSS를 적용하는 방식은 HTML에서 CSS를 적용하는 방식과 유사합니다. 역시 다른 점이라고 한다면, JSX 문법으로 인해 생기는 HTML과의 차이점 정도라고 할 수 있겠습니다. [JSX에 대해서] JSX에서 style은 객체 형태로 넘겨줄 수 있어, style을 먼저 변수로 선언한 뒤 {중괄호}로 불러올 수 있습니다.CamelCase를 사용합니다(e.g. background-color → backgroundColor).스프레드 문법({..., })을 사용하면 클래스 상속과 같이 다른 스타일의 요소들을 사용할 수 있습니다.아래는 버튼에 스타일을 적용하는 코드입니다. 버튼의 공통된 스타일은 baseButtonStyle에, 색과 관련된 코드는 blueButtonStyle과 redBut..

선택자(Selector)는 마크업 언어에서 작성된 요소들 중 원하는 범위를 선택하는데 사용됩니다.선택자를 이용하면 원하는 요소들에 CSS 스타일을 적용할 수 있습니다. 선택자를 통해 특정 속성(property)을 원하는 값(value)로 설정하기 위해서는 다음과 같은 문법을 따릅니다.Selector { property : value }선택자범위*모두#cid 속성값이 c.cclass 속성값이 cE태그 이름이 EE FE의 하위 FE > FE의 자식 FE + FE 앞에 있는 F E : first-child 부모의 첫 자식인 E E : link E가 방문 안한 자원 E : visited E가 방문 한 자원 E : active E가 활성화 됐을 때 E : hover E 위에 마우스가 지나갈 때 E..

종속형 스타일 시트(Cascading Style Sheet, CSS)는 마크업 언어가 실제로 표현되는 스타일을 나타내는 스타일 시트 언어(Style Sheet Language)입니다. HTML과 같은 마크업 언어가 웹 문서의 내용을 정의하면, CSS를 통해 요소의 크기, 글자, 배경, 위치, 형태 등을 변형할 수 있습니다. 때문에 HTML 구조가 동일해도 CSS 파일이 다르다면 전혀 다른 웹사이트를 만들 수 있습니다. CSS는 HTML의 태그 안에서 정의되며, 외부 CSS 파일을 불러오거나 HTML 내부에서 직접 작성할 수도 있습니다. 내부에서 직접 작성할 때 : 외부 파일을 불러올 때 :