사용자:Mineral/연습장2(비교)

{{{#!style

.custom-container {

display: inline-block;

margin: 1px auto;

padding: 5px 10px;

border: 1.5px solid #ced4da;

border-radius: 10px;

background-color: transparent;

color: #000;

text-align: center;

box-sizing: border-box;

vertical-align: middle;

}

}}}{{{#!style

.bent-line {

display: block;

width: 20px;

height: 20px;

border-left: 1.5px solid #ced4da;

border-bottom: 1.5px solid #ced4da;

border-bottom-left-radius: 4px;

margin: -2px 0 0 15px;

}

}}}{{{#!style

.tree-branch {

display: inline-table;

vertical-align: top;

}

}}}{{{#!style

.tree-sub {

display: inline-table;

vertical-align: top;

margin-left: 34px;

margin-top: -10px;

}

}}}{{{#!style

.tree-leaf {

display: inline-block;

margin-left: 30px;

margin-top: -10px;

}

}}}{{{#!style

.line-extend {

background-image: linear-gradient(#ced4da, #ced4da);

background-repeat: no-repeat;

background-position: 15px 35px;

}

}}}본문과 style 구분을 위한 텍스트.

{{{#!wiki class="custom-container"

육상식물

}}}

{{{#!wiki class="bent-line"

}}}{{{#!wiki class="tree-sub line-extend" style="background-size: 1.5px 490px;"

{{{#!wiki class="custom-container"

관다발식물

}}}

{{{#!wiki class="bent-line"

}}}{{{#!wiki class="tree-sub line-extend" style="background-size: 1.5px 250px;"

{{{#!wiki class="custom-container"

종자식물

}}}

{{{#!wiki class="bent-line"

}}}{{{#!wiki class="tree-sub line-extend" style="background-size: 1.5px 150px;"

{{{#!wiki class="custom-container"

속씨식물

}}}

{{{#!wiki class="bent-line"

}}}{{{#!wiki class="tree-sub line-extend" style="background-size: 1.5px 60px;"

{{{#!wiki class="custom-container"

쌍떡잎식물

}}}

{{{#!wiki class="bent-line"

}}}{{{#!wiki class="tree-leaf"

{{{#!wiki class="custom-container"

장미군

}}}}}}

{{{#!wiki class="bent-line"

}}}{{{#!wiki class="tree-leaf"

{{{#!wiki class="custom-container"

국화군

}}}}}}}}}

{{{#!wiki class="bent-line"

}}}{{{#!wiki class="tree-leaf"

{{{#!wiki class="custom-container"

외떡잎식물

}}}}}}}}}

{{{#!wiki class="bent-line"

}}}{{{#!wiki class="tree-sub line-extend" style="background-size: 1.5px 110px;"

{{{#!wiki class="custom-container"

겉씨식물

}}}

{{{#!wiki class="bent-line"

}}}{{{#!wiki class="tree-leaf"

{{{#!wiki class="custom-container"

소철류

}}}}}}

{{{#!wiki class="bent-line"

}}}{{{#!wiki class="tree-leaf"

{{{#!wiki class="custom-container"

은행류

}}}}}}

{{{#!wiki class="bent-line"

}}}{{{#!wiki class="tree-leaf"

{{{#!wiki class="custom-container"

구과류

}}}}}}}}}}}}

{{{#!wiki class="bent-line"

}}}{{{#!wiki class="tree-leaf"

{{{#!wiki class="custom-container"

포자식물

}}}}}}}}}