과제 - 웹 표준 & 접근성 개선

chrome에 Screen Reader를 설치

page02 

1. 인라인 안에 블록 X

인라인 - a ,em ,strong

블록 div p h1

2. 의미있는 요소 사용하기

b대신 콘텐츠에 의미를 부여하는 strong을 사용하기

i대신 콘텐츠에 의미를 부여하는 em을 사용하기

 

3. hgrop 마구잡이 X

import styled form "styled-cpmponents"

const FontSizingDiv = styled.div `

     font-size: ${props => props/fontSizing || '1rem'};

     font-weight : bold;

 

`

 

<FontSizingDiv> fontSize='1.8rem'>xxxxx</FontSizingDiv>

 

4.

const MarginButtonList = styled.div `

    margin-bottom : ${props => props.props.marginBottom *20 +'px'}

`

 

<MarginButtonList marginBotton={2}>

 

* li는 ul이든 ol이든 감싸져있어야된다.

 

 

page03

텍스트를 alt속성을 사용한다.

사진을 누르면 alt를 읽어준다.

 

*빈문자열 X , 광범위하게 X  , 자세한 설명 X , 내용 중복 X

 

page04

<section>
                <h2>예시 1</h2>
                <div class="tabContainer">
                    <div className="tabList">
                        <div className={currentTab1 === 0 ? "tab selected" : "tab"} onClick={()=>setCurrentTab1(0)}>{tab.tab1.title}</div>
                        <div className={currentTab1 === 1 ? "tab selected" : "tab"} onClick={()=>setCurrentTab1(1)}>{tab.tab2.title}</div>
                        <div className={currentTab1 === 2 ? "tab selected" : "tab"} onClick={()=>setCurrentTab1(2)}>{tab.tab3.title}</div>
                    </div>
                    <div className={currentTab1 === 0 ? "block" : "none"}>{tab.tab1.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
                    <div className={currentTab1 === 1 ? "block" : "none"}>{tab.tab2.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
                    <div className={currentTab1 === 2 ? "block" : "none"}>{tab.tab3.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
                </div>
            </section>
            <section>
                <h2>예시 2</h2>
                <div class="tabContainer">
                    <div className="tabList">
                        <div>
                            <div className={currentTab2 === 0 ? "tab selected" : "tab"} onClick={()=>setCurrentTab2(0)}>{tab.tab1.title}</div>
                            <div className={`tabPanel${currentTab2 === 0 ? " block" : " none"}`}>{tab.tab1.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
                        </div>
                        <div>
                            <div className={currentTab2 === 1 ? "tab selected" : "tab"}  onClick={()=>setCurrentTab2(1)}>{tab.tab2.title}</div>
                            <div className={`tabPanel${currentTab2 === 1 ? " block one" : " none"}`}>{tab.tab2.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
                        </div>
                        <div>
                            <div className={currentTab2 === 2 ? "tab selected" : "tab"}  onClick={()=>setCurrentTab2(2)}>{tab.tab3.title}</div>
                            <div className={`tabPanel${currentTab2 === 2 ? " block two" : " none"}`}>{tab.tab3.content.map((el,idx)=> <li key={idx}>{el}</li>)}</div>
                        </div>
                    </div>
                </div>
</section>

 

예시 1의 코드는 각 탭의 제목과 내용을 구분하기 위해 tab과 block이라는 CSS 클래스를 사용하고 있다.

또한 currentTab1이라는 상태 변수를 사용하여 현재 선택된 탭의 인덱스를 추적하고,

각 탭의 클릭 이벤트에 따라 해당 상태 변수가 업데이트된다.

이 코드에서는 탭의 개수가 늘어날 경우 매우 복잡해질 수 있다는 단점이 있다.

 

반면 예시 2의 코드는 탭 패널을 두 개의 클래스(tabPanel 및 block one 또는 block two)로 구분하고,

각 탭을 클릭할 때마다 클래스를 변경하여 해당 탭의 패널이 표시되도록 한다.

또한 이 코드에서는 각 탭을 개별적으로 감싸는 추가적인 HTML 요소를 사용하고 있다.

이 방법은 각 탭마다 개별적인 스타일 및 기능을 쉽게 적용할 수 있다는 장점이 있다.

page05

 <div role="button" className="button">요소는 div</div> x

<button>요소는 button</button> o

 <h3 role="button" className="button">요소는 h3</h3> x

 

 

page06

<table>
                        <caption>바밤바 시리즈 정리</caption>
                        <thead>
                            <tr>
                                <td id="A">이름</td>
                                <td id="B">당류</td>
                                <td id="C">내용량</td>
                                <td id="D">칼로리</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td id="a">바밤바</td>
                                <td headers="B a">13g</td>
                                <td headers="C a">70ml</td>
                                <td headers="D a">100kcal</td>
                            </tr>
                            <tr>
                                <td id="b">배뱀배</td>
                                <td headers="B b">14g</td>
                                <td headers="C b">70ml</td>
                                <td headers="D b">75kcal</td>
                            </tr>
                            <tr>
                                <td id="c">바밤바샌드</td>
                                <td headers="B c">24g</td>
                                <td headers="C c">180ml</td>
                                <td headers="D c">240kcal</td>
                            </tr>
                        </tbody>
</table>

page07

input에 label속성을 넣어준다.

<div className="inputContainer">
                       {/* <span>아이디</span>*/}
                        <label for="아이디">아이디</label>
                        <input id="아이디" type="text" />
                     {/*<span>비밀번호</span>*/}
                        <label for="비밀번호">비밀번호</label>
                        <input id="비밀번호" type="text" />
</div>

page08

toLocaleString() .이 찍힌다.