Dr.Mlem Blog

10-05 css_module의 index.js에서Q1.다중 클래스 적용(1) - 역따옴표 사용다중 클래스 적용(2) - 배열로 구성한 후 join 함수로 결합 이 구문에서, myStyles['my-size'] 이렇게 접근하는건 어째서야?   A1.네, myStyles는 CSS 모듈을 통해 가져온 클래스 이름들을 포함한 객체입니다. 'my-size'와 같이 클래스 이름에 하이픈(-)이 포함되어 있으면 점 표기법(myStyles.my-size)을 사용할 수 없으므로, 대괄호 표기법인 myStyles['my-size']를 사용하여 접근합니다.   Q2.저게 Json 객체에 접근하는 방식인가?   A2.네, myStyles['my-size']는 JavaScript 객체의 속성에 대괄호 표기법으로 접근하는 방식..

10-05 styled_component/index.js에서, Q1.const MyGridContainer = styled.ul` /** SCSS 코딩 진행 */ list-style: none; padding: 0; margin: 0; width:1024px; border: 5px solid #cc0; padding: 10px; display: flex; flex-direction: row; flex-wrap: wrap;`; 이건 CSS 속성이 정해진 ul 태그를 만드는거야?   A1.네, 이 코드는 지정된 CSS 속성을 가진 ul 태그를 생성합니다.   Q2.const MyGridItem = styled.li`CSS 속성값들`; 이렇게 하면, 해당 ..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

이렇게 여러 메뉴 중에 커서를 올려서 "제품 정보" 메뉴를 연 뒤, 열린 "제품 정보" 메뉴에 커서를 올리면 또 연필부터 여러가지의 제품들이 나오게 하는 것은 어떻게 해?ChatGPT said:ChatGPT이미지에서 설명된 것처럼 "제품 정보" 메뉴에 커서를 올렸을 때, 하위 메뉴가 나타나도록 구현하려면 HTML, CSS, 그리고 JavaScript를 결합하여 멀티 레벨 드롭다운 메뉴를 만들 수 있습니다.다음은 그 방법을 설명하는 기본적인 코드입니다.1. HTML 구조html                            제품                                      제품 사용법                     드로잉팁                     제품 정보  ..

**border-collapse**는 CSS 속성으로, HTML 테이블 요소에서 인접한 셀들의 테두리를 어떻게 처리할지 결정하는 데 사용됩니다. 이 속성은 특히 테이블을 더 깔끔하게 표현하고, 셀 간의 경계를 관리하기 위해 사용됩니다.border-collapse 속성의 역할border-collapse는 테이블의 셀 테두리를 결합할지(collapse) 또는 분리할지(separate)를 설정합니다.사용 가능한 값collapse (기본값 없음, 대부분의 브라우저에서 초기값으로 설정됨)역할: 테이블 셀의 테두리를 결합하여 단일 테두리로 표시합니다.효과:인접한 셀 간의 테두리가 하나로 합쳐집니다.셀과 셀 사이에 공백이 사라집니다.예시:table { border-collapse: collapse;}결과: 모든..

CSS box-sizing 속성: 박스 모델 크기 계산 방식 설정box-sizing 속성은 CSS에서 요소의 너비와 높이를 계산하는 방식을 지정합니다. 즉, width 및 height 속성 값에 padding, border, margin 값을 포함할지 여부를 결정합니다.속성 값content-box (기본값):width 및 height 속성은 콘텐츠 영역의 크기만 나타냅니다.padding, border, margin은 요소의 전체 크기에 추가되어 계산됩니다.즉, width: 100px; padding: 10px; border: 5px;인 요소의 실제 너비는 120px (100px + 10px * 2 + 5px * 2)가 됩니다.border-box:width 및 height 속성은 콘텐츠 영역, paddin..

이러니 안되었던거지...