web/css9 상태값에 따라 modal 노출하기 -프로세스-> 로그인 버튼 클릭시 모달 노출 -> Google클릭시 로그인으로 상태변경 (menu 노출, logout 문구 노출) 2025. 12. 14. html요소에 동적 클래스 적용하기 로그인 여부에 따라서 munu 영역을 노출하려고 한다. 위와 같이만 적용했을때는 menu 컴포넌트는 사라지지만 menu 컴포넌트가 있던 영역은 아직 그대로 있다. 질의 grid의 설정을 변경해 주어야 한다고 한다. 기본 css로그인을 하지 않았을때의 css 나는 컴포넌트자체를 보이지 않게할것이므로 생략 로그인을 하지 않았을때의 css 클래스 를 하나더 생성 프로젝트에서는 css 클래스를 module 형식으로 가져와서 사용하고 있으므로 위와 같이 설정 프로젝트 코드 로그인을 하지 않았을때 로그인을 했을때는 menu가 노출이 된다. 2025. 12. 14. grid 사용법 grid를 사용하고 있으나 의도한 대로 레이아웃이형성되지 않는중 질의 응답 grid의 item에서 직접 height와 width를 설정하지 말라고 한다. 채팅창 구현시 참고이런식으로 item에서 직접 값 입력 금지 2025. 12. 14. grid를 viewport 전체에서 사용하기 css를 수정하다가 header와 content 사이에 공백이 생겼다. html, root를 포함해 모든 부모요소의 height와 width를 100%로 설정해 주었는데도 공백이 나타나는 현상 발생 grid-template-rows 값 추가와 height값 수정이 필요하다고 한다. 응답 최상위 grid는 화면 전체를 사용할 것이므로 viewport를 기준으로 height를 설정하라고 한다. 레이아웃은 다시 잡혔다. 2025. 12. 14. 부모컴포넌트와 viewport 자식요소가 부모요소밖으로 나간상태부모요소는 grid이고 자식 요소도 grid이다. vw는 viewport를 기준으로 하기 때문이라고 한다. (viewport는 현재 사용자가 보는 화면을 의미) %혹은 fr을 사용하여 자식요소가 부모요소 영역의 안에만 머무르도록 수정 2025. 12. 13. chatbot - 4 (backdrop) login 및 register팝업을 띄우기 위한 backdrop index.html의 root기준이되는 요소로 설정 backdrop의 형제 요소의 z-index backdrop의 z-index온전하게 형제 요소위에 생성이 되지 않는다. 형제 요소위에 이런식으로 생성이된다. (정확히는 형제요소 뒤에 위치하는것이 맞다) 먼저 있는 형제의 stacking context가 높기 때문 backdrop을 가장 위로 위치 backdrop을 가장 상단에 위치 2025. 12. 12. chatbot - 3 (ui, header) header 영역에 HeaderArea 컴포넌트를 임포트하여서 사용 logo, 중간공백, 사용자 정보 영역으로 구성 버튼은 추후 component로 import해서 사용 전체 컴포넌트 grid 사용자 정보 grid 버튼은 기본 css 효과를 제거하고 사용 2025. 12. 12. chatbot - 2(동적 ui) 로그인이 되지 않았을때는 채팅방을 선택할수 없도록 하려고 한다. grid의 설정을 auto 1fr로 해주고 content div는 100vw 로 넓이를 설정해 주어서 menu 요소가 없을때는 전체 남은 화면 전체를 사용할수 있도록 설정 menu 요소가 있을때 menu 요소가 없을때 content 요소가 menu 요소의 공간을 차지했다. 2025. 12. 12. chatbot - 1 (ui) header, menu, content의 영역을 크게 위와 같이 나누고 class는 moduel로 임포트 해서 사용 module로 되어있는 클래스 파일 module파일 안의 css큰 틀은 grid를 사용 참고자료 https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_layout_named W3Schools online HTML editorThe W3Schools online code editor allows you to edit code and view the result in your browserwww.w3schools.com 2025. 12. 12. 이전 1 다음
