'web standard'에 해당되는 글 85건

  1. 2008.07.29 테이블
  2. 2008.07.29 박스모델
  3. 2008.07.29 ul과 ol 과 dl
  4. 2008.07.28 티스토리 스킨 첫번째 작업 1
  5. 2008.06.25 웹표준 코딩중..
web standard/tag2008. 7. 29. 10:28

테이블

table의 구성

 

<thead>, <tbody>, <tfoot>, <th>, <td>등을 적합하게 사용한 작업은 접근성을 높이며

효율적인 css 참조도 쉬워진다.



1. cellpadding, cellspacing / border-collapse, padding



 내용 예전 태그 추천 css
cellpadding 컨텐츠와 cell경계 사이의 영역 cellpadding="0" border-collapse: collapse;
cellspacing cell 간의 간격 cellspacing="0" table th, table td {padding: 0;}
border cell 경계선 border="0" 생략무방




2. 테이블 고정(table-layout: fixed)


width값을 정확하게 입력했는데 입력한데로 표현되지 않을 수 있다.

이때문에 <img src="blank.gif" width="100">을 이용해서 width를 강제로 고정하는 방법을 사용했었다. 이를 보완하는 것이 table-layout 속성

table {

table-layout : fixed;

}




주의사항


table-layout: fixed;로 width값을 조정할 경우 첫번째 줄 외에 다른 값은 무시된다.

[출처] 웹표준가이드(11)/테이블(Table)|작성자 마그리뜨


'web standard > tag' 카테고리의 다른 글

embed태그  (0) 2011.02.06
object를 이용한 플래시 삽입  (0) 2010.04.28
textarea 컨트롤  (0) 2008.11.04
올바른 마크업을 위한 준수사항  (0) 2008.07.29
ul과 ol 과 dl  (0) 2008.07.29
Posted by 수라
web standard/etc.2008. 7. 29. 10:27

박스모델

박스모델 (Box Model)



<박스모델>



 박스의 구성 content + padding + border + margin + offset로 구성
 비주얼
1. 화면에서 보이는 부분 : content + padding + border
2. 화면에서 보이지 않는 부분 : margin + offset
 width값의 범위

1. 잘못된 width 값 : content + padding + border ⇒ 화면에 커지게 된다.

2. 올바른 width 값 : padding, border를 제외한 순수한 content 영역 




 

 

1. IE DOCTYPE Switching


숙지사항


DOCTYPE선언에 따라 호환 혹은 표준으로 랜더링 된다.

호환랜더링이 되는

3가지 경우

비표준DTD선언 혹은 선언하지 않을 경우,

DOCTYPE선언 앞에 다른 문자열 혹은 공백이 들어갈 경우

표준랜더링 HTML 4.01, XHTML 1.0과 같이 W3C의 선언을 정확하게 할 경우



랜더링에 따른 width, height 차이

 호환랜더링 widht, height값이 줄어든다.
 표준랜더링 width, height영역이 변화 없이 컨텐츠의 영역을 나타낸다.





2. 중앙정열


Mark Up 

<table>를 사용해서 중앙정열을 할 경우 align="center"를 사용했지만 css를 이용한 레이아웃에서는

align="center" 대신 margin="10px auto;" 적용

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>center alignment</title>
<style type="text/css">

body {

text-align: center;

}

#content {

width: 300px;

padding: 1em;

border: 1px solid #999;

margin: 0 auto;

line-height: 1.5em;

text-align: left;

}

</style>
</head>
<body>
<div id="content">
<p>margin 의 auto 값을 이용해서 보다 다양한 레이아웃을 제작 할 수
있다.</p>
</div>
</body>
</html>


 

 

CSS 

body {

text-align: center;

}

 #content의 margin: 0 auto;가 ie5에서 적용되지 않는다. 따라서 body{text-align: center; }추가

#content {

width: 300px;

padding: 1em;

border: 1px solid #999;

margin: 0 auto;

line-height: 1.5em;

text-align: left;

}

텍스트 역시 가운데 정렬 됨으로 다시  text-align: left;로

가운데 정렬시켜준다.




 

 

3. 화면 정 중앙 위치시키기


<table> 엘리먼트를 이용할 때는 valign 혹은 height="100%"와 같은 속성을 이용 세로정렬이

자유롭지만 css에서는 쉽지 않다.




vertical-align속성


1. vertical-align 특성

 vertical-align 속성을 사용할 수 있는 범위는 td 와 inline 속성에서 적용 가능<td>, <img>,<input>


2. <예제>

 
<style type="text/css">
body {
font-size: 0.75em;
}
</style>

-----------------------


<form action="">
<p>
<label>내용 검사</label>
<select>
<option>전체</option>
<option>제목</option>
<option>이름</option>
<option>내용</option>
</select>
<input type="text" />
<input type="image" src="btnsearch.gif" alt="검색" />
</p>
</form>


<style type="text/css">
body {
font-size: 0.75em;
}
img, input, select {
vertical-align: middle;
}
</style>


-----------------------

<form action="">
<p>
<label>내용 검사</label>
<select>
<option>전체</option>
<option>제목</option>
<option>이름</option>
<option>내용</option>
</select>
<input type="text" />
<input type="image" src="btnsearch.gif" alt="검색" />
</p>
</form>

