6)장바구니 ui

728x90

1차시도 fail

2차시도

<form> 이해

Comment 받은 사항

ㄴ (Q) 장바구니 만들때 <table> 로 해야할지, <list> 로 해야할지, <div>로 해야할지 고민이 됩니다.

(A) 강사님께서 말씀하셨듯, 개발자의 마음이고 선택이긴 하지만

보통 율님께서는 div로 작성을 하신다고 한다.

+ 이후 table 태그를 css 하려고 하니 , (div)영역을 꾸미는 것보다 (table)을 꾸미는 css 태그가 적어서 그런듯 하다.

+ 이번에는 table 태그로 레이아웃 을 만들었지만 다음번에는 div로 레이아웃을 짜보도록 하자! <숙제>

참고사이트

장바구니 코드 참고

HTML의 <table> 태그를 이용하여 네이버 장바구니 페이지 만들기 (tistory.com)

폼태그 이해

https://www.nextree.co.kr/p8428/

과제 : CSS 하기

( CSS 전 )

<table> 태그와 함께 사용될 수 있는 속성은 다음과 같습니다.

table CSS 할 속성

참고사이트
( 위 사진 ) https://aboooks.tistory.com/78

( table 관해 좋은 사이트 ) https://www.codingfactory.net/10232

중간 CSS 기록사항

🔵실험노트🔵
🔸원래 의도는 input버튼이 들어간 셀 크기를 줄이고자 하였으나 셀크기가 아니라 input 버튼 자체가 크기안에서 셀크기 안에서 왼쪽을 기준으로 오른쪽을 30 % 이동 하였다...? 아닌가? 50 이면 절반 값으로 와야 하는데 아 한 데이터 셀이 아니라 전체 화면의 30 퍼센트인가.....?? 머여
🔸첫번째 데이터 열 , 행 이런식으로 선태할 수 있는 셀렉터 가 있을 까 ? 궁금 👉 검색 키워드 #첫번째 열만 css (아래 참고사이트)

🔴느낀점🔴
width : %(상대값) 없으면 고정값처럼 되는 듯
🟡궁금증🟡
🔸img 크기를 조절하고 싶은데 px과 % ...
% 에 대한 감각이, 기준점이 어딘지 ..? 원본사진에서의 %값인가
셀크기에 대해서의 % 인가.... ???

💞 개선해야할 사항 💞

input 버튼 들어간 셀 크기 develop 하기 👉 위 실험노트의 2번째 물음과 연계된다...

td 사이의 검은 줄 없애기 👉 개선완료 - HOW TO : CSS- table 안에 - border-collapse : collapse; 작성하도록 한다.

달라진 점

🔹table / tr, td 분리시켜서 CSS 하기

🔸CSS / 표(table) 꾸미기 / 테두리 만들기

https://www.codingfactory.net/10510

🔸테이블 사이의 검은 줄이 아 닌 핑크 사이사이 없애기

border-collapse : collapse | https://tlatmsrud.tistory.com/54

CSS - 특정셀만 선택 td 테이블 데이터에 , even = 짝수 '열'td 선택

table td:nth-child(even) {
  background-color: royalblue;
}

🔸특정셀만 선택하는 셀렉터 - [국기과정수업] HTML Table 행/열에 스타일 적용하기

https://m.blog.naver.com/nameybs88/220732831448

🔸CSS 가상 선택자 정리 및 비교 (nth-child, nth-of-type)

[CSS]css 가상 선택자 정리 및 비교 (nth-child, nth-of-type)

~~ 여기까지의 전문 코드~~

🔴HTML

<body>
    <section class="cart">
      <div class="cart__information">
        <ul>
          <li>장바구니 상품은 최대 30일간 저장됩니다.</li>
          <li>가격, 옵션 등 정보가 변경된 경우 주문이 불가할 수 있습니다.</li>
          <li>
            오늘 출발 상품은 판매자 설정 시점에 따라 오늘출발 여부가 변경될 수
            있으니 꼭 다시 확인해 주시길 바랍니다.
          </li>
        </ul>
      </div>

      <table class="cart__list">
        <form>
          <!-- 폼태그 이해가 필요할 것 같다. -->
          <thead>
            <tr>
              <td><input type="checkbox" /></td>
              <td colspan="2">상품정보</td>
              <td>옵션</td>
            </tr>
          </thead>
          <tbody>
            <tr class="cart__list__detail">
              <td><input type="checkbox" /></td>
              <td><img src="../src/image/토끼.png" alt="토끼" /></td>
              <td>
                <a href="#">헬스</a
                ><span class="cart__list__smartstore">스마트스토어</span>
                <p>Apple 매직 키보드 - 한국어(MK2A3KH/A)</p>
                <span class="price">116,62원</span
                ><span style="text-decoration: line-through; color: lightgray"
                  >119,000원</span
                >
              </td>
              <td></td>
            </tr>

            <tr class="cart__list__detail">
              <td><input type="checkbox" /></td>
              <td><img src="../src/image/호랑이.png" alt="호랑이" /></td>
              <td>
                <a href="#">헬스</a
                ><span class="cart__list__smartstore">스마트스토어</span>
                <p>Apple 매직 키보드 - 한국어(MK2A3KH/A)</p>
                <span class="price">116,62원</span
                ><span style="text-decoration: line-through; color: lightgray"
                  >119,000원</span
                >
              </td>
              <td></td>
            </tr>

            <tr class="cart__list__detail">
              <td><input type="checkbox" /></td>
              <td>
                <img
                  src="../src/image/스크린샷_20221024_122608.png"
                  alt="사과"
                />
              </td>
              <td>
                <a href="#">헬스</a
                ><span class="cart__list__smartstore">스마트스토어</span>
                <p>Apple 매직 키보드 - 한국어(MK2A3KH/A)</p>
                <span class="price">116,62원</span
                ><span style="text-decoration: line-through; color: lightgray"
                  >119,000원</span
                >
              </td>
              <td></td>
            </tr>
          </tbody>
        </form>
      </table>
    </section>
  </body>

🔵CSS

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}
p,
span {
  margin: 0;
}
a {
  color: black;
}

img {
  display: block;
  width: 100px;
  height: 150px;
  margin: auto;
}

input {
  width: 50%;
}

table {
  width: 100%;
  /* border: 1px solid black; */
  border-collapse: collapse;
  border-top: 1px solid black;
  /* border-bottom: 1px solid black; */
  /* ㄴ border-bottom : 없어도 됨  */
}

tr,
td {
  background: #fffff0;
  padding: 10px;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}



table td:nth-child(even) {
  background-color: royalblue;
}

728x90

'STUDY (My Job) > TIL' 카테고리의 다른 글

반응형 게시판 만들기 1 - 전체 구조 설계, 타이틀과 버튼 스타일 (0)	2022.12.16
20221212월요일 (0)	2022.12.13
20221208목요일_2.12 배열 내장 함수 - 한입크기로 잘라먹는 리엑트 (0)	2022.12.09
5)React - 컴포넌트연결 ( 1차, props이용 / 2차 태그로만연결하기 ) (2)	2022.12.05
4)로그인창만들기 (0)	2022.12.05

일상 블로그

6)장바구니 ui

'STUDY (My Job) > TIL' 카테고리의 다른 글

댓글

티스토리툴바

6)장바구니 ui

'STUDY (My Job) > TIL' 카테고리의 다른 글

관련글

댓글

티스토리툴바