์น ํ์ค, ์น ์ ๊ทผ์ฑ์ ๋ง๊ฒ ์์ฑ๋์ง ์์ ์ฝ๋๋ฅผ ๋ฆฌํฉํ ๋ง ํ๋ ๊ณผ์ ๋ฅผ ์งํํ๋ค.
header
, footer
, nav
, aside
, h1~h6
์ธ ๊ธฐ๋ณธ ์ ์ธ ๋ถ๋ถ์ด <div>
๋ก ๋์ด ์์ด ์ด๋ถ๋ถ์ ๊ฐ๋ณ๊ฒ ์์ ํด ์ฃผ์๋ค.โ๏ธ
<strong>
,<em>
๋ ๋ค ๊ธ์๋ฅผ ๊ฐ์กฐํ ๋ ์ฌ์ฉํ๋ค.
<strong>
์<b>
๋์ ์ผ๋ก ๊ธ์ ๊ตต๊ธฐ๋ฅผ ๊ตต๊ฒ ํด์ค๋ค. (๊ฐ์กฐ)<em>
์<i>
๋์ ์ผ๋ก ๊ธ์๋ฅผ ๊ธฐ์ธ์ด ์ค๋ค. (๋งค์ฐ ๊ฐ์กฐ)
<b>
,<i>
๋ ์๋ฉํฑ ์์๊ฐ ์๋ ๋จ์ํ ์คํ์ผ๋ง ํจ๊ณผ๋ง ๋ค์ด๊ฐ ํ๊ทธ๋ก<strong>
,<em>
์ฌ์ฉํ ์ ์๋๋ก ์ฃผ์ํด์ผ ํ๋ค.
styled component
๋ฅผ ์ด์ฉํด ๊น๋ํ๊ฒ ์์ ํ์
จ๋ค!alt
์์ฑ์ ๋ฃ์ด์ค๋ค.// ๋ฆฌํฉํ ๋ง ์
<img src={rabbitImage} alt="๋๋ฌผ"/>
// ๋ฆฌํฉํ ๋ง ํ
<img src={rabbitImage} alt="๋ฌ๊ทธ ์ ํ ๋ผ"/>
์ด๋ ๊ฒ๋ง ๋ณด๋ฉด ๋ฌด์จ ๋๋ฌผ์ด๊ณ ๋ฌด์์ ํ๋์ง ์ ์ ์์๊น?
์ ์ด๋ ์คํฌ๋ฆฐ ๋ฆฌ๋๊ฐ ์ฝ์ด์ ์ฌ์ฉ์๊ฐ "์, ์ด ์ฌ์ง์ ์ด๋คํ ๋ด์ฉ์ ๋ด์ ๋๋ฌผ์ด๊ตฌ๋"๋ผ๊ณ ํ๋จ ํ ์ ์์ด์ผํ๋ค.
alt=""
๋ก ์์ฑํด ์คํฌ๋ฆฐ ๋ฆฌ๋๊ฐ ๋์ด๊ฐ๋๋ก ํด์ค๋ค.// ์ค๋ณต์ผ๋ก ์ค๋ช
ํด ์ฃผ๊ณ ์๋ค. - ๋ฆฌํฉํ ๋ง ์
<img src={redPandaImage} alt="ํ๋ฅผ ๋ด๋ฐ๊ณ ์๋ ๋ ์ ํฌ๋" />
<p>๋์ ํ๋๊ฐ ๋๋๋ฌด๋ฅผ ์๋ฐ๋ก ์ก๊ณ ํ๋ฅผ ๋ด๋ฐ๊ณ ์๋ค.</p>
// ๋ฆฌํฉํ ๋ง ํ
<img src={redPandaImage} alt="" />
<p>๋์ ํ๋๊ฐ ๋๋๋ฌด๋ฅผ ์๋ฐ๋ก ์ก๊ณ ํ๋ฅผ ๋ด๋ฐ๊ณ ์๋ค.</p>
// ์๋ฏธ ์๋ ๋ฐฐ๊ฒฝ ๋ฑ์ ์คํ์ผ ์์ ๋ํ alt="" ์ผ๋ก ์์ฑํ๋ค.
<img src={bgImage} alt="" />
์คํฌ๋ฆฐ ๋ฆฌ๋๋ ์์ฐจ์ ์ผ๋ก ์ฝ์ด ์ค๋ค.
๋ง์ฝ ๋ฉ๋ด1,๋ฉ๋ด2,๋ฉ๋ด3,์ฝํ
์ธ 1,์ฝํ
์ธ 2,์ฝํ
์ธ 3์ผ๋ก ๊ตฌ์กฐ๋ฅผ ์์ฑํ๋ฉด ์คํฌ๋ฆฐ ๋ฆฌ๋๋ ์์ฐจ์ ์ผ๋ก ์ฝ์ด ์ฃผ๊ณ ๋ฃ๋ ์ด ์
์ฅ์์๋ "์ด๊ฒ ๋ฌด์จ ๋ง์ด์ง?" ๋ผ๊ณ ์๊ฐํ๊ฒ ๋๋ค.
// ์์ ์ฝ๋๋ก ๊ตฌ์กฐ๋ง ๋ด์ฃผ์๋ฉด ๋ฉ๋๋ค. (์๋ฉํฑ ๋ฑ ์ ๋ง์ ์๋ ์์)
<article>
<section className="tabList">
<button className="Tab1">Tab1</button>
<button className="Tab2">Tab2</button>
<button className="Tab3">Tab3</button>
</section>
<section className="TabPanel1">TabPanel1</section>
<section className="TabPanel2">TabPanel2</section>
<section className="TabPanel3">TabPanel3</section>
</article>
// ์์ ์ฝ๋๋ก ๊ตฌ์กฐ๋ง ๋ด์ฃผ์๋ฉด ๋ฉ๋๋ค. (์๋ฉํฑ ๋ฑ ์ ๋ง์ ์๋ ์์)
<article>
<section className="tabList">
<button className="Tab1">Tab1</button>
<section className="TabPanel1">TabPanel1</section>
<button className="Tab2">Tab2</button>
<section className="TabPanel2">TabPanel2</section>
<button className="Tab3">Tab3</button>
<section className="TabPanel3">TabPanel3</section>
</section>
</article>
์ฝ๋๋ฅผ ์์ฑ ํ ๋ ๋ฌด์์ ์์ฑํ๊ธฐ ๋ณด๋ค๋ ์ด๋ค ๊ตฌ์กฐ๋ก ์์ฑํด์ผ ๋ค๋ฅธ ์ด์ฉ์๊ฐ ํธํ๊ฒ ์ฌ์ฉํ ์ ์๊ณ ๋ ๋์๊ฐ ์ ์ง๋ณด์ ํ ๋ ์ ์ฉํ ์ง ์๊ฐํด ๋ณด๊ณ ์งํํด์ผ ๊ฒ ๋ค.
<th>
์ scope="col
", ์ฃผ์ ์ ๋ชฉ์ธ ๊ฒฝ์ฐ์ <td>
์ scope="row"
๋ฅผ ์์ฑํด ์ฃผ๋ฉด๋๋ค.<caption>Cmarket ํ๋งค์ด์ก</caption>
ํ๊ทธ๋ฅผ ๋ฃ์ด ํด๋น ํ๊ฐ ์ด๋ค ์ฃผ์ ์ธ์ง ์ค๋ช
ํ๋ค.id
, headers
๋ก ์์ฑํด ์ค๋ค.<thead>
<tr>
<th id="A">์ ๋ชฉ 1<br/>(A)</th>
<th id="B">์ ๋ชฉ 2<br/>(B)</th>
<th id="C">์ ๋ชฉ 3<br/>(C)</th>
</tr>
</thead>
<tbody>
<tr>
<td id="a">์ฃผ์ <br/>(a)</td>
<td headers="B a">๋ด์ฉ<br/>(B a)</td>
<td headers="C a">๋ด์ฉ<br/>(C a)</td>
</tr>
</tbody>
WAI-ARIA๋ฅผ ์ฌ์ฉํ๋ฉด HTML ์์์ ์ถ๊ฐ์ ์ธ ์๋ฏธ๋ฅผ ๋ถ์ฌํด ์ฃผ๋ฉด ๋๋ค.
๋จ, WAI-ARIA๋ ๋ถ๊ฐ์ ์ธ ๊ฒฝ์ฐ์๋ง ์ฌ์ฉํด ์ฃผ๊ณ ์๋ฉํฑ ์์๋ก๋ ์ถฉ๋ถํ๋ค๋ฉด ๊ตณ์ด ์ฌ์ฉํ์ง ์๊ณ ์คํ๋ ค ์ง์ํ๋ค.
<div className="button" role="button" ariat-label="">๋ฒํผ</div>
โ๏ธ WAI-ARIA์ ์ฃผ์์ฌํญ
- ์์์ ์ด๋ฆ์ผ๋ก ์์์ ์ญํ ์ ํ์ ํ ์ ์์ ๋ ์ฌ์ฉํ์ง ์๋๋ค.
// ์ด๋ฏธ button ํ๊ทธ๋ฅผ ์ฌ์ฉํด ์ถฉ๋ถํ ํ์ ํ ์ ์๋๋ฐ role๋ก ํ ๋ฒ ๋ ์ค๋ช ํด ์ฃผ์๋ค. <button role="button">์์๋ button</button> // (x)
- ์์ ๋ณธ์ฐ์ ์ญํ ์ ๋ฐ๊พธ์ง ์๋๋ค.
// h3 ํ๊ทธ๋ ์ ๋ชฉ ์์์ธ๋ฐ role๋ก button์ ๊ฐ๋ฆฌํค๊ณ ์๋ค. <h3 role="button">์ ๋ชฉ</h3> //(x)
์ฌ์ฉ์ ์ ๋ ฅ์ ๋์ํ๋ ๋ ์ด๋ธ์ ์ ๊ณต
<label>
ํ๊ทธ๋ฅผ ์ด์ฉํด label์ for
๋ฅผ, input์ id
๊ฐ์ ๋์ผํ๊ฒ ์์ฑํด ์ฐ๊ฒฐํด ์ค๋ค.<label for="user_text">ํ
์คํธ</label>
<input type="text" id="user_text" placeholder="ํ
์คํธ" />
์ผํ๋ชฐ์์ ์ํ ๋ฆฌ์คํธ ์์ญ์ด๋ค. <div>
๋ก ๊ฐ์ธ์ ธ ์๊ธฐ๋ ํ๊ณ ์คํ์ผ ์์ ์ ์ํด styled component๋ฅผ ์ด์ฉํด ์์
ํด ์ฃผ์๋ค.
return(
<div key={item.id} className="item">
<img className="item-img" src={item.img} alt={item.name}></img>
<span className="item-name" data-testid={item.name}>{item.name}</span>
<span className="item-price">{item.price}</span>
<button className="item-button" onClick={(e) => handleClick(e, item.id)}>์ฅ๋ฐ๊ตฌ๋ ๋ด๊ธฐ</button>
</div>
)
import styled from 'styled-components'
const Section = styled.section`
padding: 10px;
`
const DivCont = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
border-bottom: 1px solid #eaeaea;
padding-bottom: 10px;
>.item-name{
font-weight: 700;
}
`
const CartBtn = styled.button`
display: flex;
justify-content: center;
transition: 0.3s;
font-size: 1rem;
background-color: #fff;
>span {
color: var(--coz-purple-600);
font-size: 1.3rem;
}
&:hover span{
color: #fff;
}
`
return (
<Section key={item.id} className="item">
<img className="item-img" src={item.img} alt={item.name}></img>
<DivCont>
<span className="item-name" data-testid={item.name}>{item.name}</span>
<span className="item-price">{item.price}</span>
</DivCont>
<CartBtn className="item-button" onClick={(e) => handleClick(e, item.id)}>
<span className="material-symbols-outlined">
shopping_cart
</span>
์ฅ๋ฐ๊ตฌ๋ ๋ด๊ธฐ
</CartBtn>
</Section>
)
var(--coz-purple-600)
์ด styled component์์๋ ๋์ผํ๊ฒ ์ ์ฉ ๋๋ค๋ ์ ์ ์๊ฒ ๋์๋ค.
- google icon์ ์ ์ฉํ๋ ค๋ฉด ๊ธฐ์กด ๋ฐฉ๋ฒ ์ฒ๋ผ
html
์head
์์ ์ฐ๊ฒฐ ๋งํฌ ๋ฃ์ด์ค ํ ์ฌ์ฉํ ์์ด์ฝ์ ์ ์ฉ์ํค๋ฉด ๋๋ค.
html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
์ ์ฉํ ์์ด์ฝ
<span className="material-symbols-outlined"> shopping_cart </span>
๋๋จธ์ง ๋ถ๋ถ๋ ๋น์ทํ๊ฒ ์งํํ๋ค.
์น ํ์ค, ์น ์ ๊ทผ์ฑ์ ์งํค์ง ์์๋ ํ๋ฉด์ ๋ณด์ด๋ ๊ฒ์ ๋ฌธ์ ๋ ์๋ค.
ํ์ง๋ง ์ฅ์ ์ธ๊ณผ ๋น์ฅ์ ์ธ ๋ชจ๋ ๋๋ฑํ ํ๋ฉด๊ณผ ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ธฐ ์ํด ๊ฐ๋ฐ์ ๋ค์ ๊ท์ฐฎ๋๋ผ๋ ์น ํ์ค, ์น ์ ๊ทผ์ฑ์ ์ง์ผ์ผ ํ๋ค๊ณ ์๊ฐํ๋ค.
๋ง์ฝ ๋์ ๊ฐ์กฑ์ด ์ฅ์ ๋ฅผ ๊ฐ์ง๊ณ ์๋๋ฐ ์๋น์ค ์ฌ์ฉ์ ๋ถํธ์ด ์์ ๋ ๋๋ ์ด๋ค ๋ฐ์์ผ๊น? ์ฐ๋ฆฌ ๊ฐ๋ฐ์๊ฐ ๋ง๋๋ ์๋น์ค๋ ๋ณธ์ธ์ด ์ฌ์ฉํ๊ธฐ ๋ณด๋ค๋ ๋ถํน์ ๋ค์๋ค์ด ์ฌ์ฉํ๊ธฐ์ ๊ทธ๋ค์ด ์ฌ์ฉํ๋๋ฐ ์ ์ด๋ ๋ถํธํจ์ด ์๋ ์ ๋์ ์๋น์ค๋ฅผ ์ ๊ณตํด์ผ ํ๋ค.
์ด๋ฒ ํ์ต์ ํตํด ์น ํ์ค, ์น ์ ๊ทผ์ฑ์ ์ค์ํจ์ ๊นจ๋ฌ์๋ค.
๊ฐ๋ฐ์ ์
์ฅ์ผ๋ก ๊ท์ฐฎ์ ์ ์๋ ์์
์ด์ง๋ง ์ฌ์ฉ์ ์
์ฅ์์๋
์๋น์ค๋ฅผ ์ข ๋ ํธ๋ฆฌํ๊ฒ ๋ค๋ฃฐ ์ ์์ง ์์๊น ์ถ๋ค.
๋จ๊ธฐ๊ฐ์ ๋น ๋ฅด๊ฒ ์์ ํ๋ ๊ฒ๋ ์ค์ํ์ง๋ง ์น ํ์ค, ์น ์ ๊ทผ์ฑ์ ์ ๊ฒฝ์จ์ ์์ ํด์ผ๊ฒ ๋ค.