목차
1. 컨셉 개요
2. 기본 텍스트 조판(전역 설정)
3. 약어 abr 및 .initialism
4. 주소
5. 인용구 인용" >5. 인용구 인용
6. 목록
(1) ul-li 정렬되지 않은 목록
(2) 주문목록 올리리
(3) dl-dt-dd 정의 목록
7. 代码
(1)code
(2)kbd
(3)多行代码块pre
8.其它H5标记补充
(2)del标记和s标记
(3) ins 마크와 u 마크
(4) 정렬 관련
(5) 사건관련 :
[예시 3.1] 텍스트 서식 연습
3. 테이블 관련 CSS
1.테이블 기본 스타일
(1) table 태그에 class="table"을 추가하면 효과는 다음과 같습니다.
(3) 테두리 추가
(4) 호버 하이라이트
(5) 컴팩트 테이블
웹 프론트엔드 HTML 튜토리얼 '부트스트랩에 대한 심층적인 이해' 읽기 노트: 3장 CSS 레이아웃

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

Oct 11, 2016 pm 02:03 PM

<h2 id="컨셉-개요">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 id="기본-텍스트-조판-전역-설정">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="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142739102-1895601554.png" class="lazy" alt="" border="0"><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142740055-2109177660.jpg" class="lazy" 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="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142740539-2045389970.png" class="lazy" 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 id="약어-abr-및-initialism">3. 약어 abr 및 .initialism</h2> <p>두 가지 모두 제목 속성과 함께 사용해야 하는 밑줄 점선 호버 손 효과를 얻을 수 있습니다. </p> <h2 id="주소">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="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741086-1251850225.png" class="lazy" alt="" border="0"></p> <h2 id="span-style-line-height-인용구-인용-span"><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="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741430-49428234.png" class="lazy" 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="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741774-1723319592.png" class="lazy" alt="" border="0"></p> <h2 id="목록">6. 목록</h2> <h3 id="ul-li-정렬되지-않은-목록">(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="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142742258-1575759483.png" class="lazy" alt="" border="0"><br></span></p> <h3 id="주문목록-올리리">(2) 주문목록 올리리</h3> <p>디스플레이를 좀 더 부드럽게 만들기 위해 폰트를 변경했습니다</p> <h3 id="dl-dt-dd-정의-목록">(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="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142742743-1319120599.png" class="lazy" alt="" border="0"></p> <p>我想在横向展示一个商品列表,包括描述信息。如果给dl加上<span>class="dl-horizontal"</span></p> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142743258-1006507091.png" class="lazy" alt="" border="0"></p> <p> </p> <h2 id="代码">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="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744352-1730720578.png" class="lazy" alt="" border="0"> </div> <h3 id="code">(1)code</h3> <p><span>code内联代码可以在行间引用。原理是给code标记定义背景色,文字颜色</span></p> <h2 id="span-kbd-span"><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="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744649-2052810696.png" class="lazy" alt="" border="0"></p> <h2 id="多行代码块pre">(3)多行代码块pre</h2> <p>pre是预编译的意思。bootstrap实现基本方法是背景-边框,高度,圆角,竖向滚动。</p> <p>粘贴进去会有空格。</p> <p>类似还有<samp>可以格式化代码。用较为标准的字体和行间距显示</p> <h2 id="其它H-标记补充">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="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744930-1750370126.png" class="lazy" alt="" border="0"><br></span></p> <h3 id="span-span-del标记和s标记-span-span"><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="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142746164-1214610770.png" class="lazy" alt="" border="0"></p> <h3 id="ins-마크와-u-마크"> (3) ins 마크와 u 마크 </h3> <div> 밑줄, ins는 문서에 삽입되는 텍스트를 정의합니다. u 태그 <span style="line-height: 1.6;">는 ins와 의미가 다릅니다. 텍스트가 하이퍼링크가 아닌 경우에는 u 태그 </span> </div>를 사용하지 마세요. <h3 id="정렬-관련">(4) 정렬 관련</h3> <div>——텍스트-왼쪽</div> <div>——텍스트 센터</div> <div>——텍스트 오른쪽</div> <div>텍스트는 왼쪽 중앙, 오른쪽 중앙에 배치됩니다. </div> <div>——text-justify: 스스로 판단하세요. Qi Xing은 머리와 꼬리 회피 규칙과 유사하게 단어 사이의 간격을 정의합니다. CSS3에도 해당 속성이 있습니다. </div> <div>——text-nowrap: 브라우저가 축소될 때 항상 한 줄 유지</div> <h3 id="사건관련"> (5) 사건관련 : </h3> <div>텍스트-소문자 소문자</div> <div>텍스트 대문자</div> <div>텍스트-초기 글자 크기를 대문자로</div> <h3 id="예시-텍스트-서식-연습">[예시 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="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142747946-1261753550.png" class="lazy" alt="" border="0"></p> <p> </p> <h2 id="테이블-관련-CSS">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 src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748571-675461791.gif" class="lazy" style="max-width:90%"282e148f-361a-409f-bbb0-2931f04935c9_files/localimage.png') no-repeat center center; border: 1px solid #ddd;" alt="" border="0"> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748961-1101927088.png" class="lazy" alt="" border="0"></p> <h2 id="테이블-기본-스타일">1.테이블 기본 스타일</h2> <h3 id="table-태그에-class-table-을-추가하면-효과는-다음과-같습니다">(1) table 태그에 class="table"을 추가하면 효과는 다음과 같습니다. </h3> </div> <div> <img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748571-675461791.gif" class="lazy" style="max-width:90%"282e148f-361a-409f-bbb0-2931f04935c9_files/localimage.png') no-repeat center center; border: 1px solid #ddd;" alt="" border="0"> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142749539-745591421.png" class="lazy" 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 id="테두리-추가">(3) 테두리 추가</h3> <p>모든 셀에 1px 테두리를 추가하려면 .table-bordered를 사용하세요. </p> <h3 id="호버-하이라이트"> (4) 호버 하이라이트 </h3> <p>.table:hover를 사용하여 마우스를 올리면 현재 행을 강조표시합니다</p> <h3 id="컴팩트-테이블">(5) 컴팩트 테이블</h3> <p><span><span>table-densed: 압축되어 약간 더 작습니다. 셀 패딩을 줄입니다. 모두 적용한 후의 모습입니다. </span><br></span></p> <p><span><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142750039-106969313.png" class="lazy" 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>
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

See all articles