[접근성] Tab - 01.HTML / CSS 구조 잡기
Sat Sep 24 2022 00:33:05 GMT+0000 (Coordinated Universal Time)
Saved by @wnakswl
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
<header>
<h1>Tab Pattern</h1>
</header>
<div class="tab__container">
<ul class="tab__list">
<li class="tab__button">청춘예찬</li>
<li class="tab__button">별헤는 밤</li>
<li class="tab__button">혈의 누</li>
<li class="tab__button">소년의 비애</li>
</ul>
<div class="tab__panel" hidden>
청춘예찬 Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit error, iure quos laborum molestias velit laboriosam illum non expedita asperiores voluptates ex doloribus quasi adipisci itaque ullam quo veniam exercitationem eveniet. Corrupti optio, dignissimos iste non, adipisci eos eius omnis corporis assumenda qui atque quasi sunt ipsam velit, facere veniam! Excepturi nesciunt odio corrupti beatae ab. Autem, eveniet consequuntur natus obcaecati voluptas libero adipisci expedita nam error a aut fuga ab earum magni? Tempore voluptas sit vel ut in enim cupiditate at dicta voluptatum assumenda rerum, eveniet iste molestias dolor veritatis, sint odio quo reiciendis corrupti sapiente? Sequi, quaerat rem.
</div>
<div class="tab__panel" hidden>
별헤는 밤 Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat ullam ea quo suscipit, delectus optio in maxime hic perspiciatis eius beatae facilis quos aut fuga ipsum totam nemo id asperiores officia, doloremque neque qui at deleniti! Delectus quis, dolorem corporis neque culpa possimus perspiciatis fugiat harum saepe. Consectetur quas nulla, ut impedit cumque eaque nisi expedita delectus ratione commodi iure aliquid provident, doloremque soluta dolorum rerum, culpa ducimus ad voluptate mollitia? Non sequi, deserunt amet nesciunt nulla minus sapiente doloremque fugit delectus ut, blanditiis ad quas, mollitia rem! Impedit repellendus atque enim quis dolorem voluptas cum repellat aperiam amet corrupti aliquam sit eum ullam, consequatur iusto ipsum a quia animi excepturi adipisci fugit pariatur autem? Temporibus, et! Non temporibus optio inventore impedit obcaecati ex ducimus. Voluptas maxime sunt quibusdam reiciendis sequi animi earum vitae adipisci voluptatum laborum consequatur, dignissimos explicabo? Vitae, ratione eum, magni, atque enim architecto nulla illo in voluptatum sunt quaerat quisquam aliquid voluptate? Iusto esse dignissimos animi distinctio a veniam quam deleniti. Quas ex quod, aspernatur odio velit vitae ratione adipisci illo numquam obcaecati soluta saepe sunt natus officiis voluptatem iste culpa praesentium vero nam fuga doloremque ut expedita commodi quia! Delectus esse veritatis mollitia accusamus, impedit cupiditate provident exercitationem possimus blanditiis? Quas expedita est harum dignissimos, molestiae accusantium inventore ipsa sunt? Provident dolor sequi quasi, quidem beatae minima iusto doloremque! Inventore culpa, quisquam qui porro maiores placeat ipsa nisi ex sunt numquam dignissimos vel illo omnis! Blanditiis exercitationem necessitatibus, facere soluta consequuntur delectus corporis quidem vero consectetur quam quis vel non a. Neque nobis voluptates facilis asperiores nemo molestiae dicta, quod dolorum laudantium laboriosam corporis magni alias adipisci qui? Iste doloribus perferendis, nisi animi non iusto? Alias atque harum nemo esse placeat, consequatur nesciunt, tempora incidunt dolores praesentium nam eum. Quae nesciunt ipsum molestiae rerum est.
</div>
<div class="tab__panel" hidden>
혈의 누 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic similique est vitae, numquam sunt enim, voluptates voluptas fuga recusandae blanditiis, eum possimus iste illum nesciunt consequuntur quo voluptate.
</div>
<div class="tab__panel" hidden>
소년의 비애 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit optio iure ullam vero hic, voluptates incidunt recusandae? Provident magnam laboriosam, beatae fuga quo qui ex, voluptate molestias, suscipit neque quod pariatur illum accusamus cum vero sapiente atque nihil libero! Libero reprehenderit sunt similique nostrum voluptates consequatur perspiciatis id. Nihil maiores libero ullam nam aspernatur nostrum eveniet itaque! Blanditiis aut explicabo ut sapiente rerum. Tenetur pariatur, optio rem vero sed fugiat dolor cum ratione perspiciatis, ipsam tempore aliquid qui mollitia dolores quas odio voluptatum beatae totam aperiam doloremque consequuntur non nihil harum rerum? Soluta magni corporis accusamus ipsa suscipit itaque fugit, eum atque molestiae tenetur minima, dolorem neque voluptatibus quibusdam minus aperiam reiciendis sit et nisi sapiente! Veniam, eum nemo temporibus eaque quibusdam voluptatum aliquam tempora iusto molestias dolore, mollitia, illo excepturi deleniti! Dignissimos odio consectetur consequuntur maxime distinctio iure, unde rem veniam? Perferendis est consequuntur cumque vero sint pariatur excepturi voluptates distinctio accusantium officiis numquam exercitationem, asperiores a nesciunt explicabo dignissimos odio sed vel ipsa quia eum cum doloremque eligendi iure? Maxime impedit non a illum facere quae odit neque placeat, illo obcaecati cupiditate iusto corrupti et harum mollitia eius nulla voluptatibus voluptates, saepe inventore? Explicabo nesciunt ex porro iure!
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Comments