중앙정렬을 위해

img, input, select {
vertical-align: middle;
}를 추가해준다.

* vertical-align은 input, img와 같은 inline 속성에서 사용되며

  이는 완벽한 중앙 정렬이 될 수 있다




 

 

4. position 속성과 negative margin


<style type="text/css">
#middle {
position: absolute;
top: 50%;
left: 50%;
border: solid 1px #aaa;
width: 155px;
height: 155px;

margin: -77px 0 0 -77px;
}
</style>

1. position: absolute; 브라우저를 중심으로

   offset 지정 가능


2. top 50%; left: 50%;

   브라우저의 상단과 왼쪽에 의 50%에 위치


3. 블럭크기의 절반만큼 음수마진을 주게 되면

    엘리먼트의 정중앙이 화면의 정중앙과 일치

 <body>

<div id="middle">
<img src="docyen.jpg" alt="test" />
</div>

</body>

  


<결과>




 

 

5. 100% 높이 유지하는 레이아웃


div {height: 100%:}가 적용되지 않는 이유


 div 속성에서 height: 100%;를 주었음에도 랜더링시 적용되지 않는 이유는
height 값의 기본은 상위 엘리먼트 이기 때문 따라서
body의 height: 100%;로 지정되어 있지 않을 경우 하위 div {height: 100%;}는 랜더링 불가
마찬가지로 html역시 height: 1000%;로 지정되어 있어야 한다.
 html > body > div 순서로 height: 100%로 지정


<예제>

<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#head {
height: 100px;
background: #ddd;
position: relative;
z-index: 1;
}
#body {
min-height: 100%;
margin: -100px 0 -50px 0;
}
#content-area {
padding: 100px 0 50px 0;
}
#foot {
height: 50px;
background: #ddd;
}
</style>
<!--[if IE]>
<style type="text/css">
#body {
height: 100%;
}
</style>
<![endif]-->		  1. 가장 상위 html 부터 차례대로 height: 100%적용
     ⇒html, body {height: 100%;}

2. #head
    일정한 높이를 가지게 됨으로 position: relative로 한다.

3. #body
   선택자 head가 relative 속성을 가짐으로
   선택자 body에 해당하는 div는 head 밑에 놓이게 된다.
   따라서 margin을 선택자head의 높이에 해당하는 만큼
  음수값으로 지정(margin-bottom 동일한 이유)
   이후 최소 높이 min-height: 100%;를 지정

4. 컨디셔널 코멘트 사용
    l------------------------------
    l <!--[if IE]>                           
    l <code for Internet Explorer>    
    l <![endif]-->                          
    l------------------------------

    IE는 min-height의 속성이 구현되지 않는다
     따라서 IE를 위한 컨디셔널 코멘트 사용
    
   

<div id="head">
 head (height 100px)
</div>
<div id="body">
<div id="content-area">
content area
</div>
</div>
<div id="foot">
foot( 50px)
</div>


<랜더링 결과>

'web standard > etc.' 카테고리의 다른 글

I-ON5 CMS교육  (0) 2010.04.27
UI개발자, 웹퍼블리셔, 웹코더의 차이점이란?  (0) 2008.07.29
티스토리 스킨 첫번째 작업  (1) 2008.07.28
Posted by 수라
web standard/tag2008. 7. 29. 10:26

ul과 ol 과 dl

목록 (List)

 

세가지 목록

 ul(unordered list) 순서가 없는 리스트
 ol(ordered list) 순서가 있는 리스트
 dl(definition list) dt = term , dd = definition 쌍으로 이루어진 리스트


각 브라우저별 특징

 <ol>, <ul> <li>좌측 기본마진 발생, 브라우저별 블릿 다름 (background-image로 해결)
 <dl> 출력사항 없음 단 <dd>에서 기본마진 있음


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Unordered List</title>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
</ul>
</body>
</html>


아무런 블릿 스타일도 적용되지 않은 세줄의 텍스트가 나옴

여기에 아래 스타일을 적용시키면 블릿을 가진 리스트가 생긴다.

 li {

background: url(bullet.gif) no-rpeat 0 0.25em;

padding-left: 15px;

}

[출처] 웹표준가이드(9)/List (ul, ol, dl, dt, dd) |작성자 마그리뜨

'web standard > tag' 카테고리의 다른 글

embed태그  (0) 2011.02.06
object를 이용한 플래시 삽입  (0) 2010.04.28
textarea 컨트롤  (0) 2008.11.04
올바른 마크업을 위한 준수사항  (0) 2008.07.29
테이블  (0) 2008.07.29
Posted by 수라
web standard/etc.2008. 7. 28. 15:12

티스토리 스킨 첫번째 작업

http://surajung.kr/work/skin01/

2008.07.28 시작

'web standard > etc.' 카테고리의 다른 글

I-ON5 CMS교육  (0) 2010.04.27
UI개발자, 웹퍼블리셔, 웹코더의 차이점이란?  (0) 2008.07.29
박스모델  (0) 2008.07.29
Posted by 수라
web standard2008. 6. 25. 17:38

웹표준 코딩중..

http://surajung.kr/test01/test02.html

리뉴얼중인 사내프로젝트중 메인페이지를 웹표준에 준해서 코딩중..
생각외로 까다롭네~

Posted by 수라

티스토리툴바