기존 레이아웃 잡을때

div만을 이용한 레이아웃 -> 보통 블로그와 같은 형식의 사용시 이용

----------------- default.css -----------------

@charset "utf-8";

@import url("base.css");

@import url("main.css");

@import url("layout.css");

@import url("section1.css");

@import url("section2.css");

@import url("board.css");

@media print {}

----------------- base.css -----------------

/* Design Geulggol WebTeam (http://ggad.co.kr/) 김지영 2010.05.05 */

/* Base */

* {margin:0; padding:0; font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}

body {font-size:75%;line-height:18px;position:relative;color:#444444;}

img {vertical-align:top;border:none;}

fieldset, button {border:none;}

hr, button img {display:none;margin:0;padding:0;}

ul, ol, dl, li, dt, dd {list-style: none;}

p {text-align:justify;}

a {text-decoration:none;}

a:hover, a:active, a:focus {text-decoration:underline;}

textarea {overflow:auto; padding:5px;}

labe l{cursor:pointer;}

address, em {font-style:normal;font-weight:normal;}

html:first-child select {padding-right:6px; height:20px;} /* Opera 9 & Below Fix */

option {padding-right:6px;} /* Firefox Fix */

/* hidden contents */

#accessibility, .

skip,

hr,

legend,

caption {position:absolute; width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; z-index:-1;}

----------------- Layout.css -----------------

/* Design Geulggol WebTeam (http://ggad.co.kr/) 김지영 2010.05.05 */

/* Layout Selector */

#wrap {width:960px; padding:20px; background:#EFEFEF}

/* Header */

#header {width:960px; height:100px; margin-bottom:20px; background:#FCC;}

.logo

#util {}

#gnb {}

#search {}

.h1 {}

.h2 {}

...

#container {width:960px; margin-bottom:20px; background:#E0E0E0;}

/* Footer */

#footer {width:960px; height:100px; clear:both; background:#FC6}

.fmenu {}

.flogo {}

.copyright {}

address {}

.link {}

/* Navigation */

#snb {width:160px; float:left; margin-right:20px; background:#669}

/* Quick menu */

#quick {width:100px; height:200px; float:right; position:fixed; display:inline; margin-left:20px; background:#71BCD9}

----------------- section1.css -----------------

/* Design Geulggol WebTeam (http://ggad.co.kr/) 김지영 2010.05.05 */

/* Content */

.section { }

================================실제 레이아웃===============================================

<div id="wrap">

<div id="header">
<h1></h1>
</div>

<p id="message">
<strong>금주의 이벤트 : </strong> 사진책을 주문하시면 30% 추가 적립해드려요.
</p>

<div id="content">
<div class="gutter">
......컨텐츠 영역....
<dl class="feature">
<dt> <img src="img/bldg.jpg" width="150" height="113" alt="building" /> 주요 사업내용</dt>
<dd>쉽고 안전한 내 포토관리, 원본파일을 저장하기에도...</dd>
</dl>
</div>
</div>

<div id="sidebar">
<div class="gutter">
......사이드 바 영역.........
</div>
</div>

<div id="footer">
<p>Copyright © 2003-2006 enbee.com, Inc. All rights reserved.</p>
</div>

</div> 

======================기본 style ========================
body{
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
font-size: small
background: #fff;
}

/* 레이아웃 구조 */
#content{
float: left;
width: 70%;
}

#sidebar{
float: right;
width: 30%
}

#footer{
clear: both;
background: #828377;
}

dl.feature{
margin: 150x 0;
padding: 15px;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
}
////////////////////////////////////////////////////////////////////////////////////////////

간단하게 예를 들자면 ,

과일의 종류
사과, 배, 귤 등등을 말한다.
이럴때 코딩은..
과일에는 어떤것이 있는지 정의를 내리기 때문에
<dl> <-- (Definition List) 용어정의 선언.
<dt> <-- (Definition Term) 용어의 제목.
<dd> <-- (Definition Description) 용어의 설명.
으로 이루어 집니다.

과일의 종류
사과, 배, 귤
이럴때는 설명이 아니라 종류에 대한 리스트를 말하는거죠.
과일에 대한 종류(리스트)
<h1> <-- (Heading) 제목.
<ul> <-- (Unorderde List) 순서가 없는 리스트 선언.
<li> <-- (List) 리스트(종류, 목록)

<li> <-- (List) 리스트(종류, 목록)

답변이 더 헷갈리나요? ㅡㅡ; 쉽게 한다고 예를 쓴건데 써논거 읽어보니 더 어렵네요 ..

