"부트스트랩에 대한 심층적인 이해" 읽기 노트: 3장 CSS 레이아웃

<h2>1. 컨셉 개요</h2> <div>Bootstrap은 H5를 기반으로 개발되었습니다. 모바일 퍼스트(미디어 문의 문구 필수)를 표방하며, 다양한 브라우저를 지원하지 않습니다. </div> <div>반응형 이미지: 최대 너비:100% 높이:자동;</div> <div>다음을 추가할 수 있습니다: .img-반응형 클래스</div> <div>타이포그래피의 기본 스타일은 다음과 같습니다. </div> <div>본문 여백은 0, 배경색은 흰색, 줄간격은 20/14배</div> <div>Normalize.css 라이브러리를 사용하여 브라우저 간의 차이를 최소화하세요</div> <div>중앙 컨테이너 컨테이너에는 최대 범위가 있습니다. (기기에 따라 좌우 최대 여백은 자동입니다) </div> <div> </div> <h2>2. 기본 텍스트 조판(전역 설정) </h2> <div> <h2>1.<span style="line-height: 1.6;">제목(h 태그, 소문자 태그) </span> </h2> <div> <div id="highlighter_795477" class="syntaxhighlighter html" style="width: 1276.8px;"> <div id="highlighter_361744" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" style="width: 1275px;" border="0" cellpadding="0"> <tr> <td> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" style="width: 1275px;" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> </td> <td class="code" style="width: 1173px;"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h1</code><code class="html plain">>header1<</code><code class="html keyword">small</code><code class="html plain">>small标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h1</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h2</code><code class="html plain">>header2<</code><code class="html keyword">small</code><code class="html plain">>small标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h2</code><code class="html plain">></code></div> <div class="line number3 index2 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h3</code><code class="html plain">>header3<</code><code class="html keyword">small</code><code class="html plain">>small标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h3</code><code class="html plain">></code></div> <div class="line number4 index3 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h4</code><code class="html plain">>header4<</code><code class="html keyword">small</code><code class="html plain">>small标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h4</code><code class="html plain">></code></div> <div class="line number5 index4 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h5</code><code class="html plain">>header5<</code><code class="html keyword">small</code><code class="html plain">>small标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h5</code><code class="html plain">></code></div> <div class="line number6 index5 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h6</code><code class="html plain">>header6<</code><code class="html keyword">small</code><code class="html plain">>small标记的副标题</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h6</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> <div class="line number2 index1 alt1" style="height: 16px;">2 <div class="line number3 index2 alt2" style="height: 16px;">3 <div class="line number4 index3 alt1" style="height: 16px;">4 <div class="line number5 index4 alt2" style="height: 16px;">5 <div class="line number6 index5 alt1" style="height: 16px;">6 </div> </div> </div> </div> </div> </div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="html plain"><</code><code class="html 키워드">h1</code><code class="html plain">>header1<</code><code class="html 키워드">작은</code><code class="html plain">>작은 태그의 부제</</code > <code class="html 키워드">작음</code><code class="html plain">></</code><code class="html 키워드">h1</code><code class = "html plain">></code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html plain"><</code><code class="html 키워드">h2</code><code class="html plain">>header2<</code><code class="html 키워드">작은</code><code class="html plain">>작은 태그의 부제</code> <code class="html 키워드">작음</code><code class="html plain">></</code><code class="html 키워드">h2</code><code class = "html plain">></code> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html plain"><</code><code class="html 키워드">h3</code><code class="html plain">>header3<</code><code class="html 키워드">작은</code><code class="html plain">>작은 태그의 부제</</code > <code class="html 키워드">작음</code><code class="html plain">></</code><code class="html 키워드">h3</code><code class = "html plain">></code> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html plain"><</code><code class="html 키워드">h4</code><code class="html plain">>header4<</code><code class="html 키워드">작은</code><code class="html plain">>작은 태그의 부제</</code > <code class="html 키워드">작음</code><code class="html plain">></</code><code class="html 키워드">h4</code><code class = "html plain">></code> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html plain"><</code><code class="html 키워드">h5</code><code class="html plain">>header5<</code><code class="html 키워드">작은</code><code class="html plain">>작은 태그의 부제</</code > <code class="html 키워드">작음</code><code class="html plain">></</code><code class="html 키워드">h5</code><code class = "html plain">></code> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html plain"><</code><code class="html 키워드">h6</code><code class="html plain">>header6<</code><code class="html 키워드">작은</code><code class="html plain">>작은 태그의 부제</</code > <code class="html 키워드">작음</code><code class="html plain">></</code><code class="html 키워드">h6</code><code class = "html plain">></code> </div> </div> </div> </div> </div> </div> </div> </td> </tr> </table> </div> </div> </div> <img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142739102-1895601554.png" alt="" border="0"><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142740055-2109177660.jpg" alt="" border="0"> </div> </div> <div> <p>모든 제목 요소의 <small> 콘텐츠의 글꼴 색상은 회색<span style="line-height: 1.6;">(#999999)이며 줄 간격은 1입니다. </span></p> <p><small> 내의 텍스트 글꼴은 h1, h2 및 h3의 해당 <span style="line-height: 1.6;"> 글꼴 크기의 65%인 반면 h4, h5 및 h6의 경우 75%입니다. </span></p> </div> <p> </p> <p><span style="line-height: 1.6;">A. 글꼴 크기는 14px이고 간격은 20px입니다. p 요소의 하단 여백은 줄 간격(10px)의 절반입니다. </span></p> <p><span style="line-height: 1.6;">B.하이라이트 </span></p> <p><span style="line-height: 1.6;"><span>강조하고 싶지만 h 태그와 동일한 가중치를 적용하고 싶지 않은 텍스트가 있는 경우 class="lead"</span><br></span></p> <p> </p> <div id="highlighter_393077" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tr> <td> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">span</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"lead"</code><code class="html plain">>email me</</code><code class="html keyword">span</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html 키워드">span</code> <code class="html color1">클래스</code><code class="html plain">=</code><code class="html string">"lead"</code><code class="html plain" >>이메일 보내기</</code><code class="html 키워드">span</code><code class="html plain">></code></div> </div> </td> </tr> </table> </div> <p> <span style="line-height: 1.6;"> </span></p>그림과 같이 Lead와 h1의 비교 효과 : <p><span style="line-height: 1.6;"> <img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142740539-2045389970.png" alt="" border="0"><br></span></p> <h2></h2> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;">2. 텍스트 강조<div class="wiz-table-body"> <table style="width: 100%;" border="1" bgcolor="#FFFFFF"> <tbody> <tr> <td style="width: 50%;">强调元素</td> <td style="width: 50%;">表现</td> </tr> <tr> <td style="width: 50%;"> <p>small</p> <p>（可以直接套用.small类）</p> </td> <td style="width: 50%;">小号文本</td> </tr> <tr> <td style="width: 50%;">strong</td> <td style="width: 50%;">着重（加粗）</td> </tr> <tr> <td style="width: 50%;">em</td> <td style="width: 50%;">斜体</td> </tr> <tr> <td style="width: 50%;">cite</td> <td style="width: 50%;">引用来源，字体大小为85%</td> </tr> </tbody> </table> <tr> <td style="width: 50%;">강조 요소</td> <td style="width: 50%;">성능</td> </tr> <tr> <td> 작은 (.small클래스를 직접 신청하실 수 있습니다) </td> <td style="width: 50%;">작은 텍스트</td> </tr> <tr> <td style="너비: 50%;">강함</td> <td style="width: 50%;">강조(굵게)</td> </tr> <tr> <td style="너비: 50%;">em</td> <td style="너비: 50%;">기울임꼴</td> </tr> <tr> <td style="width: 50%;">인용</td> <td style="width: 50%;">출처 인용, 글꼴 크기는 85%</td> </tr> </div> </div> <div> </div> <h2>3. 약어 abr 및 .initialism</h2> <p>두 가지 모두 제목 속성과 함께 사용해야 하는 밑줄 점선 호버 손 효과를 얻을 수 있습니다. </p> <h2>4. 주소</h2> <p>연락처 정보와 관련된 정보를 패키지화하는 데 사용됩니다. 스타일의 차이는 간격과 밑단 스타일이 약간 다르다는 것입니다. </p> <div id="highlighter_86830" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tr> <td> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> <div class="line number9 index8 alt2" style="height: 16px;">9</div> <div class="line number10 index9 alt1" style="height: 16px;">10</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">address</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">strong</code><code class="html plain">>Twitter, Inc.</</code><code class="html keyword">strong</code><code class="html plain">><</code><code class="html keyword">br</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain">795 Folsom Ave, Suite 600<</code><code class="html keyword">br</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain">San Francisco, CA 94107<</code><code class="html keyword">br</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">abbr</code> <code class="html color1">title</code><code class="html plain">=</code><code class="html string">"Phone"</code><code class="html plain">>P:</</code><code class="html keyword">abbr</code><code class="html plain">>(123) 456-7890</code> </div> <div class="line number6 index5 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">address</code><code class="html plain">></code></div> <div class="line number7 index6 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">address</code><code class="html plain">></code></div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">strong</code><code class="html plain">>汤姆大叔</</code><code class="html keyword">strong</code><code class="html plain">><</code><code class="html keyword">br</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">a</code> <code class="html color1">href</code><code class="html plain">=</code><code class="html string">"mailto:#"</code><code class="html plain">>tomxu@outlook.com</</code><code class="html keyword">a</code><code class="html plain">></code> </div> <div class="line number10 index9 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">address</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> <div class="line number2 index1 alt1" style="height: 16px;">2 <div class="line number3 index2 alt2" style="height: 16px;">3 <div class="line number4 index3 alt1" style="height: 16px;">4 <div class="line number5 index4 alt2" style="height: 16px;">5 <div class="line number6 index5 alt1" style="height: 16px;">6 <div class="line number7 index6 alt2" style="height: 16px;">7 <div class="line number8 index7 alt1" style="height: 16px;">8 <div class="line number9 index8 alt2" style="height: 16px;">9 <div class="line number10 index9 alt1" style="height: 16px;">10 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="html plain"><</code><code class="html 키워드">주소</code><code class="html plain">></code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html space"> </code><code class="html plain"><</code><code class ="html 키워드">강력</code><code class="html plain">>Twitter, Inc.</</code><code class="html 키워드">강력</code><code 클래스 ="html plain">><</code><code class="html 키워드">br</code><code class="html plain">></code> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html space"> </code><code class="html plain">795 Folsom Ave, Suite 600<</ code><code class="html 키워드">br</code><code class="html plain">></code> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html space"> </code><code class="html plain">San Francisco, CA 94107<</code ><code class="html 키워드">br</code><code class="html plain">></code> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html space"> </code><code class="html plain"><</code><code class ="html 키워드">abbr</code> <code class="html color1">제목</code><code class="html plain">=</code><code class="html string">"전화 "</code><code class="html plain">>P:</</code><code class="html 키워드">abbr</code><code class="html plain">> (123) 456-7890</code> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html plain"></</code><code class="html 키워드">주소</code>< code class="html plain">></code> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html plain"><</code><code class="html 키워드">주소</code><code class="html plain">></code> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html space"> </code><code class="html plain"><</code><code class ="html 키워드">강력</code><code class="html plain">>톰 삼촌</</code><code class="html 키워드">강력</code><code class=" html plain">><</code><code class="html 키워드">br</code><code class="html plain">></code> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="html space"> </code><code class="html plain"><</code><code class ="html 키워드">a</code> <code class="html color1">href</code><code class="html plain">=</code><code class="html string">"mailto :#"</code><code class="html plain">>tomxu@outlook.com</</code><code class="html 키워드">a</code><code class="html plain ">></code> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="html plain"></</code><code class="html 키워드">주소</code>< code class="html plain">></code> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </td> </tr> </table> </div> </div> </div> <p>효과는 사진과 같습니다</p> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741086-1251850225.png" alt="" border="0"></p> <h2><span style="line-height: 1.6;">5. 인용구 인용</span></h2> <p>일반적인 인용 형식은 </p>입니다. <div id="highlighter_518004" class="syntaxhighlighter as3"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tr> <td> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="as3 plain"><blockquote></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="as3 spaces">    </code><code class="as3 plain"><p>爱情不是你想买想买就能买</p></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="as3 spaces">    </code><code class="as3 plain"><small>出自<cite>爱情买卖</cite></small></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"><code class="as3 plain"></blockquote></code></div> </div> </td> </tr> </tbody> </table> <div class="line number2 index1 alt1" style="height: 16px;">2 <div class="line number3 index2 alt2" style="height: 16px;">3 <div class="line number4 index3 alt1" style="height: 16px;">4 </div> </div> </div> </div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="as3 plain"><blockquote></code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="as3 space"> </code><code class="as3 plain"><p>사랑은 당신이 하는 것이 아닙니다. 사고싶다 원하시면 구매하셔도 됩니다</p></code> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="as3 space"> </code><code class="as3 plain"><small>from<cite> 비즈니스</cite></small></code> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="as3 plain"></blockquote></code> </div> </div> </div> </div> </div> </td> </tr> </table> </div> </div> </div> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741430-49428234.png" alt="" border="0"></p> <p><span style="line-height: 1.6;">물론 작은 부분을 바닥글로 바꾸는 것도 같은 효과가 있습니다. </span></p> <p><span style="line-height: 1.6;">기본값은 왼쪽 정렬입니다. 오른쪽 정렬을 원할 경우 인용부호에 .pull-right 클래스를 사용할 수 있습니다. 모든 것이 오른쪽으로 떴습니다. </span></p> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741774-1723319592.png" alt="" border="0"></p> <h2>6. 목록</h2> <h3>(1) ul-li 정렬되지 않은 목록</h3> <p>부트스트랩에서 일반 목록의 ul-li 프레임워크는 기본적으로 기본값과 동일합니다. </p> <p>A. ulli 목록의 스타일은 목록 스타일에 따라 결정됩니다. 부트스트랩 프레임워크에서 .list-unstyle 클래스를 사용하세요. 소스 코드 스타일은 padding-left:0;list-style:none에 지나지 않습니다. </p> <p>참고: 목록의 중첩 목록인 경우 <span>.</span><span>list-unstyle 클래스가 조부모 ul에 적용되면 손자 li는 이를 상속받지 않습니다. </span></p> <p><span>B. 인라인 목록: 일반 ul-li가 세로로 표시됩니다. 많은 상황에서 가장 일반적인 것은 내비게이션으로, 이를 위해서는 li를 수평으로 배열해야 합니다. 이때 인라인 리스트의 <span>.list-inline 클래스</span></span></p>를 이용하시면 됩니다. <p> </p> <div id="highlighter_385611" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tr> <td> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">ul</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"list-inline"</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">            </code><code class="html plain"><</code><code class="html keyword">li</code><code class="html plain">>home</</code><code class="html keyword">li</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces">            </code><code class="html plain"><</code><code class="html keyword">li</code><code class="html plain">>article</</code><code class="html keyword">li</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">            </code><code class="html plain"><</code><code class="html keyword">li</code><code class="html plain">>about</</code><code class="html keyword">li</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"></</code><code class="html keyword">ul</code><code class="html plain">></code> </div> </div> </td> </tr> </tbody> </table> <div class="line number2 index1 alt1" style="height: 16px;">2 <div class="line number3 index2 alt2" style="height: 16px;">3 <div class="line number4 index3 alt1" style="height: 16px;">4 <div class="line number5 index4 alt2" style="height: 16px;">5 </div> </div> </div> </div> </div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="html plain"><</code><code class="html 키워드">ul</code> <code class="html color1">클래스</code><code class="html plain">=</code><code class="html string">"list-inline"</code><code class="html 일반">></code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html space">li</code><code class="html plain">>home< ;/</code><code class="html 키워드">li</code><code class="html plain ">></code> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html space">li</code><code class="html plain">>article< ;/</code><code class="html 키워드">li</code><code class="html plain ">></code> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html space">li</code><code class="html plain">>about< ;/</code><code class="html 키워드">li</code><code class="html plain ">></code> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html space"> </code><code class="html plain"></</code><code class="html 키워드">ul</code><code class="html plain">></code> </div> </div> </div> </div> </div> </div> </td> </tr> </table> </div> </div> </div> <p><span><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142742258-1575759483.png" alt="" border="0"><br></span></p> <h3>(2) 주문목록 올리리</h3> <p>디스플레이를 좀 더 부드럽게 만들기 위해 폰트를 변경했습니다</p> <h3>(3) dl-dt-dd 정의 목록</h3> <p>정의 목록에는 설명 정보가 포함됩니다. 부트스트랩 아래의 <span>dl-dt-dd 정의 목록</span>은 일반적으로 세로로 배열됩니다. </p> <div id="highlighter_598113" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tr> <td> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">dl</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">dt</code><code class="html plain">>标题1</</code><code class="html keyword">dt</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">dd</code><code class="html plain">>描述1</</code><code class="html keyword">dd</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">dt</code><code class="html plain">>标题2</</code><code class="html keyword">dt</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">dd</code><code class="html plain">>描述2</</code><code class="html keyword">dd</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">dt</code><code class="html plain">>标题3</</code><code class="html keyword">dt</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">dd</code><code class="html plain">>描述3</</code><code class="html keyword">dd</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">dl</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> <div class="line number2 index1 alt1" style="height: 16px;">2 <div class="line number3 index2 alt2" style="height: 16px;">3 <div class="line number4 index3 alt1" style="height: 16px;">4 <div class="line number5 index4 alt2" style="height: 16px;">5 <div class="line number6 index5 alt1" style="height: 16px;">6 <div class="line number7 index6 alt2" style="height: 16px;">7 <div class="line number8 index7 alt1" style="height: 16px;">8 </div> </div> </div> </div> </div> </div> </div> </div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="html plain"><</code><code class="html 키워드">dl</code><code class="html plain">></code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html space"> </code><code class="html plain"><</code><code class ="html 키워드">dt</code><code class="html plain">>제목 1</</code><code class="html 키워드">dt</code><code class="html 일반">></code> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html space"> </code><code class="html plain"><</code><code class ="html 키워드">dd</code><code class="html plain">>설명 1</</code><code class="html 키워드">dd</code><code class="html 일반">></code> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html space"> </code><code class="html plain"><</code><code class ="html 키워드">dt</code><code class="html plain">>제목 2</</code><code class="html 키워드">dt</code><code class="html 일반">></code> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html space"> </code><code class="html plain"><</code><code class ="html 키워드">dd</code><code class="html plain">>설명 2</</code><code class="html 키워드">dd</code><code class="html 일반">></code> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html space"> </code><code class="html plain"><</code><code class ="html 키워드">dt</code><code class="html plain">>제목 3</</code><code class="html 키워드">dt</code><code class="html 일반">></code> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html space"> </code><code class="html plain"><</code><code class ="html 키워드">dd</code><code class="html plain">>설명 3</</code><code class="html 키워드">dd</code><code class="html 일반">></code> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html plain"></</code><code class="html 키워드">dl</code>< code class="html plain">></code> </div> </div> </div> </div> </div> </div> </div> </div> </div> </td> </tr> </table> </div> </div> </div> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142742743-1319120599.png" alt="" border="0"></p> <p>我想在横向展示一个商品列表，包括描述信息。如果给dl加上<span>class="dl-horizontal"</span></p> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142743258-1006507091.png" alt="" border="0"></p> <p> </p> <h2>7. 代码</h2> <p>包括code单行代码，kbd用户输入代码和pre多行代码块。</p> <p>代码样式的用法示例如下：</p> <div id="highlighter_826630" class="syntaxhighlighter html"> <div id="highlighter_296927" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">code</code><code class="html plain">><body></body></</code><code class="html keyword">code</code><code class="html plain">><</code><code class="html keyword">br</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">kbd</code><code class="html plain">><body></body></</code><code class="html keyword">kbd</code><code class="html plain">></code></div> <div class="line number3 index2 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">pre</code><code class="html plain">><body></body></</code><code class="html keyword">pre</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744352-1730720578.png" alt="" border="0"> </div> <h3>（1）code</h3> <p><span>code内联代码可以在行间引用。原理是给code标记定义背景色，文字颜色</span></p> <h2><span>（2）kbd</span></h2> <p>kbd表示需要用户输入，可以配合input元素使用。</p> <div id="highlighter_709029" class="syntaxhighlighter js"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="js plain">请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744649-2052810696.png" alt="" border="0"></p> <h2>（3）多行代码块pre</h2> <p>pre是预编译的意思。bootstrap实现基本方法是背景-边框，高度，圆角，竖向滚动。</p> <p>粘贴进去会有空格。</p> <p>类似还有<samp>可以格式化代码。用较为标准的字体和行间距显示</p> <h2>8.其它H5标记补充</h2> <p><span>（1）<mark>,也可以使用.mark</span></p> <p> </p> <div id="highlighter_283527" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">p</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"mark"</code><code class="html plain">>this is mark text</</code><code class="html keyword">p</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><span><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744930-1750370126.png" alt="" border="0"><br></span></p> <h3><span><span>(2)del标记和s标记</span></span></h3> <div id="highlighter_100404" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tr> <td> <div class="line number1 index0 alt2" style="height: 16px;">1<table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">del</code><code class="html plain">>I am delated.</</code><code class="html keyword">del</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="html plain"><</code><code class="html 키워드">del</code><code class="html plain">>늦어졌습니다.</</code><code class="html 키워드">del</code><code class="html plain">></code> </div> </div> </td> </tr> </table> </div> </div> </div> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142746164-1214610770.png" alt="" border="0"></p> <h3> (3) ins 마크와 u 마크 </h3> <div> 밑줄, ins는 문서에 삽입되는 텍스트를 정의합니다. u 태그 <span style="line-height: 1.6;">는 ins와 의미가 다릅니다. 텍스트가 하이퍼링크가 아닌 경우에는 u 태그 </span> </div>를 사용하지 마세요. <h3>(4) 정렬 관련</h3> <div>——텍스트-왼쪽</div> <div>——텍스트 센터</div> <div>——텍스트 오른쪽</div> <div>텍스트는 왼쪽 중앙, 오른쪽 중앙에 배치됩니다. </div> <div>——text-justify: 스스로 판단하세요. Qi Xing은 머리와 꼬리 회피 규칙과 유사하게 단어 사이의 간격을 정의합니다. CSS3에도 해당 속성이 있습니다. </div> <div>——text-nowrap: 브라우저가 축소될 때 항상 한 줄 유지</div> <h3> (5) 사건관련 : </h3> <div>텍스트-소문자 소문자</div> <div>텍스트 대문자</div> <div>텍스트-초기 글자 크기를 대문자로</div> <h3>[예시 3.1] 텍스트 서식 연습</h3> <div id="highlighter_620203" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 32px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 32px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-justify"</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">h3</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-center"</code><code class="html plain">>I am afraid <</code><code class="html keyword">small</code><code class="html plain">>William Shakespeare</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h3</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 32px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-capitalize"</code><code class="html plain">>you say that you love rain, but you open your umbrella when it rains.You say that you love the sun, but you find a shadow spot when the sun shines.You say that you love the wind, but you close your windows when wind blows.</</code><code class="html keyword">p</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">p</code><code class="html plain">><mark>This is why I am afraid, you say that u love me too.</mark></</code><code class="html keyword">p</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">ins</code><code class="html plain">><</code><code class="html keyword">em</code><code class="html plain">>译文</</code><code class="html keyword">em</code><code class="html plain">></</code><code class="html keyword">ins</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1" style="height: 32px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">p</code><code class="html plain">>你说烟雨微芒，兰亭远望；后来轻揽婆娑，深遮霓裳。你说春光烂漫，绿袖红香；后来内掩西楼，静立卿旁。你说软风轻拂，醉卧思量；后来紧掩门窗，漫帐成殇。</</code><code class="html keyword">p</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">p</code><code class="html plain">>你说情丝柔肠，如何相忘；我却眼波微转，兀自成霜。</</code><code class="html keyword">p</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142747946-1261753550.png" alt="" border="0"></p> <p> </p> <h2>3. 테이블 관련 CSS</h2> <p>테이블 구현은 테이블에 .table 클래스를 추가하는 것입니다</p> <h3>[예시 3.2]<span style="line-height: 1.6;">행 5개, 열 5개로 표를 만들고 정보를 기록한다</span> </h3> <p> </p> <div id="highlighter_341065" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> <div class="line number9 index8 alt2" style="height: 16px;">9</div> <div class="line number10 index9 alt1" style="height: 16px;">10</div> <div class="line number11 index10 alt2" style="height: 16px;">11</div> <div class="line number12 index11 alt1" style="height: 16px;">12</div> <div class="line number13 index12 alt2" style="height: 16px;">13</div> <div class="line number14 index13 alt1" style="height: 16px;">14</div> <div class="line number15 index14 alt2" style="height: 16px;">15</div> <div class="line number16 index15 alt1" style="height: 16px;">16</div> <div class="line number17 index16 alt2" style="height: 16px;">17</div> <div class="line number18 index17 alt1" style="height: 16px;">18</div> <div class="line number19 index18 alt2" style="height: 16px;">19</div> <div class="line number20 index19 alt1" style="height: 16px;">20</div> <div class="line number21 index20 alt2" style="height: 16px;">21</div> <div class="line number22 index21 alt1" style="height: 16px;">22</div> <div class="line number23 index22 alt2" style="height: 16px;">23</div> <div class="line number24 index23 alt1" style="height: 16px;">24</div> <div class="line number25 index24 alt2" style="height: 16px;">25</div> <div class="line number26 index25 alt1" style="height: 16px;">26</div> <div class="line number27 index26 alt2" style="height: 16px;">27</div> <div class="line number28 index27 alt1" style="height: 16px;">28</div> <div class="line number29 index28 alt2" style="height: 16px;">29</div> <div class="line number30 index29 alt1" style="height: 16px;">30</div> <div class="line number31 index30 alt2" style="height: 16px;">31</div> <div class="line number32 index31 alt1" style="height: 16px;">32</div> <div class="line number33 index32 alt2" style="height: 16px;">33</div> <div class="line number34 index33 alt1" style="height: 16px;">34</div> <div class="line number35 index34 alt2" style="height: 16px;">35</div> <div class="line number36 index35 alt1" style="height: 16px;">36</div> <div class="line number37 index36 alt2" style="height: 16px;">37</div> <div class="line number38 index37 alt1" style="height: 16px;">38</div> <div class="line number39 index38 alt2" style="height: 16px;">39</div> <div class="line number40 index39 alt1" style="height: 16px;">40</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">table</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"><</code><code class="html keyword">thead</code><code class="html plain">><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>ID</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>TITLE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>AUTHOR</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PUBDATE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PRICE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></</code><code class="html keyword">thead</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces">                    </code> </div> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"><</code><code class="html keyword">tbody</code><code class="html plain">></code> </div> <div class="line number11 index10 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number12 index11 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>1</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number13 index12 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>西游记</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number14 index13 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>吴承恩</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number15 index14 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>10.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number16 index15 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-1</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number17 index16 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number18 index17 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number19 index18 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number20 index19 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>三国演义</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number21 index20 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>罗贯中</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number22 index21 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>20.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number23 index22 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-2</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number24 index23 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number25 index24 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number26 index25 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>3</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number27 index26 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>水浒传</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number28 index27 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>施耐庵</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number29 index28 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>30.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number30 index29 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-3</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number31 index30 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number32 index31 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number33 index32 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>4</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number34 index33 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>红楼梦</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number35 index34 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>曹雪芹</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number36 index35 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>40.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number37 index36 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-4</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number38 index37 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number39 index38 alt2" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"></</code><code class="html keyword">tbody</code><code class="html plain">></code> </div> <div class="line number40 index39 alt1" style="height: 16px;"> <code class="html spaces">                </code><code class="html plain"></</code><code class="html keyword">table</code><code class="html plain">></code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p> </p> <div>수업 스타일이 없을 때 표시: </div> <div> <img style="max-width:90%"282e148f-361a-409f-bbb0-2931f04935c9_files/localimage.png') no-repeat center center; border: 1px solid #ddd;" src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748571-675461791.gif" alt="" border="0"> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748961-1101927088.png" alt="" border="0"></p> <h2>1.테이블 기본 스타일</h2> <h3>(1) table 태그에 class="table"을 추가하면 효과는 다음과 같습니다. </h3> </div> <div> <img style="max-width:90%"282e148f-361a-409f-bbb0-2931f04935c9_files/localimage.png') no-repeat center center; border: 1px solid #ddd;" src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748571-675461791.gif" alt="" border="0"> <p><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142749539-745591421.png" alt="" border="0"></p> <p> 단 몇 초 만에 키가 크고, 부자가 되고, 잘생겨질 수 있나요? </p> </div> <h3>(2) 대체 행의 색상이 변경됩니다.<span>테이블 줄무늬</span> </h3> <p><span><span>테이블 스트라이프: 얼룩말 횡단</span><br></span></p> <p><span>CSS3의 :nth-child 구현 사용. </span></p> <h3>(3) 테두리 추가</h3> <p>모든 셀에 1px 테두리를 추가하려면 .table-bordered를 사용하세요. </p> <h3> (4) 호버 하이라이트 </h3> <p>.table:hover를 사용하여 마우스를 올리면 현재 행을 강조표시합니다</p> <h3>(5) 컴팩트 테이블</h3> <p><span><span>table-densed: 압축되어 약간 더 작습니다. 셀 패딩을 줄입니다. 모두 적용한 후의 모습입니다. </span><br></span></p> <p><span><img src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142750039-106969313.png" alt="" border="0"><br></span></p> <p>코드 목록</p> <div id="highlighter_419714" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> <div class="line number9 index8 alt2" style="height: 16px;">9</div> <div class="line number10 index9 alt1" style="height: 16px;">10</div> <div class="line number11 index10 alt2" style="height: 16px;">11</div> <div class="line number12 index11 alt1" style="height: 16px;">12</div> <div class="line number13 index12 alt2" style="height: 16px;">13</div> <div class="line number14 index13 alt1" style="height: 16px;">14</div> <div class="line number15 index14 alt2" style="height: 16px;">15</div> <div class="line number16 index15 alt1" style="height: 16px;">16</div> <div class="line number17 index16 alt2" style="height: 16px;">17</div> <div class="line number18 index17 alt1" style="height: 16px;">18</div> <div class="line number19 index18 alt2" style="height: 16px;">19</div> <div class="line number20 index19 alt1" style="height: 16px;">20</div> <div class="line number21 index20 alt2" style="height: 16px;">21</div> <div class="line number22 index21 alt1" style="height: 16px;">22</div> <div class="line number23 index22 alt2" style="height: 16px;">23</div> <div class="line number24 index23 alt1" style="height: 16px;">24</div> <div class="line number25 index24 alt2" style="height: 16px;">25</div> <div class="line number26 index25 alt1" style="height: 16px;">26</div> <div class="line number27 index26 alt2" style="height: 16px;">27</div> <div class="line number28 index27 alt1" style="height: 16px;">28</div> <div class="line number29 index28 alt2" style="height: 16px;">29</div> <div class="line number30 index29 alt1" style="height: 16px;">30</div> <div class="line number31 index30 alt2" style="height: 16px;">31</div> <div class="line number32 index31 alt1" style="height: 16px;">32</div> <div class="line number33 index32 alt2" style="height: 16px;">33</div> <div class="line number34 index33 alt1" style="height: 16px;">34</div> <div class="line number35 index34 alt2" style="height: 16px;">35</div> <div class="line number36 index35 alt1" style="height: 16px;">36</div> <div class="line number37 index36 alt2" style="height: 16px;">37</div> <div class="line number38 index37 alt1" style="height: 16px;">38</div> <div class="line number39 index38 alt2" style="height: 16px;">39</div> <div class="line number40 index39 alt1" style="height: 16px;">40</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">table</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"table table-bordered table-striped table-hover table-condensed"</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"><</code><code class="html keyword">thead</code><code class="html plain">><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>ID</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>TITLE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>AUTHOR</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PUBDATE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PRICE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></</code><code class="html keyword">thead</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces">                     </code> </div> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="html spaces">                    </code><code class="html plain"><</code><code class="html keyword">tbody</code><code class="html plain">></code> </div> <div class="line number11 index10 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number12 index11 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>1</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number13 index12 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>西游记</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number14 index13 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>吴承恩</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number15 index14 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>10.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number16 index15 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-1</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number17 index16 alt2" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number18 index17 alt1" style="height: 16px;"> <code class="html spaces">                        </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number19 index18 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number20 index19 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>三国演义</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number21 index20 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>罗贯中</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number22 index21 alt1" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>20.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number23 index22 alt2" style="height: 16px;"> <code class="html spaces">                            </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-2</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number24 index23 alt1" style="height: 16px;"><c></c></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div>