웹 프로그래밍/Blazor 범범조조 2022. 11. 16. 20:58
개요 Blazor 에서 Button 컴포넌트에 Enter Key 이벤트를 구현하는 방법에 대해서 정리 진행합니다. Keyboard Enter Key Event 구현 방법 Blazor 에서 Keyboard Enter Key Event 를 구현하는 방법은 구글링을 하면 여러 방법들이 나오게 됩니다. 여기서 저는 많은 사람들이 권장? 하는 방법으로 Enter Key 이벤트를 구현해 보았습니다. 제가 사용한 방법은, HTML 태그에서 form 태그를 사용한 방식입니다. form 태그를 사용하게 되면, form 태그 안에 있는 자식 요소 태그들의 키 이벤트를 브라우저가 작업을 수행해 줍니다. 해당 정보는 StackOverFlow 에서 찾은 내용입니다. 시나리오 그럼, 실제 Enter 키 이벤트가 정상적으로 동작하..
더 읽기
웹 프로그래밍/Blazor 범범조조 2022. 11. 16. 19:56
CSS 격리 Blazor 에서 Component 별로 CSS 를 격리 시킬 수 있습니다. Blazor 에서 같은 경로에 Component 와 이름이 같은 CSS 파일을 자동으로 Load 하여 Component 에 Scope CSS 로 적용시킵니다. CSS 격리 조건 CSS 격리를 하기 위해서는 Component 와 같은 경로에 존재해야 합니다. 또한, Component와 같은 파일명으로 작성되어야 합니다. 예시) LifeCycle.razor -> LifeCycle.razor.css 적용 결과 다음과 같이 나타납니다. Css의 영향을 받은 버튼은 Css Scope 내에 존재하는 Component이고 영향을 받지 않는 Component는 Scope 밖에 있는 Component 입니다.