[멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 21~22 [5~6주차]

❤️Liked 느낀 점

HTML/CSS 파트의 마지막 과제를 제출한 뒤 제 코드에서 문제점은 무엇인지 알고싶어서

강사님께 처음이자 마지막으로 코드리뷰를 신청했습니다.

1대1로 코드리뷰를 받는게 아니다보니 제 코드가 다른 사람한테 보여지는게 부끄러웠지만

제 코드의 문제점과 개선점을 배울 수 있었고, 또한 다른 분들은 어떤 식으로 코드를 작성하는지 알게되면서

어떻게 하면 효율적인 코드를 작성할 수 있는지 배울 수 있었던 뜻 깊은 시간이었던 것 같습니다.

 

✏️Learned 공부한 내용

<table>

행과 열로 구성된 표 형식의 데이터입니다.

요소

• <tr>: 테이블의 행을 정의합니다.
• <th>: 테이블 헤더 셀을 정의합니다.
• <td>: 테이블의 데이터 셀을 정의합니다.

CSS 레이아웃 기법 대신 사용하는 건 금지

 

• 접근성 문제: 테이블 레이아웃은 스크린 리더에 혼란을 주어 시각 장애 사용자의 접근성을 떨어뜨립니다.
• 복잡한 마크업: 테이블 레이아웃은 복잡한 마크업 구조로 인해 코드 작성 및 유지 관리가 어렵습니다.
• 반응형 디자인 제한: 테이블은 기본적으로 콘텐츠에 따라 크기가 조정되며, 다양한 기기에서 효과적으로 작동하려면 추가적인 작업이 필요합니다.

 

기본구조

<table border="1">
    <tr>
        <th>헤더 1</th>
        <th>헤더 2</th>
        <th>헤더 3</th>
    </tr>
    <tr>
        <td>데이터 1</td>
        <td>데이터 2</td>
        <td>데이터 3</td>
    </tr>
    <tr>
        <td>데이터 4</td>
        <td>데이터 5</td>
        <td>데이터 6</td>
    </tr>
</table>

 

행, 열 병합

• rowspan: 셀을 여러 행에 걸쳐 확장합니다.
• colspan: 셀을 여러 열에 걸쳐 확장합니다.

<table border="1">
    <tr>
        <th>헤더 1</th>
        <th>헤더 2</th>
        <th>헤더 3</th>
    </tr>
    <tr>
        <td rowspan="2">병합된 행</td>
        <td>데이터 2</td>
        <td>데이터 3</td>
    </tr>
    <tr>
        <td>데이터 4</td>
        <td>데이터 5</td>
    </tr>
    <tr>
        <td colspan="3">병합된 열</td>
    </tr>
</table>

 

table-layout

• 기본값 auto: 각 셀의 너비는 내부 텍스트의 양에 따라 자동으로 결정됩니다.
• fixed 값: 셀 너비가 고정되어, 텍스트 양과 관계없이 지정된 너비로 테이블이 표시됩니다. 이때, 셀의 너비는 균등하게 분배됩니다.

다양한 테이블 디자인

https://inpa.tistory.com/entry/CSS-%F0%9F%92%8D-%ED%85%8C%EC%9D%B4%EB%B8%94table-%EB%94%94%EC%9E%90%EC%9D%B8-%F0%9F%96%8C%EF%B8%8F-%EB%AA%A8%EC%9D%8C

[CSS] 🎨 테이블(Table) 디자인 스타일 모음

테이블 구조화

• <thead>: 테이블의 헤더 섹션을 정의하며, 보통 열 제목을 포함합니다.
• <tbody>: 테이블의 주요 데이터 행을 그룹화하여, 테이블의 본문을 구성합니다.
• <tfoot>: 테이블의 푸터 섹션으로, 요약이나 합계를 제공하는 데이터를 포함합니다.

장점

 

• 의미론적 명확성: 테이블 각 부분의 역할을 명확하게 구분할 수 있습니다.
• 스타일링 용이성: 각 섹션에 별도의 스타일을 적용할 수 있습니다.
• 접근성 향상: 보조 기술이 테이블 구조를 잘 이해할 수 있도록 돕습니다.
• 대규모 데이터 처리: 헤더와 푸터를 고정하는 등의 고급 기능 구현이 용이합니다.

 

 

<table> 태그 와 display:table 차이점?

 

• 마크업 방식: <table> 태그는 HTML에서 테이블을 생성하기 위한 시맨틱 마크업을 제공하며, <tr>, <td> 등으로 구성됩니다. 반면, display: table은 일반 HTML 요소를 테이블처럼 스타일링하기 위해 CSS에서 사용됩니다.
• 시맨틱 마크업: <table> 태그는 구조를 명확히 구분하여 스크린 리더 등의 보조 기술에 유리합니다. 반면, display: table은 시맨틱 마크업을 제공하지 않습니다.
• 스타일링 유연성: display: table은 테이블 형태의 레이아웃을 더 유연하게 스타일링할 수 있지만, <table> 태그는 기본적인 스타일링에 제한이 있습니다.
• 요소 레벨: <table>은 기본적으로 블록 레벨 요소로 동작하며, display: table은 인라인 레벨 요소로 취급될 수 있어 추가적인 스타일링이 필요할 수 있습니다.

😔Lacked 부족한 점

강사님께 코드리뷰 받고 피드백 주신 부분입니다.

 

1. CSS 선택자가 지나치게 길고 nth-of-ype 이나 nth-child를 자주 사용하는 것은 좋지 않음

• 선택자가 너무 길어지면 코드 가독성이 떨어진다
• nth 선택자는 특정 위치에 있는 요소에 스타일을 적용할 때 쓰이므로 만약 HTML 구조가 변경되면 기존에 적용된 nth 선택자의 스타일이 엉뚱한 요소에 적용될 수 있어 이로인해 예기치 않은 스타일 문제가 발생할 수 있다.

/* 예시 */
.theme_ivory .section-header .left h1:nth-of-type(2)::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: fit-content;
  height: 26px;
  background-color: var(--color-white);
  z-index: -1;
}

 

