Programming/HTML, CSS10

• 

  [MUI] select 요소의 border 없애기 MUI에는 select라는 요소가 있다. 클릭하면 아래로 선택 가능한 목록이 펼쳐지는 형태의 컴포넌트다. 그런데 이 요소의 border, 그러니까 기본 상태에서의 border와 활성화 되었을 때의 border 모두를 없애는 방법이 공식 문서에 구체적으로 나와 있지 않아서 stack overflow 등의 도움을 빌려야 했다. 이렇게 UI 프레임워크를 사용하면서 스타일링을 해야 하는 경우가 이전 프로젝트에서도 꽤 있었는데, 특히 border를 없애는 작업은 앞으로도 자주 활용될 것 같아 정리해 본다. 환경 - React - Material UI 코드 ( { if (selected.length === 0) { return 구분; } return orgType;}} > 유치원 대학교 기타 )} /> Programming/HTML, CSS 2022. 12. 13.

• [CSS] Flexbox 심화 - 반응형 웹 https://forgottenknowledge.tistory.com/m/entry/CSS-%ED%94%8C%EB%A0%89%EC%8A%A4-Flexbox-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9%EC%9D%84-%EC%9C%84%ED%95%B4 [CSS] 플렉스 Flexbox, 반응형 웹을 위해 반응형웹을 위한 플렉스(Flex) 플렉스(flex)는 크기가 다른 스크린에서도 왠만하면 정돈되서 보여준다. 반응형 웹을 만들기위해 기본이 되는 요소인것 같다. 사용법 display: flex; flex-direction 정렬 방 forgottenknowledge.tistory.com Programming/HTML, CSS 2022. 10. 27.

• 

  [Console] '디자인 모드' 적용법 디자인 모드란? 웹 브라우저에서 임시로 화면을 수정하는 기능을 말한다. Devtool에서 직접 코드를 수정하지 않고도 화면에 있는 텍스트를 바꾸거나 이미지를 옮겨보는 작업을 할 수 있다. 디자인 모드를 적용하면 빠르게 웹 화면을 조정할 수 있고, 손쉽게 각 구성 요소의 배치를 최적화할 수 있다. 디자인 모드 on/off 방법 document.designMode = "on" document.designMode = "off" Programming/HTML, CSS 2022. 8. 27.