새로운 질서 위키

체리

체리는 잎사귀와 꼭지와 알맹이로 나누어 볼 수 있다. 새로운 질서에서는 이 구성 요소를 목록으로 생각한다. 아래 HTML에서는 전체를 나타내는 cherry 클래스의 요소 안에 부분들을 넣고, 각 부분에도 역할을 구별할 클래스 이름을 붙였다.

<div class="cherry">
  <div class="leaf"></div>
  <div class="twig"></div>
  <div class="kernel"></div>
</div>

잎사귀가 두 개라면 잎사귀도 다시 목록으로 나눌 수 있다. 전체 목록의 항목이 안쪽에서는 또 다른 목록이 되는 셈이다. 아래에서는 leaf 안에 leaf-left와 leaf-right를 넣어 왼쪽과 오른쪽 잎의 위치나 모습을 따로 다룰 수 있게 했다.

<div class="cherry">
  <div class="leaf">
    <div class="leaf-left"></div>
    <div class="leaf-right"></div>
  </div>
  <div class="twig"></div>
  <div class="kernel"></div>
</div>

알맹이에 비치는 빛

<div class="cherry">
  <div class="leaf">
    <div class="leaf-left"></div>
    <div class="leaf-right"></div>
  </div>
  <div class="twig"></div>
  <div class="kernel">
    <div class="kernal-light"></div>
  </div>
</div>

#음식 #HTML

검색