위젯 코드가 어떻게 변환되는지 알수 있나요?

위젯코드가 어떻게 화면으로 만들어지는 과정이 궁금합니다.

<div class="col-md-9" style="width:100%">
     <block cond="$layout_info->recom_gallery"><img class="zbxe_widget_output" widget="content" 

      skin="kso_content" colorset="white" content_type="document" module_srls="{$layout_info->recom_gallery}"

      list_type="gallery" tab_type="none" markup_type="table" list_count="20" cols_list_count="4" page_count="2"

      subject_cut_size="20" content_cut_size="40" option_view="thumbnail,title,regdate,nickname"

      show_browser_title="N" show_comment_count="Y" show_trackback_count="N" show_category="N"

      show_icon="N" order_target="regdate" order_type="desc" thumbnail_type="crop" thumbnail_width="400"

      thumbnail_height="300"/>
      </block>
</div>

위의 위젯 코드가 어떻게 실제 html 소스로 변환이 되는지 궁금합니다.

위 같은 위젯 코드를 사용하면 아래의 html로 변환 됩니다.

============================================

<div class="col-md-9" style="width:100%">
    <div class="xe-widget-wrapper " style="">
        <div style="*zoom:1;padding:0px 0px 0px 0px !important;">
            <div class="kso_widgetContainer">
                <div class="row kso_widgetGalleryA">
                    <div class="col-sm-6 col-md-3 col-lg-3">
                        <div class="thumbnail mBottom30" style="">
                            <a href="/487" class="thumb">
                                <img src="http://abc.com/crop.jpg" class="img-responsive marginAuto">
                                <div class="overlay-wrap">
                                    <div class="overlay"><span><i class="icon-search"></i></span></div>
                                </div>
                             </a>
                            <div class="caption text-center">
                                <a href="/487" class="title">타이틀명</a>
                            </div>
                        </div>
                    </div><!-- End col-md -->
                </div><!-- End row -->
            </div>
        </div>
    </div>
</div>

==============================================

어떻게 이렇게 바뀌는지 알고 싶습니다.

그리고 위젯코드에서 class를 추가하고 싶습니다.

가령 image 부분의 padding 속성을 추가 하고 싶을때 어떻게 해야 하는지요??