[CSS] CSS Diner 해설 ( 1 )

series

2편 : kimbangg.tistory.com/99

[CSS] CSS Diner 해설 (2)

 

 3편 : kimbangg.tistory.com/100

[CSS] CSS Diner (3) - 마무리

 

 

LEVEL1  : 접시 선택

HTML
 
<div class="table">
  <plate />
  <plate />
</div>
 
 
css 
 
plate {
 
}

 

LEVEL2 : bento 선택

HTML
 
<div class="table">
	<bento />
    <plate />
    <bento />
</div>
 
 
css 
 
bento {
 
}

 

Level 3 : fancy한 접시 선택

HTML 
 
<div class="table">
	<plate id="fancy"/>
    <plate />
    <bento />
</div>
 
 
CSS
 
#fancy {
}

 

Level 4 

HTML
 
<div class="table">
	<bento />
    <plate >
    	<apple />
    </plate>
    <apple />
</div>
 
 
 
CSS 
 
plate apple {
 
}

 

Level 5 : fancy한 접시 위에 있는 피클만 선택

HTML
 
<div class="table>
	<bento>
    	<orange/>
    </bento>
    <plate id="fancy">
    	<pickle/>
    </plate>
    <plate>
    	<pickle/>
    </plate>
</div>
 
CSS
 
#fancy pickle{
}

 

Level 6 : 작은 사과 선택

HTML 
 
<div class="table>
	<apple/>
    <apple class="small"/>
    <plate>
    	<apple class="small"/>
    </plate>
    <plate/>
</div>   
 
CSS 
 
apple .small {
}

 

Level 7 : 작은 오렌지 선택

HTML
 
<div class="table">
	<apple />
    <apple class="small"/>
    <bento>
    	<orange class="small"/>
   	</bento>
    <plate>
    	<orange>
    </plate>
    <plate>
    	<orange class="small"/>
    </plate>
</div>
 
 
CSS 
 
orange.small {
}

 

LEVEL 8 : 벤토 안에 있는 작은 오렌지만 선택

HTML
 
<div class="table">
	<bento>
    	<orange/>
    </bento>
    <orange class="small"/>
    <bento>
    	<orange class="small"/>
    </bento>
    <bento>
    	<apple class="small"/>
    </bento>
    <bento>
    	<orange class="small">
    </bento>
</div>
 
 
CSS 
 
bento orange.small{
}

LEVEL 9 : 벤토와 접시 모두 선택

HTML 
 
<div class="table">
	<pickle class="small"/>
    <pickle />
    <plate>
    	<pickle/>
    </plate>
    <bento>
    	<pickle/>
    </bento>
   	<plate>
    	<pickle/>
   	</plate>
    <pickle/>
    <pickle class="small"/>
</div>
 
CSS
 
plate, bento {
}

LEVEL 10 : 모두 선택

HTML 
 
<div class="table">
	<apple/>
    <plate>
    	<orange class="small"/>
    </plate>
    <bento/>
    <bento>
    	<orange/>
   	</bento>
    <plate id="fancy"/>    
</div>
 
 
CSS 
 
 
* {
}

 

 

2편 ( kimbangg.tistory.com/99 )