[질문] 2.dl은 어떨때 사용해야 효율적인지.

(기본적인 정의형 목록이란건 알고있습니다. 그런답변 말구 예를들자면 h1태그에 이미지를 넣는경우도 있고

p태그에 이미지를 넣는경우가 있잖아요. 이런 규칙을 알고 싶습니다.)

dl은 위에서 설명드렸고요..

h 테그는 제목테그입니다..

h 에 이미지를 넣는것은 이미지가 제목의 역활을 할수있는 로고나

제목의 강조를 위해 이미지화 한 제목이미지를 안에 넣을 수 있습니다.

즉. 제목역활을 준수해야합니다.

물론 img 테그안에 alt를 써서 텍스트로도 내용을 써줘야합니다.

p 테그는 문단테그입니다.

p 에 이미지를 넣는것은 텍스트 강조를 위해 이미지화 한 텍스트이미지를 안에 넣을 수 있습니다.

물론 img 테그안에 alt를 써서 텍스트로도 내용을 써줘야합니다.

(* img테그 속성에 alt는 웹표준안에 필수조건입니다.)

웹표준은 정의는 되어있기는 하지만, 코딩은 하는 사람마다 조금씩 틀릴수도 있습니다. 표준안이라고 말하는게 맞겠네요..

제가 봤을때는...

여기서는 p테그에 이미지를 넣는 것보다는
span(inline 영역설정)테그를 써서 작업하는게 좋다고 생각합니다만....

코딩하신분이 이건 문서라고 생각하시고 강조를 위해 이미지로 바꾼거라하면은 그것도 맞는 말이긴 합니다.

일단

* UL = 구분점이 생기며 일률적으로 표현됩니다

* DL = 제목과 내용이 분류되어서 표현이됩니다

참고

* 문단이 분리되어 형성됩니다 　　　　 / UL=O / DL=O

* 자동으로 줄바꾸기가 됩니다 　　　　 / UL=O / DL=O

* 리스트 목록으로 구분점이 생김니다 　/ UL=O / DL=X

* 한탭 안으로 들어가 정렬이 됩니다　　/ UL=O / DL=X,O

* 제목과 내용이 한탭으로 분류됩니다 　/ UL=X / DL=O

* UL => OL로 바꾸면 번호가 생깁니다　/ 1.2.3. A.B.C.

　^^ 요정도로 할까요?! ^^

///////////////////////////////////////////////////////////////////////////////////////////
html4와 5에 모두 쓰이는 레이아웃 => 단순한 레이아웃에 사용되기도 블로그형식에도 모두 사용가능. 게다가 사용시 깔끔해 보인다는 장점이 있음

<body>

<!-- <header>

</header> -->

</div>

</div>

</article>

<a href="#" id="article_modify">Modifiy</a>

<a href="#" id="article_delete">Delete</a><br/>

</div>

</header><br/>

</article><br/>

</footer>

</form><br/>

</section>

Name:<input type="text" name="write_name" id="write_name" />

PW:<input type="password" name="write_pw" id="write_pw" />

Category:<select id="write_category"></select>

Link Allow:<input type="checkbox" name="write_link" id="write_link" /><br/>

Title:<input type="text" name="write_title" id="write_title" style="width:75%;" /><br/>

</header>

</article>

</form>

</section>

</div>

Title:<input type="text" name="option_title" id="option_title" /><br/>

Private?:<input type="checkbox" name="option_islock" id="option_islock" /><br/>

Access Password:<input type="password" name="option_accesspw" id="option_accesspw" /><br/>

</td><td>

  Category Option:<br/>

</td></tr></table>

2 <textarea type="text" name="option_intro" id="option_intro" cols="90" rows="20"/></textarea><br />

</form>

</section>

</div>

</section>

<div id="inputpw_text">Need Password</div>

PW:<input type="password" name="inputpw_val" id="inputpw_val" /><br/>

</form>

</section>

</body>
================================================================

너무 어려우니깐 쉬운걸로..

<body>

</header>

<form>

</form>

</div>

<p id="gid_preview">garretz.com/</p>

</div>

<div>

</ul>

</p>

<span class="garret_address"><strong>Garretz.com/<input type="text" class="gcode" readonly="true"/></strong><br/>

<span>Share with anyone near you</span></span>

</form>

<br />

</div>

</div>

</div>

</section>

</footer>

</body>
===============================================================================

I Wannabe Guru..and I'm always following my dreams..

기존 레이아웃 잡을때

티스토리툴바

기존 레이아웃 잡을때

'[Study & Job]/[Web Dev & Pentesting]' Related Articles

티스토리툴바