'부트스트랩에 대한 심층적인 이해' 읽기 노트: 1장 시작 준비

<h2 id="부트스트랩-프레임워크-소개">1. 부트스트랩 프레임워크 소개</h2> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">Bootstrap은 가장 널리 사용되는 프런트엔드 개발 프레임워크입니다. </div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">프레임워크란 개발 과정의 반제품입니다. </div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">부트스트랩에는 다음과 같은 중요한 기능이 있습니다. </div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">(1) CSS 스타일 플러그인 완성</div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">(2) 사전 정의된 풍부한 스타일 시트</div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">(3) jQuery 기반 플러그인 세트</div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">(4) 유연한 그리드 시스템</div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">다음은 부트스트랩이 활용할 수 있는 지식을 간략하게 소개합니다. </div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;"> </div> <h1 id="span-style-font-size-rem-data-wiz-span-data-wiz-span-초보자를-위한-소개-span"><span style="font-size: 1.4rem;" data-wiz-span="data-wiz-span">2. 초보자를 위한 소개</span></h1> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">제가 사용하는 버전은 3.3.x입니다</div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">다음 인터페이스는 부트스트랩 중국 공식 홈페이지에서 확인하실 수 있습니다</div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;"> <img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161009155921532-527408082.png" class="lazy" alt="" style="max-width:90%" style="max-width:90%" border="0"> <div> </div> </div> <div style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;"> </div> <p>이 책은 학습용으로 미리 컴파일된 버전을 사용합니다</p> <p> </p> <h2 id="파일-구조">3. 파일 구조</h2> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161009155921938-1247480108.png" class="lazy" alt="" style="max-width:90%" style="max-width:90%" border="0"></p> <p> </p> <p> </p> <p> </p> <p>제작 환경에서는 bootstrap.min.css와 bootstrap.min.js를 사용합니다. 글꼴 구조를 제외한 다른 파일의 이름은 임의로 지정할 수 있습니다. </p> <p> </p> <h2 id="표준-템플릿">4. 표준 템플릿</h2> <p>첫 번째 단계는 aptana에서 부트스트랩 환경을 설정하는 것입니다. </p> <p>Ctrl+N은 새 웹 프로젝트를 생성하고, 기본 프로젝트를 선택하고, 프로젝트 이름을 지정하고, 위치를 정의하고 완료합니다. </p> <p>다운로드한 폴더 dist의 이름을 bootstrap으로 바꾸고 프로젝트 폴더에 복사하여 붙여넣습니다. </p> <div id="highlighter_263880" 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> <div class="line number41 index40 alt2" style="height: 16px;">41</div> <div class="line number42 index41 alt1" style="height: 16px;">42</div> <div class="line number43 index42 alt2" style="height: 16px;">43</div> <div class="line number44 index43 alt1" style="height: 16px;">44</div> <div class="line number45 index44 alt2" style="height: 16px;">45</div> <div class="line number46 index45 alt1" style="height: 16px;">46</div> <div class="line number47 index46 alt2" style="height: 16px;">47</div> <div class="line number48 index47 alt1" style="height: 16px;">48</div> <div class="line number49 index48 alt2" style="height: 16px;">49</div> <div class="line number50 index49 alt1" style="height: 16px;">50</div> <div class="line number51 index50 alt2" style="height: 16px;">51</div> <div class="line number52 index51 alt1" style="height: 16px;">52</div> <div class="line number53 index52 alt2" style="height: 16px;">53</div> <div class="line number54 index53 alt1" style="height: 16px;">54</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><!DOCTYPE html></code></div> <div class="line number2 index1 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">html</code> <code class="html color1">lang</code><code class="html plain">=</code><code class="html string">"zh-cn"</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">head</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--页面编码 --></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">meta</code> <code class="html color1">charset</code><code class="html plain">=</code><code class="html string">"UTF-8"</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--低版本浏览器模拟渲染--></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">meta</code> <code class="html color1">http-equiv</code><code class="html plain">=</code><code class="html string">"X-UA-Compatible"</code> <code class="html color1">content</code><code class="html plain">=</code><code class="html string">"IE=Edge"</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--响应式布局：UI布局和移动设备一致，缩放大小为原始大小--></code> </div> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--也可以使用下列声明：</code></div> <div class="line number11 index10 alt2" style="height: 16px;"><code class="html spaces"> </code><code class="html comments"><meta name="viewport" content="width=device-width, initialscale=</code></div> <div class="line number12 index11 alt1" style="height: 16px;"><code class="html comments">1, maximumscale=1, user-scalable=no"></code> </div> <div class="line number13 index12 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments">意思是强制让文档宽度和设备宽度保持1：1，不允许用户单击放大浏览。注意content属性要用逗号（或分号）隔开，不规范则失效  --></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">meta</code> <code class="html color1">name</code><code class="html plain">=</code><code class="html string">"viewport"</code> <code class="html color1">content</code><code class="html plain">=</code><code class="html string">"width=deviece-width,initial-scale=1"</code><code class="html plain">></code> </div> <div class="line number15 index14 alt2" style="height: 16px;"> <code class="html spaces">        </code> </div> <div class="line number16 index15 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--支持国产浏览器的高速渲染--></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">meta</code> <code class="html color1">name</code><code class="html plain">=</code><code class="html string">"renderer"</code> <code class="html color1">content</code><code class="html plain">=</code><code class="html string">"Webkit"</code><code class="html plain">></code> </div> <div class="line number18 index17 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--在此进行SEO设置：作者、关键词、描述--></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">meta</code> <code class="html color1">name</code><code class="html plain">=</code><code class="html string">"author"</code> <code class="html color1">content</code><code class="html plain">=</code><code class="html string">"djtao"</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">meta</code> <code class="html color1">name</code><code class="html plain">=</code><code class="html string">"keywords"</code> <code class="html color1">content</code><code class="html plain">=</code><code class="html string">"djtao"</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">meta</code> <code class="html color1">name</code><code class="html plain">=</code><code class="html string">"description"</code> <code class="html color1">content</code><code class="html plain">=</code><code class="html string">"djtao"</code><code class="html plain">></code> </div> <div class="line number22 index21 alt1" style="height: 16px;"> <code class="html spaces">        </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">title</code><code class="html plain">>bootstrap基础模板</</code><code class="html keyword">title</code><code class="html plain">></code> </div> <div class="line number24 index23 alt1" style="height: 16px;"> <code class="html spaces">        </code> </div> <div class="line number25 index24 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--bootstrap--></code> </div> <div class="line number26 index25 alt1" style="height: 16px;"> <code class="html spaces">        </code> </div> <div class="line number27 index26 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--以下两个js插件用于在IE8及以下支持H5元素查询的，如不用可移除 --></code> </div> <div class="line number28 index27 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--[if lt IE 9]></code> </div> <div class="line number29 index28 alt2" style="height: 16px;"> <code class="html spaces">            </code><code class="html comments"><script src="scripts/html5.min.js"></script></code> </div> <div class="line number30 index29 alt1" style="height: 16px;"> <code class="html spaces">            </code><code class="html comments"><script src="scripts/respond.min.js"></script></code> </div> <div class="line number31 index30 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><![endif]--></code> </div> <div class="line number32 index31 alt1" style="height: 16px;"> <code class="html spaces">        </code> </div> <div class="line number33 index32 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--bootstrap样式文件 --></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">link</code> <code class="html color1">rel</code><code class="html plain">=</code><code class="html string">"stylesheet"</code> <code class="html color1">href</code><code class="html plain">=</code><code class="html string">"bootstrap/css/bootstrap.css"</code><code class="html plain">></code> </div> <div class="line number35 index34 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--自定义样式文件 --></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">link</code> <code class="html color1">rel</code><code class="html plain">=</code><code class="html string">"stylesheet"</code> <code class="html color1">href</code><code class="html plain">=</code><code class="html string">"styles/css.css"</code><code class="html plain">></code> </div> <div class="line number37 index36 alt2" style="height: 16px;"> <code class="html spaces">        </code> </div> <div class="line number38 index37 alt1" style="height: 16px;"> </div> <div class="line number39 index38 alt2" style="height: 16px;"> <code class="html spaces">        </code> </div> <div class="line number40 index39 alt1" style="height: 16px;"> <code class="html spaces">        </code> </div> <div class="line number41 index40 alt2" style="height: 16px;"> <code class="html spaces">        </code> </div> <div class="line number42 index41 alt1" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> </div> <div class="line number43 index42 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> </div> <div class="line number44 index43 alt1" style="height: 16px;"> <code class="html spaces">    </code> </div> <div class="line number45 index44 alt2" style="height: 16px;"> <code class="html spaces">    </code> </div> <div class="line number46 index45 alt1" style="height: 16px;"> <code class="html spaces">    </code> </div> <div class="line number47 index46 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--基于jQuery的脚本文件 --></code> </div> <div class="line number48 index47 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">script</code> <code class="html color1">src</code><code class="html plain">=</code><code class="html string">"scripts/jquery.min.js"</code><code class="html plain">></</code><code class="html keyword">script</code><code class="html plain">></code> </div> <div class="line number49 index48 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!-- bootstrap的jq插件 --></code> </div> <div class="line number50 index49 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">script</code> <code class="html color1">src</code><code class="html plain">=</code><code class="html string">"bootstrap/js/bootstrap.min.js"</code><code class="html plain">></</code><code class="html keyword">script</code><code class="html plain">></code> </div> <div class="line number51 index50 alt2" style="height: 16px;"> <code class="html spaces">        </code><code class="html comments"><!--自定义脚本文件 --></code> </div> <div class="line number52 index51 alt1" style="height: 16px;"> <code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">script</code> <code class="html color1">src</code><code class="html plain">=</code><code class="html string">"scripts/js.js"</code><code class="html plain">></</code><code class="html keyword">script</code><code class="html plain">></code> </div> <div class="line number53 index52 alt2" style="height: 16px;"> <code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> </div> <div class="line number54 index53 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>자유로운 사용을 위한 웹사이트입니다. </p>网上引用cdn是<p> </p> <div id="highlighter_613714" class="syntaxhighlighter as3"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tr> <td> <div class="line number1 index0 alt2" style="height: 16px;">1<div class="wiz-table-body"> <div class="line number2 index1 alt1" style="height: 16px;">2<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="as3 plain"><!-- Latest compiled and minified CSS --></code></div> <div class="line number2 index1 alt1" style="height: 16px;"><code class="as3 plain"><link rel=</code><code class="as3 string">"stylesheet"</code> <code class="as3 plain">href=</code><code class="as3 string">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"</code><code class="as3 plain">></code></div> <div class="line number3 index2 alt2" style="height: 16px;"> </div> <div class="line number4 index3 alt1" style="height: 16px;"><code class="as3 plain"><!-- Optional theme --></code></div> <div class="line number5 index4 alt2" style="height: 16px;"><code class="as3 plain"><link rel=</code><code class="as3 string">"stylesheet"</code> <code class="as3 plain">href=</code><code class="as3 string">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"</code><code class="as3 plain">></code></div> <div class="line number6 index5 alt1" style="height: 16px;"> </div> <div class="line number7 index6 alt2" style="height: 16px;"><code class="as3 plain"><!-- Latest compiled and minified JavaScript --></code></div> <div class="line number8 index7 alt1" style="height: 16px;"><code class="as3 plain"><script src=</code><code class="as3 string">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"</code><code class="as3 plain">></script></code></div> </div> </td> </tr> </tbody> </table> <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<h2> <div class="line number7 index6 alt2" style="height: 16px;">7<br> <div class="line number8 index7 alt1" style="height: 16px;">8 </div> </div> </h2> </div> </div> </div> </div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="as3 plain"><!-- 최신 컴파일 및 축소된 CSS --></code><h2> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="as3 plain"><link rel=</code><code class="as3 string">"stylesheet"< /code> <code class="as3 plain">href=</code><code class="as3 string">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min. css"</code><code class="as3 plain">></code> <div class="line number3 index2 alt2" style="height: 16px;"> <p> </p> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="as3 plain"><!-- 선택적 테마 --></code> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="as3 plain"><link rel=</code><code class="as3 string">"stylesheet"< /code> <code class="as3 plain">href=</code><code class="as3 string">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme. min.css"</code><code class="as3 plain">></code><p> </p> <div class="line number6 index5 alt1" style="height: 16px;">  <div class="line number7 index6 alt2" style="height: 16px;"> <code class="as3 plain"><!-- 최신 컴파일 및 축소된 JavaScript --></code><h2> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="as3 plain"><script src=</code><code class="as3 string">"https:/ /maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"</code><code class="as3 plain">></script></code> <h3> </h3> </div> </h2> </div> </div> </div> </div> </div> </div> </h2> </div> </div> </td> </tr> </table> <p> <img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161009155923329-34756637.jpg" class="lazy" alt="" style="max-width:90%" style="max-width:90%" border="0"> </p> <h3 id="五-CSS-기본-설명">五. CSS 기본 설명</h3> <p>1.优先级</p> <h3 id="와-原生CSS一样"> 와 原生CSS一样。</h3> <p>#xxx>.xxx>xxx</p> <div id="highlighter_396629" class="syntaxhighlighter as3">2.选择器<div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body">(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> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="as3 plain">nav>li+li{</code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="as3 spaces">    </code><code class="as3 plain">margin-left:10px;</code> </div> <div class="line number3 index2 alt2" style="height: 16px;"><code class="as3 plain">}</code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>(2)子选择器</p> <div id="highlighter_284016" class="syntaxhighlighter html">>号<div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body">(3)兄弟选择器<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">article h1~p{font-size:20px}</code></div> </div> </td> </tr> </tbody> </table> 临近选择器用+号表示, 比如说에서 一个nav-ul-li结构的导航条里, 欲设置两个li 间적외부边距. <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tr> <td> <div class="line number1 index0 alt2" style="height: 16px;">1 <div class="line number2 index1 alt1" style="height: 16px;">2 <div class="line number3 index2 alt2" style="height: 16px;">3 </div> </div> </div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="as3 plain">nav>li+li{</code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="as3 space">    </code><code class="as3 plain">margin-left:10px;</code> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="as3 plain">}</code> </div> </div> </div> </div> </td> </tr> </table> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tr> <td> <div class="line number1 index0 alt2" style="height: 16px;">1 </div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="html plain">기사 h1~p{font-size:20px}</code> </div> </div> </td> </tr> </table> </div> </div> </div> <h2 id="의사-클래스-선택자">3. 의사 클래스 선택자</h2> <p>부트스트랩에서 일반적으로 사용되는 의사 클래스는 이것에 지나지 않습니다</p> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161009155924470-1311835502.jpg" class="lazy" alt="" style="max-width:90%" style="max-width:90%" border="0"></p> <p> </p> <h2 id="표시-속성">4. 표시 속성</h2> <p>디스플레이는 사용하기 쉽지만 무분별하게 사용할 수는 없습니다. </p> <div> <img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161009155925751-1901559236.jpg" class="lazy" style="max-width:90%" alt="" border="0"> </div> <div> </div> <h2 id="미디어-상담">5. 미디어 상담</h2> <div>미디어 상담은 부트스트랩 반응형 레이아웃의 핵심 요소이지만 주로 사용되는 요소는 min, max 및 </div> <div> <div id="highlighter_83124" class="syntaxhighlighter css"> <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> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="css plain">@media(</code><code class="css keyword">max-width</code><code class="css plain">: </code><code class="css value">767px</code><code class="css plain">){</code> </div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="css spaces">    </code><code class="css comments">/*在小于768像素的屏幕中，这里样式生效*/</code> </div> <div class="line number3 index2 alt2" style="height: 16px;"><code class="css plain">}</code></div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="css plain">@media(</code><code class="css keyword">max-width</code><code class="css plain">: </code><code class="css value">767px</code><code class="css plain">) and (</code><code class="css keyword">max-width</code><code class="css plain">: </code><code class="css value">991px</code><code class="css plain">){</code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="css spaces">    </code><code class="css comments">/*在768-991像素区间的屏幕中，这里样式生效*/</code> </div> <div class="line number6 index5 alt1" style="height: 16px;"><code class="css plain">}</code></div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="css plain">@media(</code><code class="css keyword">min-width</code><code class="css plain">: </code><code class="css value">1200px</code><code class="css plain">){</code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="css spaces">    </code><code class="css comments">/*在大于等于1200像素的屏幕中，这里样式生效*/</code> </div> <div class="line number9 index8 alt2" style="height: 16px;"><code class="css plain">}</code></div> </div> </td> </tr> </tbody> </table> <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<p> </p> <div class="line number6 index5 alt1" style="height: 16px;">6 <div class="line number7 index6 alt2" style="height: 16px;">7<p> </p> <div class="line number8 index7 alt1" style="height: 16px;">8 <div class="line number9 index8 alt2" style="height: 16px;">9<h2> </h2> </div> </div> </div> </div> </div> </div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="css plain">@media(</code><code class="css 키워드">최대 너비</code><code class="css plain">: </code><code class="css value">767px</code><code class="css plain">){</code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="css space"> </code><code class="css comments">/*768픽셀보다 작은 화면에서 , 이 스타일이 적용됩니다*/</code><h3> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="css plain">}</code><br> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="css plain">@media(</code><code class="css 키워드">최대 너비</code><code class="css plain">: </code><code class="css value">767px</code><code class="css plain">) 및 (</code><code class=" css 키워드">최대 너비</code><code class="css plain">: </code><code class="css value">991px</code><code class="css plain">){ </code> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="css space"> </code><code class="css comments">/*768-991 픽셀 범위 화면에서는 이 스타일이 적용됩니다*/</code><p> </p> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="css plain">}</code> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="css plain">@media(</code><code class="css 키워드">최소 너비</code><code class="css plain">: </code><code class="css value">1200px</code><code class="css plain">){</code><div id="highlighter_717643" class="syntaxhighlighter as3"> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="css space"> </code><code class="css comments">/*보다 크거나 같은 화면 1200픽셀, 이 스타일이 적용됩니다*/</code><div id="highlighter_1893" class="syntaxhighlighter js"> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="css plain">}</code><div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </h3> </div> </div> </div> </td> </tr> </table> <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="js plain">(</code><code class="js keyword">function</code><code class="js plain">(){</code> </div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js spaces">    </code><code class="js keyword">do</code> <code class="js plain">somthing</code> </div> <div class="line number3 index2 alt2" style="height: 16px;"><code class="js plain">}() )</code></div> </div> </td> </tr> </tbody> </table> 높이도 같은 방식으로 사용할 수 있습니다. 6. 관련 JavaScript 구문 검토 (1) AND 및 or 연산자(&&, ||) (2) 즉시 함수 호출 사용을 권장합니다 <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tr> <td> <div class="line number1 index0 alt2" style="height: 16px;">1 <div class="line number2 index1 alt1" style="height: 16px;">2 <div class="line number3 index2 alt2" style="height: 16px;">3 </div> </div> </div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js plain">(</code><code class="js 키워드">함수</code><code class="js 일반">(){</code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js space"> </code><code class="js 키워드">do</code> <code class="js plain">뭔가</code> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="js plain">}() )</code> </div> </div> </div> </div> </td> </tr> </table> </div> </div> </div> <p>은 즉시 전화한다는 뜻입니다. </p> <h3 id="프로토타입">(3) 프로토타입</h3> </div> <p>BT의 JS 플러그인은 모두 객체 지향 방식을 기반으로 만들어졌습니다. </p> </div> <p>간단한 예로 덧셈과 뺄셈 연산을 정의합니다</p> <div id="highlighter_311826" 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" 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> <div class="line number11 index10 alt2" style="height: 16px;">11</div> <div class="line number12 index11 alt1" style="height: 16px;">12</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js keyword">var</code> <code class="js plain">decimalDigits = 2,</code> </div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js spaces">    </code><code class="js plain">tax = 5;</code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="js keyword">function</code> <code class="js plain">add(x, y) {</code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="js spaces">    </code><code class="js keyword">return</code> <code class="js plain">x + y;</code> </div> <div class="line number6 index5 alt1" style="height: 16px;"><code class="js plain">}</code></div> <div class="line number7 index6 alt2" style="height: 16px;"> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="js keyword">function</code> <code class="js plain">subtract(x, y) {</code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="js spaces">    </code><code class="js keyword">return</code> <code class="js plain">x - y;</code> </div> <div class="line number10 index9 alt1" style="height: 16px;"><code class="js plain">}</code></div> <div class="line number11 index10 alt2" style="height: 16px;"> </div> <div class="line number12 index11 alt1" style="height: 16px;"><code class="js comments">//alert(add(1, 3));</code></div> </div> </td> </tr> </tbody> </table> <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<p> </p> <div class="line number6 index5 alt1" style="height: 16px;">6 <div class="line number7 index6 alt2" style="height: 16px;">7<div id="highlighter_995312" class="syntaxhighlighter js"> <div class="line number8 index7 alt1" style="height: 16px;">8<div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="line number9 index8 alt2" style="height: 16px;">9<div class="wiz-table-body"> <div class="line number10 index9 alt1" style="height: 16px;">10<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="js keyword">var</code> <code class="js plain">Calculator = </code><code class="js keyword">function</code> <code class="js plain">(decimalDigits, tax) {</code> </div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js spaces">    </code><code class="js keyword">this</code><code class="js plain">.decimalDigits = decimalDigits;</code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="js spaces">    </code><code class="js keyword">this</code><code class="js plain">.tax = tax;</code> </div> <div class="line number4 index3 alt1" style="height: 16px;"><code class="js plain">};</code></div> </div> </td> </tr> </tbody> </table> <div class="line number11 index10 alt2" style="height: 16px;">11 <div class="line number12 index11 alt1" style="height: 16px;">12 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js 키워드">var</code> <code class="js plain">decimalDigits = 2,</code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js space"> </code><code class="js plain">세금 = 5;</code> <div class="line number3 index2 alt2" style="height: 16px;"> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="js 키워드">함수</code> <code class="js plain">add(x, y) { <div class="line number5 index4 alt2" style="height: 16px;"> <code class="js space"> </code><code class="js 키워드">반환</code> <code class="js plain">x + y;</code> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="js plain">}</code> <div class="line number7 index6 alt2" style="height: 16px;"> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="js 키워드">함수</code> <code class="js plain">뺄셈(x, y) { <div class="line number9 index8 alt2" style="height: 16px;"> <code class="js space"> </code><code class="js 키워드">반환</code> <code class="js plain">x - y;</code> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="js plain">}</code> <div class="line number11 index10 alt2" style="height: 16px;"> <div class="line number12 index11 alt1" style="height: 16px;"> <code class="js comments">//alert(add(1, 3));</code> </div> </div> </div> </div></code> </div> </div> </div> </div></code> </div> </div> </div> </div> </div> </td> </tr> </table> 덧셈과 뺄셈 계산 함수 객체로 다시 작성 <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tr> <td> <div class="line number1 index0 alt2" style="height: 16px;">1 <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="js 키워드">var</code> <code class="js plain">계산기 = </code><code class="js 키워드">함수</code> <code class="js plain">(decimalDigits, 세금) {</code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js space"> </code><code class="js 키워드">이</code><code class="js plain">.decimalDigits = 소수점;</code> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="js space"> </code><code class="js 키워드">이</code><code class="js plain">.tax = 세금;</code> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="js plain">};</code> </div> </div> </div> </div> </div> </td> </tr> </table> </div> </div> </div> <p>그런 다음 <span style="color: #ff6600;"></span>객체 리터럴 <strong><span style="color: #ff6600;">을 Calculator 객체의 </span>prototype</strong> 속성에 할당하여 Calculator 객체의 프로토타입을 설정합니다. </p> <div id="highlighter_350061" 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" 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="js plain">Calculator.prototype = {</code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js spaces">      </code><code class="js plain">add: </code><code class="js keyword">function</code> <code class="js plain">(x, y) {</code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="js spaces">          </code><code class="js keyword">return</code> <code class="js plain">x + y;</code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="js spaces">      </code><code class="js plain">},</code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> </div> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="js spaces">      </code><code class="js plain">subtract: </code><code class="js keyword">function</code> <code class="js plain">(x, y) {</code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="js spaces">          </code><code class="js keyword">return</code> <code class="js plain">x - y;</code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="js spaces">      </code><code class="js plain">}</code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="js spaces">  </code><code class="js plain">};</code> </div> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="js spaces">  </code><code class="js comments">//alert((new Calculator()).add(1, 3));</code> </div> </div> </td> </tr> </tbody> </table> <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<p> </p> <div class="line number6 index5 alt1" style="height: 16px;">6 <div class="line number7 index6 alt2" style="height: 16px;">7<h3> <div class="line number8 index7 alt1" style="height: 16px;">8 <div class="line number9 index8 alt2" style="height: 16px;">9<h3> <div class="line number10 index9 alt1" style="height: 16px;">10 </div> </h3> </div> </div> </h3> </div> </div> </div> </div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js plain">Calculator.prototype = {</code><p> </p> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js space"> </code><code class="js plain">추가: </code><code class="js 키워드">함수</code> <code class="js plain">(x, y) {</code> <div class="line number3 index2 alt2" style="height: 16px;"><code class="jsspace">                                                                            > <div class="line number4 index3 alt1" style="height: 16px;"> <code class="js space"> </code><code class="js plain">},</code><div id="highlighter_709217" class="syntaxhighlighter as3"> <div class="line number5 index4 alt2" style="height: 16px;"> <div id="highlighter_211333" class="syntaxhighlighter js"> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="js space"> </code><code class="js plain">빼기: </code><code class="js 키워드">함수</code> <code class="js plain">(x, y) {</code><div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="jsspace">                                                                                                                                                               "js plain">x y;</code><div class="wiz-table-body"> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="js space"> </code><code class="js plain">}</code><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> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js plain">$(</code><code class="js string">'div'</code><code class="js plain">).on(click,</code><code class="js keyword">function</code><code class="js plain">(){...});</code> </div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js plain">$(</code><code class="js string">'div'</code><code class="js plain">).off(click,</code><code class="js keyword">function</code><code class="js plain">(){...});</code> </div> </div> </td> </tr> </tbody> </table> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="js space"> </code><code class="js plain">};</code> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="js space"> </code><code class="js comments">//alert((new Calculator() ).add(1, 3));</code> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div></code></div> </div> </div> </div> </td> </tr> </table> (코드는 작성자 블로그에서 따왔습니다) 7.jQuery 지식 복습 (1) 이벤트 바인딩 JQuery에서 일반적으로 사용되는 바인딩 구문은 on/off, 바인딩/바인딩 해제입니다. 예를 들어 <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tr> <td> <div class="line number1 index0 alt2" style="height: 16px;">1 <div class="line number2 index1 alt1" style="height: 16px;">2 </div> </div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js plain">$(</code><code class="js string">'div'</code> <code class="js plain">).on(클릭,</code><code class="js 키워드">함수</code><code class="js plain">(){...}) ;</code> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="js plain">$(</code><code class="js string">'div'</code> <code class="js plain">).off(클릭,</code><code class="js 키워드">함수</code><code class="js plain">(){...}) ;</code> </div> </div> </div> </td> </tr> </table> </div> </div> </div> </div> <p><span class="con" style="font-size: 10px;">참고: 바인딩() 함수는 jQuery 1.7 이하에서 이벤트 핸들러를 바인딩하는 데 사용되는 함수입니다. on() 함수는 이벤트 바인딩을 위해 jQuery 1.7에서 제공하는 기본 함수입니다. 버전 1.7의 소개 및 매개변수 설명은 실제로 두 함수가 기본적으로 동일한 방식으로 사용되지만 이전 버전에서는 바인딩() 함수가 한 번에 하나의 이벤트 처리만 레이블 개체에 바인딩할 수 있습니다. , on() 함수는 핸들러를 여러 다른 이벤트에 동시에 바인딩할 수 있습니다. </span></p> <p>부트스트랩 방식의 바인딩은 비슷하지만 아이디어가 다릅니다. </p> <div id="highlighter_276150" 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> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="as3 plain">$(document).on(</code><code class="as3 string">'click.bs.carosel.data.api'</code><code class="as3 plain">,</code><code class="as3 string">'div'</code><code class="as3 plain">,</code><code class="as3 color3">function</code><code class="as3 plain">(){...})</code> </div> </div> </td> </tr> </tbody> </table> </div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="as3 plain">$(document).on(</code><code class="as3 string">'클릭 .bs.carosel.data.api'</code><code class="as3 plain">,</code><code class="as3 string">'div'</code><code class="as3 plain">,</code><code class="as3 color3">함수</code><code class="as3 plain">(){...})</code> </div> </div> </td> </tr> </table> </div> <p> </p> <p>버블링 메커니즘을 사용하여 문서의 div를 선택합니다. 성능이 향상되었습니다. </p> <h3> </h3> <p>(2) 네임스페이스</p> <p>디버깅할 때 이벤트 뒤에 click.djtao와 같은 문자열을 추가한 다음 트리거 메소드를 사용하여 트리거하면 원래 클릭 이벤트에는 영향을 미치지 않습니다. </p> <h3> </h3> <p>(3)$.data()</p> <div id="highlighter_831802" 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">div</code> <code class="html color1">id</code><code class="html plain">=</code><code class="html string">"abc"</code> <code class="html color1">data-role</code><code class="html plain">=</code><code class="html string">"aaa"</code> <code class="html color1">data-toggle</code><code class="html plain">=</code><code class="html string">"toggle"</code> <code class="html color1">data-xxx</code><code class="html plain">=</code><code class="html string">"djtao"</code><code class="html plain">></</code><code class="html keyword">div</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tr> <td> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html 키워드">div</code> <code class="html color1">id</code><code class="html plain">=</code><code class="html string">"abc"</code> <code class="html color1" >데이터 역할</code><code class="html plain">=</code><code class="html string">"aaa"</code> <code class="html color1">데이터 전환 </code><code class="html plain">=</code><code class="html string">"전환"</code> <code class="html color1">data-xxx</code> <code class="html plain">=</code><code class="html string">"djtao"</code><code class="html plain">></</code><code class="html 키워드">div</code><code class="html plain">></code></div> <p> </p> </div> </td> </tr> </table> <div id="highlighter_197547" 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">$(</code><code class="js string">'#abc'</code><code class="js plain">).data(</code><code class="js string">'role'</code><code class="js plain">)</code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <table class="noBorderTable" border="0" cellpacing="0" cellpadding="0"> <tr> <td> <div class="line number1 index0 alt2" style="height: 16px;">1<p> </p> </div> </td> <td> <div> <div class="line number1 index0 alt2" style="height: 16px;"> <code class="js plain">$(</code><code class="js string">'#abc'</code><code class="js plain">).data(</code><code class="js string">'역할'</code><code class="js plain">)</code> <p> </p> </div> </div> </td> </tr> </table> <h2> </h2> <p>매개변수가 없으면 json을 수집하고 선언하는 것과 같습니다. var 값={역할:'aaa',toggle:'toggle',xxx:'djtao'}</p> <p> </p> <p>8.H5 보조 속성</p> <p>시각 장애인과 다른 사람들을 위한 독서를 지원할 수 있습니다. 일반적으로 arial이라는 접두사가 붙으며 집합적으로 arial 속성이라고 합니다. </p> <p> </p> <p>【후기】</p> <div>국내 작가들이 쓴 많은 책들은 API 문서를 읽는 것과 같은 느낌을 줍니다. 말을 많이 할수록 실수도 늘어나고 비용도 많이 듭니다(@﹏@)~. . 하지만 API 문서 자체의 출발점은 낮지 않다. '깊이 있는 이해'라고 하기 때문에 여러 번 읽고 여러 프로젝트를 경험해 보자. 아마도 API 문서보다 그 가치가 더 높다고 볼 수 있을 것입니다. </div> <h1 style="margin: 0px; font-family: helvetica, 'hiragino sans gb', 微软雅黑, 'microsoft yahei ui', simsun, simhei, arial, sans-serif; font-size: 15px; line-height: 24px;">이 독서 노트 시리즈는 지금 배운 내용을 적용하고 빠르게 시작한다는 아이디어를 바탕으로 책의 웹사이트에서 수집한 책 밖의 몇 가지 예를 삽입합니다. 기본적으로 다 제가 직접 타이핑하고, 일부 내용을 직접 수정해서, 저의 학습 과정을 기록한 글 시리즈입니다. 그게 다야. <br> <br> </h1> </div>위즈노트(Wiz)에서<div id="MySignature"> </div> <div class="clear"></div> </div> </div> </div>