2. button 태그 안에 텍스트 스타일링을 따로 지정해주기 위해 span 태그를 굳이 넣을 필요 없음

button><span>+ Add to Calendar</span></button>

• HTML을 불필요하게 복잡하게 만들고, 유지보수성을 떨어뜨릴 수 있다
• <button> 태그 안에 여러 개의 중첩된 요소가 있을 때, 코드를 이해하기 더 어렵게 만들 수 있다

3. width: 100%를 지나치게 자주 사용

• width: 100%를 명시하지 않아도 기본적으로 블록 요소는 부모 요소의 너비에 맞춰 확장됩니다
• 반응형 웹 디자인에서는 요소의 크기가 화면 크기에 따라 동적으로 변해야 합니다. width: 100%는 고정된 비율로만 작동하므로, 다양한 화면 크기에 적응하기 어려울 수 있습니다

4. class="top"이나 class="bottom"처럼 요소의 위치에 따라 클래스를 지정하는 것은 좋지 않음

<div class="left"></div>

• 디자인은 언제든지 바뀔 수 있으므로 유지보수에 어려움을 줄 수 있습니다
• 요소의 역할이나 의미에 기반하여 작명하는 것이 더 바람직합니다

5. <h1> 태그는 최상위 제목으로 문서에는 일반적으로 하나의 <h1> 태그만 존재해야 함

/* 문제 부분 */
<div class="left">
	<h1>START YOUR</h1>
	<h1>PORTFOLIO</h1>
	<h1>PROJECT</h1>
</div>

 

 

/* 해결(여러 방법이 존재함) */
<div class="left">
    <h1>START YOUR PORTFOLIO PROJECT</h1>
</div>

🙏🏻Longed For 앞으로 바라는 점

• 코드리뷰 피드백 받은 부분을 토대로 문제점을 바로잡기
• 자바스크립트 공부 시작하기..
• html css 예제 다시 복습해보기