CSS] 동적 스타일링 구현

인라인 스타일보다는 주로 지시자를 스와핑 해서 사용합니다
클래스 b 를 첨가/생략 하여 색을 바꿔주는 태그
<style>
.a{height:20px;background:#ccc}
.a.b{background:#6df}
</style>
<div class="a b"></div>

아래 태그는 레이어를 순차적[뒤에서 앞] 혹은 곂침상태로 보여줄때 유용 합니다
하나의 섹션을 보여주고 싶은경우 스크롤을 사용하는편이 더 나은 결과를 보여줍니다

1번 그림은 같은 크기를 곂쳐놓을때 사용 합니다
하지만 이 단순한 구성으로는 레이어에 둔경우 다른 레이어에 묻히게 됩니다
<style>
.div{}
.dash{height:0}
</style>
<div>
  <div class="dash">1</div>
  <div class="dash">2</div>
  <div class="dash">3</div>
</div>

2번 그림과 같은 처리를 할수 있도록 스왑할 스타일을 지정 해주어서 해결 합니다
마지막 태그가 상단에 보여짐을 주의하여 구성을 하면 좋겠네요
<style>
.div{}
.dash{height:0}
.dash.s{height:auto}
</style>
<div>
  <div class="dash">1</div>
  <div class="dash s">2<br>4</div>
  <div class="dash">3</div>
</div>