안녕하세요

테이블 html 태그와 css를 정리합니다. 인라인 스타일의 문제점 {} === {}는 false이기 때문에, 리렌더링시에 인라인 스타일이 적용된 컴포넌트 / 일반태그가 다르다고 판단하여 돔을 새로 그리게 되어 불피요한 리로딩이 발생 style 속성의 재사용성이 떨어짐 [ 출처 ] 컬럼의 width에는 인라인 스타일을 적용하여 코드를 읽기 쉽게 하려고 했으나 리액트에서는 인라인스타일을 추천하지 않는다고 합니다. 하지만 인라인스타일을 함수로 만들어 전달을 하게되면 이 문제가 해결됩니다. const Table = () => { const colWidth = (px) => { const style = { width: `${px}px`, }; return ; }; 테이블 태그로 감싸는걸로 시작합니다. 태그에는 ..

탭메뉴의 컨텐츠들을 컴포넌트로 만들어 스토어 페이지 첫 화면에 모두 볼 수 있도록 합니다. "더보기"를 누르면 해당 컨텐츠의 탭으로이동합니다. 현재 메가티켓 탭의 경우에는 5개 이상의 컨텐츠가 있는데, 본 페이지에서는 4개까지만 표시하기위해서서 컴포넌트에 props로 숫자 4를 전달합니다. 삼항연산자를 이용하여 num !== 4에 해당하는 경우엔 전체 리스트를 나타나도록 하고, 그렇지 않은 경우에는 리스트를 4개만 나타나도록 합니다. {num !== 4 ? ( 전체 {MEGAPICKDATA.length}건 ) : ( "" )} 다른 페이지에서도 같은 방식으로 삼항연산자를 이용해 조건에 따라서 전체 몇 건의 리스트가 있는지 나타나도록 합니다. {num !== 4 ? ( 전체 {MEGAPICKDATA.len..

프랜차이즈 주제입니다. 제과를 선택했습니다. [ 220811 ops 웹코딩 ] [ html / css / js ] flex-wrap: wrap; Flex 아이템이 Flex 컨테이너의 끝에 닿으면 줄 바꿈합니다. flex-wrap: nowrap; 줄 바꿈하지 않습니다. 한줄로 표시합니다. 초기 값입니다. flex-wrap: wrap-reverse; 줄바꿈을 하며 순서를 반대로 배치합니다. table을 만드는 방법입니다. # 구분 가격 1 오뎅 1억 .SubContent .table01 { width: 100%; line-height: 40px; border-top: 2px solid var(--mc); text-align: center; } .SubContent .table01 tr { border-bot..

구매하기 버튼은 클라이언트마다 다르지만 중요하기 때문에 강조되어 있는 것을 좋아하기도 합니다. 너무 눈에 띄지 않는 것은 안됩니다. 호버로 이미지를 다 덮어서 제품을 보이지 않도록 하는 것은 권장하지 않습니다. logo는 무슨 일이 있어도 훼손하면 안됩니다. 텍스트는 가능하면 마름모꼴을 만들도록 합니다. 따옴표는 이쁜 폰트를 따로 적용하는 것도 좋습니다. 마우스를 가져다 대야 나타나는 것 보다는 최초에 다 보이도록 하는 것을 권장합니다. 리스트에 점을 찍는것은 왼쪽이나 오른쪽 정렬일 때만 사용합니다. 텍스트 가운데 정렬일 때는 좋지 않습니다. 섹션 이름을 tab으로는 짓지 않습니다. tab은 기능입니다. [ 주얼리 웹코딩 ] [ html / css / js ]