사용자 삽입 이미지

원래는 max-width를 써서

img {
     max-width: 600px;
}

이나

img {
     max-width: 80%;
}

이렇게 해주면 되지만 익스플로러를 위해 한줄 더 추가하면

img {
     max-width: 600px;
     width:expression(this.width > 600 ? "600px" : this.width);
}

파이어폭스, 익스플로러 모두 제대로 적용됨.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

모든 디자이너가 해야할 9가지 CSS 원칙  (0) 2009.06.10
css에서 잘못알고있는 width  (3) 2009.06.10
CSS 라운드  (0) 2008.11.21
absolute 와 relative, div와 span , margin과 padding 차이점  (0) 2008.10.26
id와 class의 구분  (0) 2008.10.26
사용자 삽입 이미지

웹표준 강의시에도 항상 나오는 이야기이다.

또한 네이버UI가이드(http://html.nhndesign.com/)가 공개됨으로써 많은 분들이 이곳을 참고하고 있기도하다.

네이버 UI가이드 역시 100% 완벽하지 않다.

갑론을 박해야 할 요소도 있긴 하지만 이정도 분량의 꼼꼼한 가이드을 공개 한 것 역시 네이버가 한 일중에서는 정말 칭찬 할 만한 일이라고 생각한다.

1. 하위선택자 사용에 따른 들여쓰기

필자의 견해 :
하위선택자를 사용했을때 이에 맞춰 들여쓰기를 하면 훨씬 코드 보기가 수월해진다.
이미 대다수의 홈페이지에서 이렇게 사용하고 있는 것같다.



2. 그룹화와 CSS의 주석

필자의 견해 :
의미있는 CSS끼리 그룹화 시키고 보기 쉽게 주석처리
물론 모든 네이밍작업이 그렇지만 CSS 네이밍도 사람들마다 조금씩 다르다
어떤이는 영어를 그냥 발음나는대로 영어로 옮기는 사람이 있는 반면에
영단어를찾아서 쓰는 사람이 있고
아니면 영어동사까지 포함해서 쓰는 사람도 있고
영문네이밍은 정말 사람마다 다양하다 이때 주석으로 이 부분이 어디에 해당하는 부분임을 명시하면
좀더 보기 수월한 코드가 된다.


3. 스타일 선언은 한줄에

필자의 견해 :
물론 CSS 코드가 길어지면
한줄에 하나의 속성만 지정하는 방식은 괜한 공백을 많이 잡아먹어서
용량이 커지기 때문에 불필요하지만
확실히 한줄에 하나의 속성만 적어놓는것이 가독성이 좋을때가 많다
때에 따라 둘을 적절히 사용하는 센스가 필요하겠다.

4. css 파일의 분리

필자의 견해 :
이곳의 예제에서는 layout.css, typography.css 등으로 css 파일을 분류하였는데
물론 이런식으로 분류도 있겠지만
나는 메뉴섹션별로(우리나라의 웹사이트는 대게 섹션별로 공통되는 디자인이 많다)
CSS파일을 구분하여 사용한다


5. 엘리먼트 초기화

필자의 견해 :
브라우저마다 엘리먼트의 default style일 틀리므로 반드시 초기화 할것.

6. 사용되는 색상코드를 한곳에 모아 적어 둔다

필자의 견해 :
확실히 도움되는 정보다
해당 웹사이트에서 주로 사용되는 폰트명과 폰트사이즈 컬러셋을 모아놓고 이를 미리 정의해두면
색상 가이드라인이 확실해질수 있겠다

실제로 프로젝트 경험에 의해 특정 콘텐츠마다 각각의 색상과 폰트와 line-height, 마진을 가진 경우를 보았다.
예를 들면 A에 관한 콘텐츠는 어떤 폰트와 어떤 색상을 사용하며 하단에 마진값 얼마를 반드시 가져야 한다. 이런종류.
이럴때 해당 프로젝트에 처음 투입되는 사람은 그러한 규칙이 이미 있는지 인수인계를 못받았을 확률도 많다.
이때 이러한 규칙에 대해서 짤막하게(길게 주석으로 남긴다는 것은 절대 하지 말아야할것. 길게 주석을 적어 넣을바에야 차라리 ppt또는 문서 파일로 UI 가이드라인을 만드는게 낫다.) 적어 놓으면 갑작스럽게 관계자가 아닌사람이 UI를 수정한다거나 할때 좋은점도 있는 것 같다.




7. 의미있는 네이밍

필자의 견해 :
가장 중요하다
네이밍기법에 항상 언급되는 내용이지만
green 이라던지 left, right 등의 네이밍보다는
header, menu, nav, footer등의 의미있는 네이밍이 좋다.



8. 알파벳순서의 프로퍼티정의

필자의 견해 :
사실 나는 이부분은 찬성하지 않는다
자주쓰이는 속성 순서대로, 레이아웃에 영향을 많이 주는 순서대로 나열하는 것이
경험상 코드가독성에 아주 좋다.
알파벳순으로 나열하게 되면 정작 중요한 width같은 속성은 거의 맨뒤에 위치하게 되는데
이것보다는 중요한 순서대로 프로퍼티를 나열하는게 경험상 좋은것 같다.
필자는 display,position,float,width,height,padding,margin,border,background 순으로 사용한다
물론 이부분 역시 네이버UI가이드에서 사용빈도에 따른 프로퍼티 나열이 언급되어있다.



9. 유용한 css 클래스 유지

필자의 견해 :
유용한 css 클래스를 미리 정의하는 것은 아주 좋은 행위지만
이곳 예제에서는 width100이라던지 alignRight라던지
7번에서 언급한 의미있는 네이밍이 되어 있지 않다

필자는 clear라는 css클래스를 global css에 선언하는데
IE에서 clear:both시에 상단에 마진이 생기는 현상을 제거하기 위해

.clear {clear:both;height:0;line-height:0;font-size:0;}

이렇게 사용하고 있다.

현석님의 트랙백을 보고나니 내가 이 9번 문항에 대해서 잘못 코멘트한것 같다.
원본에서의 유용한 CSS의 클래스의 의미가 단순히 표현을 위한 width100, width75 이런 클래스가 유용한 클래스라고 말한것이라면 정말 절대 삼가해야할 것이다. 현석님 말대로 .mt10 {margin-top:10px;} 이런 클래스는 정말 삼가해야할 일이다. 이걸 클래스로 지정해서 사용하느니 인라인 스타일시트로 적용하는게 훨씬 나은 방법이다.
저는 유용한 클래스의 의미를 좀더 넓은 범위의 유용한 클래스(의미있는 네이밍이 되어있는 특정 콘텐츠 형식에 대한 클래스화)라고 잘못 해석하고 이해한것 같아서 추가 코멘트 남깁니다.




모두 아주 좋은 내용이다.

계속해서 HTML과 CSS를 사용하여 표현과 문서를 분리하는 곳이 많아졌다.

이런 중요한 개발방법론은 계속해서 공유되어져

새로 웹퍼블리셔가 되고싶은 사람들에게 많은 도움이 되었으면 좋겠다.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

CSS에서 이미지 가로폭 자동 리사이징  (0) 2009.07.22
css에서 잘못알고있는 width  (3) 2009.06.10
CSS 라운드  (0) 2008.11.21
absolute 와 relative, div와 span , margin과 padding 차이점  (0) 2008.10.26
id와 class의 구분  (0) 2008.10.26

CSS Baese Design을 할 때...
이전의 <TABLE>이 하던 것을 <DIV>로 대체해야 하기에...
아마도 height속성과 더불어 가장 많이 쓰이는 CSS속성이 될 것이다.

지금까지 <TABLE>위주의 코딩을 하던 사람들에게는...
CSS의 width값의 적용범위가 <TABLE>에 익숙해있던 범위와는 달라서...곤혹을 치룰 것이다.


예를 들어 <TABLE>에 width=360을 입력해놓은 상태이면...
width=120인 <TD>를 3개 있다치더라도...cellpadding, cellspacing값과는 무관하게
width=120과는 오차범위가 1pixel이상 나는 일이 별로 없고,
width=360은 어느정도는 절대적으로 지켜졌기 때문이다.

사용자 삽입 이미지

그림 1


그리고, 이전의 익스플로러에서
margin, border, padding값을 자의적으로 적용함과 함께...
width값의 적용범위를 border가 그려지는 영역으로 되었기 때문에...


사용자 삽입 이미지

그림 2


대다수의 사람들이 위의 그림처럼 border의 안쪽영역을 width값의 범위인 줄 알고 있고,
padding값은 width값의 안쪽 부분의 여백을 정의하는 것으로 알고 있다.


나도 2004년 2월까진 저렇게 알고 있었다.


내가 그토록 신뢰했던 CSS refernce 서적과 국내 CSS에 대해 설명해놓은 사람들의 홈페이지나 글들을 봐도 저것이 잘못되었다고 말하는 이가 하나도 없다.


아니다.


width값은...실제 데이타가 들어가는 영역의 범위를 규정하는 것이다.
margin값과 padding값, 그리고 border의 width값에 영향을 받지 않는
텍스트나 이미지, 또다른 요소들이 차지하는 영역에만 width값을 적용시켜야한다.

사용자 삽입 이미지



그러나, 익스플로러는 그렇지 못하다.

익스플로러 장난 아니다.


<DIV>에 width값을 적용시켜놓으면 1px짜리 border정도까지 포함시키고
padding값이 width값의 안쪽에 적용되어 의도했던 것보다 <DIV>의 크기가 작게 나온다.

더욱 웃긴건...
padding값이 같은 익스플로러6.0에서조차도 차이가 난다.

익스플로러 5.0과 window2000에서의 익스플로러6.0은 그림2처럼 구현을 하고
windowXP에서는 그림3처럼 구현을 하는데...
같은 페이지에서조차 그림2처럼 구현하기도 한다.

(같은 페이지에서 저러면 돌아버린다.)

또한, border값은 width와 다른 범위이지만, Block의 width값에 일부를 포함시켜 의도했던 border의 두께가 나오지 않을 때도 있다. border-left:10px solid #FF0000을 적용시켜도 width값이 지정되어 있을 때 실제 border가 8pixel만 나올 때도 있다.


CSS Based Design을 하시려는 분이 있다면...
넷스케이프6.0이상 버젼을 꼭 깔기를 추천합니다.
CSS적용에 대해서는 넷스케이프의 CSS엔진이 훨씬 훌륭합니다.


추신:
<td style="padding-left:12px;"> 이거 쓰지마시라
만약 꼭! 써야한다면...<table>에 width값을 정의하지말지니라.
window2000에서 볼때와 windowXP에서 볼 때 적용된 것이 다르다.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

CSS에서 이미지 가로폭 자동 리사이징  (0) 2009.07.22
모든 디자이너가 해야할 9가지 CSS 원칙  (0) 2009.06.10
CSS 라운드  (0) 2008.11.21
absolute 와 relative, div와 span , margin과 padding 차이점  (0) 2008.10.26
id와 class의 구분  (0) 2008.10.26

<style type="text/css">
  #r {width:   150px   ;font:bold 7pt tahoma;color:gray;} /* 크기조절 */
  #r b{display:block;height:1px;overflow:hidden;}
  #r b, #r #r5{border:   gray   ;background:   #ffffff   ;} /* 바탕 색상 */
  #r #r1{background:   gray   ;}
  #r #r1{margin:0px 5px 0px 5px;}
  #r #r2{border-left:solid 2px;border-right:solid 2px;margin:0px 3px 0px 3px;} 
  #r #r3, #r #r4, #r #r5{border-left:solid 1px;border-right:solid 1px;} 
  #r #r3{margin:0px 2px 0px 2px;}
  #r #r4{height:2px;} /* 놀이조절 */
  #r #r4{margin:0px 1px 0px 1px;} 
  #r #r5{padding:0px 5px 0px 5px;}
</style>

<div id=r>
<b id=r1></b>
<b id=r2></b>
<b id=r3></b>
<b id=r4></b>
<div id=r5>
<!-- 내용 시작 -->

  <div style="height:600"> /* 놀이조절 */
  the new empty space.<br/>
  <a href=http://skystory.kr target="_blank">at fifth night</a>

   </div>
</div>
<b id=r4></b>
<b id=r3></b>
<b id=r2></b>
<b id=r1></b>
</div>

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

모든 디자이너가 해야할 9가지 CSS 원칙  (0) 2009.06.10
css에서 잘못알고있는 width  (3) 2009.06.10
absolute 와 relative, div와 span , margin과 padding 차이점  (0) 2008.10.26
id와 class의 구분  (0) 2008.10.26
IE6에서 position:fixed 구현하기  (0) 2008.10.24

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css"></style>
</HEAD>
<BODY>
<div style="position:relative;background:red;left:100px;top:200px">relative</div>
<div style="position:absolute;background:blue;left:100px;top:200px">absolute</div>
</BODY>
</HTML>

실행해보시면 아시겠지만...
또한 div를 span으로 바꾸게 되면 위치는 변하지 않지만
relative속성의 레이어가 배경색이 라인전체에서 부분으로 바뀌게 됩니다.

첫째, absolute 와 relative의 차이점
둘째, div와 span의 차이점

포지션에 대한 속성에서 absolute와 relative를 보면

absolute(절대적 위치)
브라우저를 기준으로 위치 속성을 사용 하며 parent 요소에 의해 하위 위치에
있다면 그 곳을 기준으로 합니다.

즉, 레이어 속성인 z-index를 쓸경우 top, left, right, bottom을 통해서
좌표를 잡는데 실제 브라우저를 기준으로 위치하게 됩니다.

relative(상대적 위치)
객체가 위치 속성에 의해 설정 되거나 태그내에 위치시 마지막 위치를
기준으로 상대값을 정해 줍니다.
즉, 포지션을 정하지 않은 상태에서 보면 그곳에 위치가 브라우저에
나올것입니다. 바로 그곳을 기준으로 포지션에 relative를 사용해서
top, left, right, bottom을 이용해서 위치를 정할수 있습니다.

위에 질문 하신 소스에 보시면 relative를 먼저 사용 하셨는데요
두 태그를 바꿔서 해보시면 아실 겁니다.

그리고 div와 span태그는 서식에 관한 태그입니다.

div
div태그는 문단 서식에 관한 태그입니다. 그래서 스타일을
이용해서 크기를 잡지 않는다면 기본적으로 줄바꿈이 됩니다.
즉, 라인 전체에 적용이 되는 이유입니다.

span
span태그는 서식에 관한 태그이긴 하나 문단이 아닌 한줄에 관한 서식
입니다.

그래서 span태그에 스타일로 크기를 잡아주지 않으면 태그가 쓰인곳 안에
내용까지만 적용이 됩니다.

예를 들어
<div style="background-color: blue">줄전체에 색상</div>

줄전체에 색상
위 경우는 라인전체에 해당(문단을 적용 하기 위해 자동으로 줄바꿈)
<span style="background-color: blue">이글에만 색상</span>

이글에만 색상
위의 경우는 줄서식이므로 태그안에 쓰인 글에만 적용 됩니다.
DIV 를 불럭(Block) 태그, SPAN 을 인라인(Inline) 태그라고 하죠


margin과 padding을 구별 --------------------------------

일반적으로 margin과 padding을 구별하기가 힘듭니다.
간단한 예제소스를 만들어 연습하시면 이해가 쉬울것 같네요
아래에 비교 예제를 올렸습니다.

margin : 특정 영역(box)의 바깥쪽 여백을 의미
padding : 특정 영역(box)의 안쪽 여백을 의미

margin은 보통 화면에서 여백을 주거나 없앨 경우 사용합니다.

html파일에 아무테그 없이 1234라는 글을 쳐보시고 실행 해보세요.
그러면 특이하게 1234라는 글자 상단부분과 좌측부분에 약간의 공백이 생깁니다.
이것을 홈페이지를 만들때 배경이미지를 넣게되면 하얀 공백이 생기는 문제가 발생합니다.

이럴때 body테그에 상단과 좌측에 margin값에 0을 주면 공백을 없앨 수 있습니다.

padding은 주로 테이블 안에서 사용합니다.
테이블내에서 특정 셀안에 있는 내용물이 너무 좌측이나 상단에 붙었을경우 값을 어느정도 주어 해당 픽셀만큼 여백을 주는 것입니다.
참고로 테이블테그에서는 margin이란 속성값은 사용하지 않습니다.

굳이 두 테그의 차이가 뭐냐고 말한다면 쓰이는 곳이 다르다고 말할 수 있습니다.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

css에서 잘못알고있는 width  (3) 2009.06.10
CSS 라운드  (0) 2008.11.21
id와 class의 구분  (0) 2008.10.26
IE6에서 position:fixed 구현하기  (0) 2008.10.24
HTML 특수문자표, ( 숫자표현,문자표현 ) 코드표  (3) 2008.10.21

위와 같은 경우는 id로 정의된 이름을 스타일을 적용시키기 위해서 사용 합니다.

그리고 정의된 스타일을 사용하기 위해서는

(#) 으로 아이디 이름을 지정합니다.

보통 id를 사용하는 이유는 자바스크립트를 사용해서 DHTML 을 적용하기

위해서 입니다.


클래스나 아이디 모두 스크립트에서 사용할수 있습니다.

클래스인 경우는

객체.className .......이런식으로 사용하구요

객체.id이름...........이런식으로 사용합니다.


다만 클래스는 본문내에(웹페이지내에소스중에) 동일한 이름을 가진 클래스를

여러번 사용할수 있기 때문에 스타일을 통해서 일관성을 주기 위해서

사용하구요

아이디는 본문내에 동일한 이름을 가진 아이디가 중복될수 없습니다.

그래서 스타일을 이용해서 일관성을 주는데는 사용할수 없습니다.(사용하려면

여러개의 틀린 이름을 가진 아이디를 정의 해야 합니다.)

이렇듯
 
홈페잊에 일관성을 주기 위해서는 클래스를 주로 사용하고

DHTML 을 적용할때에는 아이디를 주로 사용합니다.
 
출처 : 지식검색 검색중

홈페잊에 일관성을 주기 위해서는 클래스를 주로 사용하고

DHTML 을 적용할때에는 아이디를 주로 사용합니다.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

CSS 라운드  (0) 2008.11.21
absolute 와 relative, div와 span , margin과 padding 차이점  (0) 2008.10.26
IE6에서 position:fixed 구현하기  (0) 2008.10.24
HTML 특수문자표, ( 숫자표현,문자표현 ) 코드표  (3) 2008.10.21
원하는 위치에 배경 고정 시키기  (0) 2008.10.08

IE6에서도 동일한 디자인을 만들기 위해 알아두어야 하는것.

*{
  margin:0;
  height:0;
}

html{
  _overflow:hidden;
}

body{
  _height:100%;
  _width:100%
  _overflow:auto;
}

#fixed{
  _position:absolute;
  _z-index:-1;
}


주의사항 - position:absolute는 무조건 fixed (absolute 사용불가) , z-index 설정에 따라 가로스크롤을 가리거나 링크,드래그 사용 불가.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

absolute 와 relative, div와 span , margin과 padding 차이점  (0) 2008.10.26
id와 class의 구분  (0) 2008.10.26
HTML 특수문자표, ( 숫자표현,문자표현 ) 코드표  (3) 2008.10.21
원하는 위치에 배경 고정 시키기  (0) 2008.10.08
깔끔하게 링크에 점선 없애기...  (0) 2008.08.07

표현문자

숫자표현

문자표현

설명

-

&#00;-&#08;

-

사용하지 않음

space

&#09;

-

수평탭

space

&#10;

-

줄 삽입

-

&#11;-&#31;

-

사용하지 않음

space

&#32;

-

여백

!

&#33;

-

느낌표

"

&#34;

&quot;

따옴표

#

&#35;

-

숫자기호

$

&#36;

-

달러

%

&#37;

-

백분율 기호

&

&#38;

&amp;

Ampersand

'

&#39;

-

작은 따옴표

(

&#40;

-

왼쪽 괄호

)

&#41;

-

오른쪽 괄호

*

&#42;

-

아스트릭

+

&#43;

-

더하기 기호

,

&#44;

-

쉼표

-

&#45;

-

Hyphen

.

&#46;

-

마침표

/

&#47;

-

Solidus (slash)

0 - 9

&#48;-&#57;

-

0부터 9까지

:

&#58;

-

콜론

;

&#59;

-

세미콜론

<

&#60;

&lt;

보다 작은

=

&#61;

-

등호

>

&#62;

&gt;

보다 큰

?

&#63;

-

물음표

@

&#64;

-

Commercial at

A - Z

&#65;-&#90;

-

A부터 Z까지

[

&#91;

-

왼쪽 대괄호

\

&#92;

-

역슬래쉬

]

&#93;

-

오른쪽 대괄호

^

&#94;

-

탈자부호

_

&#95;

-

수평선

`

&#96;

-

Acute accent

a - z

&#97;-&#122;

-

a부터 z까지

{

&#123;

-

왼쪽 중괄호

|

&#124;

-

수직선

}

&#125;

-

오른쪽 중괄호

~

&#126;

-

꼬리표

-

&#127;-&#159;

-

사용하지 않음

&#160;

&nbsp;

Non-breaking space

¡

&#161;

&iexcl;

거꾸로된 느낌표

￠

&#162;

&cent;

센트 기호

￡

&#163;

&pound;

파운드

¤

&#164;

&curren;

현재 환율

￥

&#165;

&yen;

엔

|

&#166;

&brvbar;

끊어진 수직선

§

&#167;

&sect;

섹션 기호

¨

&#168;

&uml;

움라우트

ⓒ

&#169;

&copy;

저작권

ª

&#170;

&ordf;

Feminine ordinal

≪

&#171;

&laquo;

왼쪽 꺾인 괄호

￢

&#172;

&not;

부정

­

&#173;

&shy;

Soft hyphen

?

&#174;

&reg;

등록상표

&hibar;

&#175;

&macr;

Macron accent

°

&#176;

&deg;

Degree sign

±

&#177;

&plusmn;

Plus or minus

²

&#178;

&sup2;

Superscript two

³

&#179;

&sup3;

Superscript three

´

&#180;

&acute;

Acute accent

μ

&#181;

&micro;

Micro sign (Mu)

&#182;

&para;

문단기호

·

&#183;

&middot;

Middle dot

¸

&#184;

&cedil;

Cedilla

¹

&#185;

&sup1;

Superscript one

º

&#186;

&ordm;

Masculine ordinal

≫

&#187;

&raquo;

오른쪽 꺾인 괄호

¼

&#188;

&frac14;

4분의 1

½

&#189;

&frac12;

2분의 1

¾

&#190;

&frac34;

4분의 3

¿

&#191;

&iquest;

거꾸로된 물음표

A

&#192;

&Agrave;

Capital A, grave accent

A

&#193;

&Aacute;

Capital A, acute accent

A

&#194;

&Acirc;

Capital A, circumflex accent

A

&#195;

&Atilde;

Capital A, tilde

A

&#196;

&Auml;

Capital A, dieresis or umlaut mark

A

&#197;

&Aring;

Capital A, ring (Angstrom)

Æ

&#198;

&AElig;

Capital AE diphthong (ligature)

C

&#199;

&Ccedil;

Capital C, cedilla

E

&#200;

&Egrave;

Capital E, grave accent

E

&#201;

&Eacute;

Capital E, acute accent

E

&#202;

&Ecirc;

Capital E, circumflex accent

E

&#203;

&Euml;

Capital E, dieresis or umlaut mark

I

&#204;

&Igrave;

Capital I, grave accent

I

&#205;

&Iacute;

Capital I, acute accent

I

&#206;

&Icirc;

Capital I, circumflex accent

I

&#207;

&Iuml;

Capital I, dieresis or umlaut mark

Ð

&#208;

&ETH;

Capital Eth, Icelandic

N

&#209;

&Ntilde;

Capital N, tilde

O

&#210;

&Ograve;

Capital O, grave accent

O

&#211;

&Oacute;

Capital O, acute accent

O

&#212;

&Ocirc;

Capital O, circumflex accent

O

&#213;

&Otilde;

Capital O, tilde

O

&#214;

&Ouml;

Capital O, dieresis or umlaut mark

×

&#215;

&times;

Multiply sign

Ø

&#216;

&Oslash;

width="130"Capital O, slash

U

&#217;

&Ugrave;

Capital U, grave accent

U

&#218;

&Uacute;

Capital U, acute accent

U

&#219;

&Ucirc;

Capital U, circumflex accent

U

&#220;

&Uuml;

Capital U, dieresis or umlaut mark

Y

&#221;

&Yacute;

Capital Y, acute accent

Þ

&#222;

&THORN;

Capital Thorn, Icelandic

ß

&#223;

&szlig;

Small sharp s, German (sz ligature)

a

&#224;

&agrave;

Small a, grave accent

a

&#225;

&aacute;

Small a, acute accent

a

&#226;

&acirc;

Small a, circumflex accent

a

&#227;

&atilde;

Small a, tilde

a

&#228;

&auml;

Small a, dieresis or umlaut mark

a

&#229;

&aring;

Small a, ring

æ

&#230;

&aelig;

Small ae diphthong (ligature)

c

&#231;

&ccedil;

Small c, cedilla

e

&#232;

&egrave;

Small e, grave accent

e

&#233;

&eacute;

Small e, acute accent

e

&#234;

&ecirc;

Small e, circumflex accent

e

&#235;

&euml;

Small e, dieresis or umlaut mark

i

&#236;

&igrave;

Small i, grave accent

i

&#237;

&iacute;

Small i, acute accent

i

&#238;

&icirc;

Small i, circumflex accent

i

&#239;

&iuml;

Small i, dieresis or umlaut mark

ð

&#240;

&eth;

Small eth, Icelandic

n

&#241;

&ntilde;

Small n, tilde

o

&#242;

&ograve;

Small o, grave accent

o

&#243;

&oacute;

Small o, acute accent

o

&#244;

&ocirc;

Small o, circumflex accent

o

&#245;

&otilde;

Small o, tilde

o

&#246;

&ouml;

Small o, dieresis or umlaut mark

÷

&#247;

&divide;

Division sign

ø

&#248;

&oslash;

Small o, slash

u

&#249;

&ugrave;

Small u, grave accent

u

&#250;

&uacute;

Small u, acute accent

u

&#251;

&ucirc;

Small u, circumflex accent

u

&#252;

&uuml;

Small u, dieresis or umlaut mark

y

&#253;

&yacute;

Small y, acute accent

þ

&#254;

&thorn;

Small thorn, Icelandic

y

&#255;

&yuml;

Small y, dieresis or umlaut mark


HTML 코딩을 할때 문자표현을 사용하면 된다.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

id와 class의 구분  (0) 2008.10.26
IE6에서 position:fixed 구현하기  (0) 2008.10.24
원하는 위치에 배경 고정 시키기  (0) 2008.10.08
깔끔하게 링크에 점선 없애기...  (0) 2008.08.07
로그인이나 입력폼 사용시 탭키 누를 때 순서대로 ^.^ 이동 시키기  (0) 2008.07.31
<head> 와 </head> 사이에 넣어 주세요.
<style type=text/css>
BODY {background-image:url(그림경로);
background-repeat:no-repeat;
background-position:right;
background-attachment:fixed;
}
</style>

저 위의 right 를 원하는 위치로 바꾸시면 됩니다


background-position:right; --> 이렇게하면 이미지가 우측으로 정렬은 되지만, 세로정렬은
기본정렬(중앙)로 항상 정렬됩니다.

background-position:right bottom;
--> 이렇게 해주시면 "우측, 하단"으로 고정하실수 있습니다.

바꿀수 있는 정렬위치
가로(left, center, right)
세로(top, middle, bottom)

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

IE6에서 position:fixed 구현하기  (0) 2008.10.24
HTML 특수문자표, ( 숫자표현,문자표현 ) 코드표  (3) 2008.10.21
깔끔하게 링크에 점선 없애기...  (0) 2008.08.07
로그인이나 입력폼 사용시 탭키 누를 때 순서대로 ^.^ 이동 시키기  (0) 2008.07.31
CSS핵(hack) 정리  (0) 2008.07.31

1. 한 부분만 링크 점선없애기

<a href="http://blog4u.kr">블로그포유</a> 라는 링크가 있을 경우..
<a href="http://blog4u.kr">이 태그 사이에..
onfocus='this.blur()' 이 문구를 삽입하시면 됩니다..
ex> <a onfocus='this.blur()' href="http://blog4u.kr">블로그포유</a>


2. 페이지 전체의 링크 점선 없애기
<head>와 </head> 사이에.. 아래 태그를 삽입하시면 됩니다..
<script language="javascript">
<!--
function allblur() {
for (i = 0; i < document.links.length; i++)
document.links[i].onfocus = document.links[i].blur;
}
//-->
</script>
이렇게 하시면 BODY에 이벤트를 발생 시키지 않아도 됩니다..

(참고 : 맵에는 적용 되지 않는다.)

1.  onfocus='this.blur()' 문구를 삽입 하지 않았을경우
이곳을 눌러주세요!!

2.  onfocus='this.blur()' 문구를 삽입 하였을 경우
이곳을 눌러주세요!!

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

HTML 특수문자표, ( 숫자표현,문자표현 ) 코드표  (3) 2008.10.21
원하는 위치에 배경 고정 시키기  (0) 2008.10.08
로그인이나 입력폼 사용시 탭키 누를 때 순서대로 ^.^ 이동 시키기  (0) 2008.07.31
CSS핵(hack) 정리  (0) 2008.07.31
DOCTYPE HTML PUBLIC 선언  (0) 2008.07.15
탭을 누르면 ID -> PASSWORD -> LOGIN 순으로 가야 입력하기 편하죠?
아니라고요.? ㅡ.ㅡ 그럼 그냥 쓰시고요.. 그렇지 않은 분들을 위해
허접팁을 씁니다.

<input type=text name=user_id value=' size=9 class=input >
<input type=password name=password value=' size=9 class=input >
<input type=checkbox name=auto_login value=1 onclick=check_autologin()>

대략 이런식으로 outlogin skin 을 제작하실텐데요..

이렇게 제작한후 페이지의 중간에 위치하게될경우 또는 iframe으로
들어갈경우 탭을 누르면 이상한 곳으로 가거나 id입력하고 패스워드를
입력할려고 탭을 눌렀더니 엉뚱한곳으로 가거나  로그인버튼으로 가서
마음에 안드셨던 부분이 계셨죠...?

해답은 바로 tabindex 입니다.

<input type=text name=user_id value=' size=9 class=input tabindex=1>
<input type=password name=password value=' size=9 class=input tabindex=2>
<input type=checkbox name=auto_login value=1 onclick=check_autologin() tabindex=3>

예를들어 이와같이 수정하신다면 id 입력한후 tab을 눌러서 패스워드를 입력
하고 탭을 눌러 오토로그인 체크를 하실수 있게 됩니다. ^.^

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

원하는 위치에 배경 고정 시키기  (0) 2008.10.08
깔끔하게 링크에 점선 없애기...  (0) 2008.08.07
CSS핵(hack) 정리  (0) 2008.07.31
DOCTYPE HTML PUBLIC 선언  (0) 2008.07.15
XHTML 1.0 Transitional 기본 css  (0) 2008.07.09

CSS핵(hack) 정리

브라우저의 버그를 hack으로 해결할 수 있는 부분이 많이 있습니다만 그보다 사이트의 CSS구조를 설계할때 각 브라우저의 속성을 파악해고 조금만 더 주의해서 설계를 하시면 hack을 사용하지 않고도 해결할 수 있는 부분이 많이 있습니다. hack을 사용할때는 조금 더 신중하게 사용하시는게 좋습니다. 특히 예전 버전의 브라우저에 적용되었던 hack이 새로운 브라우저에 영향을 끼칠 가능성이 있으며 CSS를 변경 할 때 업무효율을 저하시키는 한 요인이 될 것 입니다.
Intenet Explorer계열의 브라우저에서 제대로 표시가 되지 않는 경우에는 일단 width값이나 float관련 설정을 변경해 보시는 것도 하나의 방법인 것 같습니다. 혹시 Intenet Explorer에서 float와 margin을 같은 방향으로 설정했을때 문제가 생긴 경우라면 이 포스트를 참조하시기 바랍니다.




Netscape 4 제외시키기

Netscape 4은 media속성값에 “screen”이외의 값이 올 경우 읽어 들이지 못하는 것을 이용한 방법이다.

이나

라고 지정할 경우 Netscape 4은 읽어 들이지 못한다.

부분적으로 읽어들이지 못하게 하는 경우에는 Caio’s hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다.

p {
/*/*/ color:white; /* */
}



Mac IE 4.5, Netscape 4 제외시키기

@import룰로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다.
Mac IE 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. Netscape 4은 @import를 지원하지 않는다.

@import url("/css/style.css")



Mac IE 5 제외시키기

CSS소스 안의 코멘트 서식을 /* \*/ 이라는 방식으로 기술한다. holly hack이라고 하며 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Mac IE 5에서도 문제없이 적용된다.

p {
/* \\*/ color:white; /* */
}



Win IE 4~5 제외시키기

셀렉터 바로 뒤에 /**/라고 적는다.

p/**/ { color:white;}



Win IE 4~5, Mac IE 4.5~5 제외시키기

프로퍼티와 값을 구분하는 콜론(;) 앞에 코멘트에 스페이스를 포함하여 /* */라고 적는다.

p { color/* */:white;}



Win IE 4~6, Mac IE 4, Netscape 4 제외시키기

셀렉터 앞에 html>body를 붙인다.

html>body p { color:white;}



Win IE 6 제외시키기

프로퍼티와 값을 구분하는 콜론(;)의 앞에, 스페이스와 코멘트를 /**/라고 적는다.

p { color /**/:white;}



star hack

셀렉트 앞에 *html를 붙이면, Win IE 4~6, Mac IE 4~5 등에는 스타일이 적용되고, 그 외의 브라우저에서는 적용되지 않는다.

*html p { color:white; }



underscore hack

프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면, Win IE 4~6에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

p { _color:white; }



hash hack

프로퍼티의 앞에 샾(#)을 붙이면, Win IE 4~6, Mac IE 5, Opera 7, Mozilla, Firefox에서는 스타일이 적용되고, 다른 브라우저에는 적용되지 않는다.

p { #color:white; }



star 7 hack

셀렉트의 앞에 html*을 붙이면, Win IE 5.5~6, Mac IE 5, Safari 등에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다. html*과 셀렉터사이에 스페이스를 넣지 않는다.

html*p { color:white; }



xmlns hack

속성셀렉터를 이용하여, html요소에 붙이는 xmlns속성을 스타일적용을 위하여 사용하는 방법.
Mozilla, Fire-fox, Opera 7/8, Safari, IE 7 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

html[xmlns] h1 { color:red; }



:root hack

셀렉터의 앞에 :root를 붙이면, Mozilla, Firefox, Mac IE 5, Safari 등 :root유사클래스를 지원하는 브라우저에만 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

:root h1 { color:red; }



Tantek box model hack

voice-family프로퍼티를 이용한 가장 유명한 박스모델핵.

div#content {
width:500px;
voice-family: "\"}\"";
voice-family:inherit;
width:400px;
}



Win IE 5용 패스필터

@media tty {
i{content:"\";/*" "*/}}; @import '/css/style.css'; {;}/*";}
}/* */



Win IE 5.5용 패스필터

@media tty {
 i{content:"\";/*" "*/}}@m; @import '/css/style.css';/*";}
}/* */



Win IE 5-5.5용 패스필터

@media tty {
 i{content:"\";/*" "*/}}@import '/css/style.css';/*";}
}/* */



모던브라우저용 패스필터

@import "null?\"\{";
@import "/css/style.css";
@import "null?\"\}";

이 이외에도 많은 핵(hack)이 존재한다. CSS Filters (dithered.com)에 다양한 CSS hack이 잘 정리되어 있으므로 참고하시길…

2006년 7월 18일, IE7용의 핵(hack)을 추가.



IE7에만 적용

IE7에만 다른 스타일을 적용하는 방법은 해당 셀렉터의 앞에

*+html body

이나(*+html body는 Opera8~에도 적용되어 버리는 문제가 있기에 *+html>/**/body로 Opera8~ 전용 스타일을 기술하여야 한다. 참조:IE7のCSSバグとOpera CSS Hack)

*:first-child+html

을 기술한 다음 해당 셀렉터와 스타일을 작성하면 된다. 예를 들어 #banner라는 id셀렉터에 적용시키는 경우

*:first-child+html #banner {
　　　　　　：
　　[IE7용 스타일을 기술]
　　　　　　：
}

라고 기술한다. IE7이외의 브라우저를 위한 원래의 #banner 스타일 설정은 IE7용 스타일 설정 앞에 기술한다(순서가 바뀌면 원하는 효과를 얻지 못한다. 참조:IE7 の CSS ハック)

#banner {
　　　　　　：
　　[IE7이외의 브라우저를 위한 스타일을 기술]
　　　　　　：
}
*:first-child+html #banner {
　　　　　　：
　　[IE7용 스타일을 기술]
　　　　　　：
}



IE 6 and below （IE6이하）

* html


IE 7 and below （IE7이하）

*:first-child+html, * html



IE 7 only （IE7전용）

*:first-child+html



IE 7 and modern browsers only （IE7과 모던브라우저）

html>body



Modern browsers only (not IE 7) （IE7이외의 모던 브라우저）

html>/**/body



Opera 9와 Safari 동시적용

html:first-child



Opera 9와 Safari 동시적용

/* XXX \*/로 코멘트 아웃하고 html:\66irst-child를 덧붙임으로써 Safari에만 CSS가 적용된다.

/* safari only \\*/
html:\\66irst-child div.globalContainer{
margin: 0 0 0 18px;
}
/* end */

내용중 잘못된 부분이나 수정, 추가가 필요한 부분이 있으시면 의견 부탁드립니다.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

깔끔하게 링크에 점선 없애기...  (0) 2008.08.07
로그인이나 입력폼 사용시 탭키 누를 때 순서대로 ^.^ 이동 시키기  (0) 2008.07.31
DOCTYPE HTML PUBLIC 선언  (0) 2008.07.15
XHTML 1.0 Transitional 기본 css  (0) 2008.07.09
XHTML 1.0 Strict에서 더 이상 사용할 수 없는 태그 / 속성  (0) 2008.07.09

DOCTYPE HTML PUBLIC 선언

HTML 문서의 첫머리에 <!DOCTYPE..으로 시작하는 것을 본적이 있을것이다.

가장 흔히 사용되는 DOCTYPE 코드는 일반형식(Transitional)과 엄격한 형식(Strict)으로 나누어 진다. HTML 4.01 Transitional은 예전에 있었거나 없어진 태그도 지원하며, <font>에 지정된 스타일도 제대로 표현해 준다. HTML 4.01 Strict 은 HTML을 엄격하게 적용한다. <font>태그에 적용된 스타일 보다는 CSS파일에서 지정된 스타일을 지켜 표현 해야 한다.

DOCTYPE을 규정하는 가장 좋은 방법은 Strict 형식을 사용하는 것이다. 이것은 CSS를 통해 모든 HTML 태그의 속성을 모두 자유자재로 규정 할 수 있기 때문이다. 즉, b{font-weight:normal;}라고 적는 다면 더 이상 <b>는 굵은체로 표시되지 않는다. 그러나, 아직 브라우저 호환성 때문에 <embed>나 비표준 태그를 사용 해야할 필요가 있으므로 현재 상태에서 가장 최상의 브라우저 호환성을 제공해 주는 문서 형식은 XHTML 1.0 Transitional 을 사용 하는 것이다.

HTML 4.01 호환모드

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

가장 최근의 CSS 규격을 따른다. 단, frame을 사용할 수 없다.

HTML 4.01 엄격모드

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

1999년 12월 24일 확정 규격. 권장하지 않는 element, attribute, frame 사용불가
element 배치가 엄격하여 가장 이상적인 문서 작성시 사용.

XHTML 1.0 호환모드

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1999년 12월 24일 확정 규격. frameset 사용 가능.
넷츠케이프, 파이어폭스에서 frame이 작동하지 않음.

XHTML 1.0 엄격모드

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

로그인이나 입력폼 사용시 탭키 누를 때 순서대로 ^.^ 이동 시키기  (0) 2008.07.31
CSS핵(hack) 정리  (0) 2008.07.31
XHTML 1.0 Transitional 기본 css  (0) 2008.07.09
XHTML 1.0 Strict에서 더 이상 사용할 수 없는 태그 / 속성  (0) 2008.07.09
CSS의 display 속성  (2) 2008.06.27
DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


CSS
* {
    font-family:Tahoma, Gulim;
    font-size:12px;
    color:#333333;
    margin:0;
    padding:0;
    line-height:120%;
}
ul, ol {
    list-style:none;
}
a {
    text-decoration:none;
}
img {
    float:left;
    border:0;
}
div {
    font-size:0;
}
input {
    line-height:130%;
}
input, textarea {
    font-size:11px;
    color:#333333;
}
table.collapse {
    border-collapse:collapse;
    margin:1px 0 0 1px;
}
table.collapse td {
    border-style:solid;
    border-width:1px;
}

table.collapse {
    margin:expression("0"); /* validator 통과하고 싶다면 <!--[if IE]> 이용 */
}

#wrap {
    position:relative;
    width:980px;
    margin:0 auto;
}


#wrap 은 가운데 정렬용 div 입니다.

table.collapse 는 FF 가 문제 입니다.
셀에 테두리 다 쳐 놓고 margin 의 left 와 top 을 -1 해서 테두리를 겹치는거네요.
그래서 테이블 자체가 좌,상단이 -1 됩니다.
border-width 에 의해 - 가 더 많이 되므로 일일히 처리해야 합니다.

그리고 IE 에서 block 요소 안에서 float 를 하면, 맨 마지막 요소의 margin-bottom 이 안먹습니다.
block 요소 자체에 padding 을 주고 div 하나 더 씌우는 등의 작업이 필요합니다.

IE6 에서 중첩 block float 요소의 margin left,right 가 x2 되는 현상은 display:inline 으로 해결합니다.
float 가 되면 display:none 이 아닌 이상 display 속성이 무시되는것이 표준이기 때문에,
표준에서 벗어난 것은 아닙니다.

또, IE6 에서 margin-top:-10px 처럼 이용하면 위가 잘립니다.
block 중첩한 후 position:relative; top:-10px; 로 해야 합니다.

IE6 에서 div 는 속이 비어도 기본 글꼴 크기가 적용됩니다. 때문에 font-size:0 입니다.
글을 쓸 때는 p 태그를 쓰면 됩니다.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

CSS핵(hack) 정리  (0) 2008.07.31
DOCTYPE HTML PUBLIC 선언  (0) 2008.07.15
XHTML 1.0 Strict에서 더 이상 사용할 수 없는 태그 / 속성  (0) 2008.07.09
CSS의 display 속성  (2) 2008.06.27
이젠 CSS도 프레임워크 등장? BluePrint 0.5  (0) 2008.06.27
태그!!
　　applet - object 태그로 사용합니다.
　　basefont - CSS로 대체해 사용합니다.
　　center - CSS inline
　　dir, menu - ol or ul 태그를 대신 사용합니다.
　　font - CSS font-family, font-size 등...
　　iframe - 사용 불가
　　isindex - input 태그로 사용합니다.
　　s, strike - CSS text-decoration: strike-through
　　u - CSS text-decoration: underline

속성!! (괄호 속은 해당하는 태그)
　　align (caption, img, input, object, legend, table, hr) - 사용 불가
　　align (div, h1, h2, h3, h4, h5, h6, p) -  CSS text-align 으로
　　alink (body) - CCS에서 a:link 
　　background (body, table, tr, td, th) - CSS background 
　　border (img, object) - CSS border 
　　clear (br) - CSS에서 clear 
　　compact (dl, ol, ul) - CSS line-height 
　　height (table) - 사용 불가
　　height (td, th) - 사용 불가; 대신의 셀 속의 내용에 맞춰서 크기가 조정되도록 하세요.
　　hspace (img, object) - CSS padding
　　language (script) - type / MIME type 사용
　　link (body) - CSS a:link
　　name (img) - id를 이용하세요.
　　noshade (hr) - 사용 불가 
　　nowrap (td, th) - CSS white-space: pre 
　　size (hr) - CSS margin-left, margin-right
　　start (ol) - 사용 불가
　　target (a) - 사용 불가
　　text (body) - CSS color 
　　type (li, ol, ul) - CSS list-style
　　value (li) - 사용 불가
　　version (html) - 사용 불가
　　vlink (body) - CSS a:visited 
　　vspace (img, object) - CSS padding 
　　width (hr, pre) -  CSS width
　　width (td, th) - 사용 불가


추가적인 TIP으로,
　　XHTML 1.0 Strict를 사용하면서 table로 레이아웃을 짜려는 건 바보 같은 일입니다. (절대 불가능!) ;;
　　XHTML 1.0 Transitional에서도 table로 레이아우 짜는 건 거의 불가능 합니다.
　　쉽게 말해서 table 쓰지 마세요. 대신 div 등을 이용합니다.

　　가능한 속성들은 모두 CSS로 해주세요.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

DOCTYPE HTML PUBLIC 선언  (0) 2008.07.15
XHTML 1.0 Transitional 기본 css  (0) 2008.07.09
CSS의 display 속성  (2) 2008.06.27
이젠 CSS도 프레임워크 등장? BluePrint 0.5  (0) 2008.06.27
IE 계열의 CSS 다중선택자 버그에 대해  (0) 2008.06.27

CSS의 display 속성은 해당 엘레멘트가 화면에 어떻게 보여지는지를 결정하는 역할을 합니다.
display 속성의 값은 다 따지면 19가지나 되지만, 실제로 자주 쓰이는 것은 inline과 block, inline-block, none 값이며, 이외의 것은 브라우저에서 지원하지 않는 것도 많기 때문에 불안정해서 사용되지 않는다고 하네요.

block : 블록박스로 만든다.
inline : 인라인 박스로 만든다.
inline-block : 블록박스로 만들어지지만, 인라인 박스처럼 배치된다. (CSS2.1 권고후보에 추가)
none : 박스를 만들지 않으며 시각적으로 완전히 보이지 않는다.
inherit : 상위 요소의 display속성을 상속받는다.

table : 블록레벨의 표로 만든다. (table)
inline-table : 인라인레벨의 표로 만든다. (table)
table-row : 행으로 만든다 (tr 기본 속성)
table-row-group : 본체 행 그룹으로 만든다. (tbody 기본 속성)
table-header-group : 헤더 행 그룹으로 만든다. (thead 기본 속성)
table-footer-group : 푸터 행 그룹으로 만든다. (tfoot 기본 속성)
table-column : 열로 만든다. (col 기본 속성 - 보이지 않음)
table-column-group : 열 그룹으로 만든다. (colgroup 기본 속성 - 보이지 않음)
table-cell : 하나의 셀로 만든다. (td 기본 속성)
table-caption : 캡션으로 만든다. (caption 기본 속성)

list-item : li요소와 같은 블록박스와 목록항목의 인라인박스로 만든다.
run-in : 런인박스로 만든다.
compact : 콤팩트 박스로 만든다. (CSS2.1권고후보에서 삭제)
marker : 그 요소의 전후에 생성된 내용을 마커로 정의한다. (CSS2.1권고후보에서 삭제)


기본적으로 모든 요소들은 디폴트 display 속성이 지정되어 있으며 이를 자유롭게 변경할 수 있습니다. 예를 들면, 인라인 요소인 <span>요소에 display속성을 block으로 지정하면 <div>태그와 같은 역할을 하게 되는 것이죠.
사실 이번 기회에 책이나 인터넷을 찾아보고 조사하긴 했지만, 저도 실제로 사용하는 것은 위쪽의 다섯가지 정도밖에 안되는 것 같습니다.

display 속성 중에 주목할 만한 것은 table-cell 이라는 값인데요... 이게 테이블에서 <td>태그와 같은 속성을 가지게 해줍니다. 아시다시피 <td>태그는 기본적으로 상하 중앙 정렬이 됩니다.
레이아웃을 잡아보셨다면 아시겠지만, <div>태그는 상하 중앙정렬이 지원되지 않지요. 이럴 때 div태그에 display:table-cell; 속성을 주시면, 상하로 중앙 정렬이 가능하게 됩니다.
다만 이게 또 문제많은 IE에서 지원하지 않는다는 것이 참 아쉽습니다. -_-;;; (FF는 지원됩니다.) 레이아웃에서 상하 중앙정렬에 관한 포스트는 다음 기회로 미루기로 하지요.

아무튼 float 속성과 마찬가지로 display 속성을 잘 활용하면 CSS로 더 정밀한 레이아웃을 잡을 수 있습니다. 모르고 막 쓰던 display 속성을 이제는 제대로 알고 사용하는 것은 어떨까요?

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

XHTML 1.0 Transitional 기본 css  (0) 2008.07.09
XHTML 1.0 Strict에서 더 이상 사용할 수 없는 태그 / 속성  (0) 2008.07.09
이젠 CSS도 프레임워크 등장? BluePrint 0.5  (0) 2008.06.27
IE 계열의 CSS 다중선택자 버그에 대해  (0) 2008.06.27
Print Different  (0) 2008.06.27

최근 웹 2.0 시대에 들어서 RIA가 대세가 됨에 따라... 마치 플래시와 같은 동적인 UI를 구현하기 위해서 자바스크립트 개발의 중요성이 많이 부각되었습니다.
이러한 개발을 도와주는 도구로 각종 컴포넌트와 편리한 명령어를 담은 자바스크립트 프레임워크가 많이 개발되어 있습니다. 잘 알려진 자바스크립트 프레임워크로는 Prototype.js, Dojo Toolkit, MooTools, jQuery 등이 사용되고 있죠.

사용자 삽입 이미지

그런데... 이러한 프레임워크라는 개념이 CSS에도 도입이 된 것 같습니다.
저도 나름 새로운 사이트를 들어갈 때나, 프리랜스로 작업할 때 CSS의 기초로 사용하는 파일을 가지고 있구요.. 이를 바탕으로 작업을 진행합니다. 이것의 확장된 개념이라고 할 수도 있을까요?
그와 더불어 디자이너 입장에서도 디자인을 하면서 CSS를 더 잘 설계할 수 있도록 도와주는 기능이 있는 것 같습니다. (그리드)

공식 사이트 :
Google code : http://code.google.com/p/blueprintcss/
blog : http://bjorkoy.com/past/2007/8/28/blueprint_05_the_experiment/


기능 :
An easily customizable grid (그리드 기능)
Sensible typography (센시티브한 타이포그라피. 다만 영문쪽 이야기겠죠?)
Relative font-sizes everywhere (상대크기 폰트)
A typographic baseline
Perfected CSS reset
A stylesheet for printing (프린터를 위한 스타일시트)
Compressed version (사이즈를 줄인 압축버전)
No bloat of any kind (부풀어오른게 없다...? 최적화시켰다는 이야기일까요...?)

예정된기능 :
Support for PNG transparency in IE5.5+ (js) (js파일을 통해 IE5.5버전부터 png이미지 지원)
Liquid layout version (유연한 레이아웃)

샘플 :
Grid - http://bjorkoy.com/blueprint/grid-test.html
Typography - http://bjorkoy.com/blueprint/typography-test.html

블로그에 가보니 BP 0.6버전의 스트레스 테스트를 하고 있다고 하는군요.
개인적으로는 다음 버전에서 IE5.5이상의 png 지원이 끌립니다. 쓰고 싶은 png파일 마음껏 쓰고 싶어요.

일단 한번 훑어보긴 했는데, 아직은 강력한 기능은 없어서인지, 왜 써야하는가...? 라는 건 잘 모르겠습니다.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

XHTML 1.0 Strict에서 더 이상 사용할 수 없는 태그 / 속성  (0) 2008.07.09
CSS의 display 속성  (2) 2008.06.27
IE 계열의 CSS 다중선택자 버그에 대해  (0) 2008.06.27
Print Different  (0) 2008.06.27
깨지지 않는 라운드 박스 만들기...  (0) 2008.06.13

CSS에서 사용하는 다중 선택자(Multi Class)란 동일 엘리먼트에 여러개의 선택자(id, class)를 동시에 적용하기 위한 목적으로 여러개의 선택자를 사용하는 것을 말합니다.
CSS1에서 선택자의 개념이 사용된 후, CSS2에서 다중 선택자가 추가되어 사용되고 있는데요, CSS를 사용해 웹사이트를 개발하다 보면 다중선택자는 정말 편리한 존재입니다.

사용자 삽입 이미지

<style>
.foo { background:yellow; }
.bar { border:solid 4px red; }
.foo.bar { border-style: dashed; }
</style>

<div class="foo">foo</div>
<div class="bar">bar</div>
<div class="foo bar">foo bar</div>

아마 기존에 다중 선택자에 대한 자료를 찾아보셔서 알고 계신 분은 foobar 라는 단어가 익숙하실 지도 모르겠습니다. (웃음)
위의 코드는 다중 선택자를 적용하여 foo 클래스와 bar 클래스의 속성을 하나의 엘리먼트에 동시에 적용한 예제입니다. 또한 클래스를 붙여서 선언하게 되면 평소에는 적용되지 않다가 두 클래스가 동시에 적용될 경우에만 별도의 효과를 주는 것도 가능합니다.
이렇게 여러 개의 클래스를 하나의 엘리먼트에 적용하여 서로 다른 효과를 동시에 적용할 수 있고, 이 다중 선택자는 3개 이상도 사용이 가능합니다.
만약 클래스 내의 css속성이 겹친다면 뒷쪽에 선언된 클래스의 css속성을 우선하지만(덮어쓰기 효과) 만약 !important 가 속성에 포함되어 있을 경우 순서에 상관없이 해당 속성을 우선 적용하게 됩니다.

그래서 CSS개발하시는 분은 대부분 다중 선택자를 매우 유용하게 사용하고 있지만, IE6에서는 관련 버그가 존재하기 때문에 사용에 주의해야 합니다. (또 IE6이 문제입니다! -_-)


1. id와 class 를 동시 조합하여 이용시, 나중에 선언된 다중 선택자 구문 무시
이 부분은 NHN NULI의 css가이드를 참고하였습니다. IE6의 경우 id와 class를 다중 선택자로 적용할 때에 나중에 선언된 다중 선택자를 무시하는 버그가 존재합니다.

사용자 삽입 이미지

<style>
#id.class1{background:#f00;}
#id.class2{background:#0f0; width:200px;} /* Does not exist in the IE6 */
#id2.class2{background:#00f; width:200px;}
#id2.class3{background:#0f0; width:300px;} /* Does not exist in the IE6 */
#id.class3{background:#f00; width:300px; font-weight:bold;} /* Does not exist in the IE6 */
</style>
<div id="id" class="class1">class1</div>
<div id="id" class="class2">class2</div>
<div id="id2" class="class2">class2</div>
<div id="id2" class="class3">class3</div>
<div id="id" class="class3">class3</div>

원래 위의 예제에서는 그림처럼 보이는 것이 바른 렌더링입니다. 하지만 IE6에서는 예제에서 2, 4, 5번째 줄에 해당하는 부분을 무시하게 됩니다. 아래 이미지처럼요.

사용자 삽입 이미지


따라서 불쌍한 IE6 을 위해서라면, 붙여서 쓰는 다중 선택자를 사용할 때에는 id와 class를 동시에 사용하지 않고, class만 사용하는 것을 권장합니다.

2. class 조합하여 이용시, 앞에 선언된 class 무시
하지만 불쌍한 IE6을 생각해서 class만 가지고 다중 선택자를 구성했음에도 불구하고, 특정 상황에서는 또 오작동을 해버립니다.
class만으로 다중 선택자를 구성할 때 예를 들어 .foo.bar{} 라는 클래스를 구성하면 IE6은 앞의 .foo를 무시하고 .bar{} 라는 클래스로 인식하게 됩니다.
원래 코드
.foo { background:yellow; }
.bar { border:solid 4px red; }
.foo.bar { border-style: dashed; }
IE6이 인식하는 코드
.foo { background:yellow; }
.bar { border:solid 4px red; } /* border 속성 중 border-style 속성이 삭제됨 */
.foo.bar { border-style: dashed; } /* bar class의 border-style 속성이 오버라이딩됨 */

이를 이미지로 보여드리면 다음과 같습니다.

사용자 삽입 이미지

<style>
.foo { background: yellow; }
.bar { border: solid 4px red; }
.foo.bar { border-style: dashed; }
</style>
<div class="foo">foo!</div>
<div class="bar">bar!</div>
<div class="foo bar">foo bar!</div>

위에서 foo bar 라는 유명한 예제(?)를 보여드렸는데요, 이게 IE6에서 다중선택자의 버그가 있다는 것을 적나라하게 보여주고 있죠. 원래 bar class의 경우 border-style 속성이 solid임에도 불구하고 IE6에선 .foo.bar 를 .bar로 인식함에 따라 border-style이 dashed 로 모두 교체된 것을 확인할 수 있습니다. 1번 항에서 다루었던 버그도 이 버그의 영향이 겹쳐서 생긴 문제가 아닐까 하는데요, 정확히는 잘 모르겠습니다.
이 버그를 회피하기 위해서는 class를 붙여서 선언하는 다중 선택자를 사용하지 않는 것이 최선입니다. 하지만 CSS작성 중의 편의를 위해서 붙여서 선언해야 할 경우엔 뒤에 붙이는 class명을 겹치지 않도록 사용하는 것도 방법입니다.

기존
.dx.class {}
.dy.class {} /* 별도의 class로 인식되지만, IE버그로 dy.class{}만 인식 */
수정(버그 회피)
.dx.classx {}
.dy.classy {} /* 최종 class명을 다른 이름과 겹치지 않는 고유의 클래스명으로 사용 */

이렇게 수정하는 방법은 다중 선택자의 장점을 완전히 무시하는 비효율적인 방법이긴 하지만, 어쩌겠습니까... 이놈의 IE6이 도와주지 않는걸요...

물론, IE7은 위에 나타나는 다중클래스의 버그는 해결하였습니다. 하지만, 표준모드(HTML 4.01, XHTML 1.0)로 동작할 때에만 버그가 나타나지 않게 되어 있으며, Quirks mode DTD로 동작될 때에는 IE6과의 호환을 위해 (또는 미처 쿽스모드 엔진을 고치지 못했을 수도 있죠) 이 버그가 그대로 나타나도록 되어있습니다.

IE6은 언제까지 우리 UI개발자를 괴롭히게 될까요? ㅠ_ㅠ

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

CSS의 display 속성  (2) 2008.06.27
이젠 CSS도 프레임워크 등장? BluePrint 0.5  (0) 2008.06.27
Print Different  (0) 2008.06.27
깨지지 않는 라운드 박스 만들기...  (0) 2008.06.13
클릭을 좀더 편하게 - label  (0) 2008.06.13

Although you may not realize it, the Web is a multi-medium information source. No, I'm not talking about multimedia-- audio and video streams, for example-- but the actual medium through which the Web's content is conveyed to us. For the vast majority of users, the medium is visual: the monitors we use every day to display pages. But there are many who also turn to the medium of print, creating "hard copies" of pages using their laser printers.

However, the overwhelming aim of Web design is visual, and many Web page designs don't print out very well. Navigation bars, ad banners, and other such things clutter up printouts and make them much harder to read. How many times have you seen a page on the Web which has, off to one side, a link which says, "Click here for a printer-friendly version"?

There are certainly other media-- audio browsers and handheld devices are two such examples-- but the output medium which most concerns authors is still the printer. CSS2 offers a way to address this, giving authors the ability to create stylesheets which are medium-specific. This month, we'll look how you can style a single page for both screen (monitor) and print output, and provide an example you can try using Internet Explorer 5 for Windows, or MSIE 4.5 for the Macintosh.

Making the Association

There are a variety of ways to associate media-specific stylesheets to a document. The most familiar way is to use the LINK element and simply add the media attribute: 

<LINK rel="stylesheet" type"text/css"
     href="print.css" media="print">

In the previous example, we see that the stylesheet print.css has been given a media of print; thus, its styles will be used only when the document is printed. These styles will have no effect on the display of the document when viewed using a monitor, audio browser, or any other non-printing device.

There are currently ten defined media types:

  • all
  • aural
  • braille
  • embossed
  • handheld
  • print
  • projection
  • screen
  • tty
  • tv

These media types are described in some detail in Chapter 7 of the CSS2 specification. The most important is all, which is the default value for any stylesheet which does not have a defined media.

There are other ways to assign media to stylesheets. For example, you can list one or more media types on an @import statement: 

@import url(paged.css) print,projection;

Thus, the styles in paged.css will be used in both print and projection media, both of which are known as paged media. Multiple media can be specified for LINKed stylesheets as well. The following two statements are equivalent: 

<LINK rel="stylesheet" type"text/css"
     href="print.css" media="print,projection">
@import url(print.css) print,projection;

There is one other way to apply media-specific styles: the @media rule. Here's an example: 

<STYLE type="text/css">
@media print {
   BODY {font-size: 10pt; line-height: 120%; background: white;}
}
@media screen {
   BODY {font-size: medium; line-height: 1em; background: silver;}
}
</STYLE>

Restyling for Print

Let's now look at a real example of alternate-media stylesheets. In order for these examples to work, you'll need to be using MSIE5/Win or MSIE4.5/Mac, and it will be helpful (though not strictly necessary) if you have a printer handy. Navigator 4.x does not support alternate media on any platform, so it won't be much help with these examples.

First, let's assume a simple page of text with some various elements: paragraphs, headings, hyperlinks, and so on. This file is called latinesque.html, and we want to display it differently depending on whether it's on a monitor, or on paper. First we write a stylesheet for screen display (remember, there's no accounting for taste): 

/* screen display styles */
BODY {color: silver; background: black;}
A:link {color: yellow; background: #333333; text-decoration: none;}
A:visited {color: white; background: #333333; text-decoration: none;}
A:active {color: black; background: white; text-decoration: none;}
H1, H2, H3 {color: #CCCCCC; background: black; padding-bottom: 1px;
    border-bottom: 1px solid gray;}

This will give us a page something like that shown in Example 1. Note the ad banner, which is a feature common to so many sites.

All right, now we need to decide how the printed page should look. We decide on a simple, conventional print style, without an ad banner, and so the stylesheet turns out like this: 

/* print styles */
BODY {color: black; background: white;}
A:link, A:visited {background: white; color: black; text-decoration: underline;
   font-weight: bold;}
H1, H2, H3 {background: white; color: black; padding-bottom: 1px;
   border-bottom: 1px solid gray;}
DIV.adbanner {display: none;}

We've added the last style in order to get rid of the ad banner in the printed version. To get an idea of what this will look like, take a peek at Example 2. Realize that this is a screen approximation of a printout, but for the moment, it will do.

Now, to the top of the document, we add the following LINK elements: 

<LINK rel="stylesheet" type"text/css"
     href="screen.css" media="screen">
<LINK rel="stylesheet" type"text/css"
     href="print.css" media="print">

Thus we get the document shown in Example 3, which has the screen appearance of Example 1 but the printed appearance of Example 2-- load it up in MSIE, print it out, and see what happens!

(If you'd like to see another example of print-media stylesheets in action, try printing out the CSS Support Grid.)

Just the Tip of the Iceberg

Of course, the simple examples I've provided are just a beginning. There is almost no limit to what can be done with alternate-media stylesheets. Using them appropriately is the key to creating pages which can be styled for regular screen output, printing, legible display on handheld devices, special styles for the blind, and much more. As browsers add support for more media, and more ways to set up media-specific styles, we'll return to this subject for more. Until then, try out some print-media stylesheets on your pages, and see how you can make your site better-- and more accessible-- than ever.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

이젠 CSS도 프레임워크 등장? BluePrint 0.5  (0) 2008.06.27
IE 계열의 CSS 다중선택자 버그에 대해  (0) 2008.06.27
깨지지 않는 라운드 박스 만들기...  (0) 2008.06.13
클릭을 좀더 편하게 - label  (0) 2008.06.13
CSS우선순위  (0) 2008.03.29

아래 이미지 두개를 이용해서 깨지지 않는 라운드형 박스를 만들어 보겠습니다.

사용자 삽입 이미지
사용자 삽입 이미지
일단 원리는 이렇습니다.
사용자 삽입 이미지
라운드되어 있는 네 귀퉁이를 표현하기 위해서는 위 그림과 같이 네개의 엘리먼트가 필요합니다. 설명을 쉽게 하게 위해 일일이 네번의 마크업을 추가했습니다. 쓸데 없는 레이어를 줄이기 위해 상자안의 내용에 들어가는 엘리먼트를 응용해도 되겠지요.. 예를 들면 <a>태그나 <ul>태그 같은...

step01.
네 귀퉁이의 라운드를 표현하기 위한 마크업을 하겠습니다.
<div class="box_rt">
 <div class="box_lt">
  <div class="box_lb">
   <div class="box_rb">
    <h3>최근글 리스트</h3> 
    <ul>
     <li>뜬금없는 광고 - 빨간중독...</li>
     <li>이미지 메뉴탭 만들어 보기.</li>
     <li>살아 돌아왔습니다..</li>
     <li>burning eolin!.</li>
     <li>골라먹는 떡볶이 소스 받아...</li>                
    </ul>
   </div>
  </div>
 </div>
</div>

step02.
라운드형 박스를 디자인해 보겠습니다.
.box_rt { background:url(round_right.gif) right top no-repeat; float:left;}
.box_lt { background:url(round_left.gif) left top no-repeat; padding:9px 0 0 0;}
.box_lb { background:url(round_left.gif) left bottom no-repeat; padding:0 0 0 9px;}
.box_rb { background:url(round_right.gif) right bottom no-repeat; padding:0 9px 9px 0;}

아래와같이 박스안의 내용이 늘어나거나 폰트사이즈가 커진다고 하더라도 박스가 깨지지 않습니다. .box_lb, .box_rb를 클래스명으로 사용하고 있는 레이어를, h3이나 ul로 대체 한다면쓸데 없는 레이어의 사용을 자제할 수 있습니다. (위의 마크업은 어디까지나 설명을 쉽게하기 위함이고 어떠한 상황에서도 응용이 가능하도록 하기 위함입니다.)
사용자 삽입 이미지

주의! 박스가 무한대로 커져도 깨지지 않는 것이 아니라 배경이미지 사이즈에 따라 달라 집니다. 여기서 사용한 이미지는 가로 세로 400px 의 이미지를 사용했기 때문에 그 이상 넘어가면 박스가 깨지겠지요.. 배경이미지가 쓸데없이 커지면 이또한 효율적이지 못하므로 디자인 하면서 적절한 사이즈를 예상해서 제작하면 됩니다.

invalid-file

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

IE 계열의 CSS 다중선택자 버그에 대해  (0) 2008.06.27
Print Different  (0) 2008.06.27
클릭을 좀더 편하게 - label  (0) 2008.06.13
CSS우선순위  (0) 2008.03.29
css style 지정 순서  (0) 2008.03.26
사용자 삽입 이미지
일반적으로 체크박스에 체크(?)를 하기 위해서는 체크박스를 클릭해야 합니다. 하지만 그 영역이 너무 작고, 성질급한 저같은 사람에겐 속터지는 일이지요... 체크박스와 연관되어 있는 텍스트에까지 클릭의 영역을 지정하고 싶을 경우를 위한 태그가 있습니다. 바로 <label>이라는 것인데... 아는 사람은 다 알지만 필요성을 느끼지 못해 사용하지 않는 경우가 있습니다. 그런데 예를 들어서 
사용자 삽입 이미지

이럴경우는... 일일이 체크하려면 눈이 빠지고, 손가락 후달립니다... 게다가 글작성시마다... 카테고리를 분류하기 위해 빈번하게 체크가 일어날 경우라면 여간 짜증나는 일이 아닐 수가 없겠죠..
이럴때 작은 배려가 큰 감동이 될수 있다나요.. ㅋㅋㅋ 방법은 간단합니다. 체크박스와 텍스트를 연결 시켜주는 label을 사용하면 됩니다.
사용자 삽입 이미지
<input type="checkbox" name="check" id="email_save" />
<label for="email_save">이메일 저장</label>

여기서 중요한것은 체크박스의 id값입니다. 모 굳이 얘기 하자면 email_save라는 아이디값을 가진 체크박스를 위한 레이블!.. 정도로 해석이 되겠지요.. 영작문 해석하는것 같군요.. ^^;;

이것은 클릭할 수 있는 영역이 넓어져 사용자 편의를 위한것도 있지만, 레이블과 폼의ID 관계를 정의해 주어 스크린리더가 각 폼에 해당하는 레이블을 올바르게 읽어주게 하는 아주 중요한 태그입니다. 게다가 마크업에 한발 다가서는 태그기도 하구요..

이렇게 하면 코드가 한결 깔끔해 지겠지요.. ^ ^v

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

Print Different  (0) 2008.06.27
깨지지 않는 라운드 박스 만들기...  (0) 2008.06.13
CSS우선순위  (0) 2008.03.29
css style 지정 순서  (0) 2008.03.26
테이블의 셀내,셀간 여백 (cellPadding,cellSpacing)  (0) 2008.02.13

애초부터 의식적으로 수정과 유지보수를 고려한 것이라면 좋았을 것이지만, 딱히 그런것은 아니고 단지 반복적인 프로세스를 통해서 경험적으로 형성된 결과이다.

모든 스타일시트를 열어보고, 확인해 볼 수는 없었지만 최근의 것들을 살펴보니까 나는 다음과 같은 순서를 가지고 있었다.


  1. display
  2. position
  3. clear
  4. float
  5. width / height
  6. margin / padding
  7. border / background
  8. color / font
  9. align / etc

모질라의 CSS 순서 제안을 찾아봤는데 다행인지 요행인지 나의 작성순서와 크게 다르지는 않았다.


  1. display
  2. list-style
  3. position
  4. float
  5. clear
  6. width / height
  7. padding / margin
  8. border / background
  9. color / font
  10. text-decoration
  11. text-align / vertical-align
  12. white-space
  13. other text
  14. content

간단히 분석을 해보자면, 모질라의 제안이나 내 방식이나 레이아웃을 설정하는 것을 최우선으루 두고, 영역을 이루는 객체의 크기를 잡고, 텍스트 단위의 색과 모양, 정렬을 설정하는 형태가 된다. 조금 더 세세히 들어가면 유지보수를 위해서 수정이 자주 일어날 수 있는 속성들을 상대적으로 앞으로 배치하게 된다. 예전에는 디자인을 완벽하게 스타일시트로 분리하여 제작하는 경우가 없어 대부분 링크나 텍스트 컬러만을 다루는 정도여서 스타일시트의 분량이 적었고, 따라서 속성 하나당 한줄씩 잡는 코딩 방식을 썼지만 최근에는 분량이 많이 늘어나 한 스타일을 한줄로 이어 붙이는 방식을 많이 사용하는 것 같다. 그래서 가로로 스크롤이 생기거나 두줄 이상으로 이어지는 경우가 많은데 이런 경우 바로 수정할 속성이 비교적 앞쪽에 위치해 있는 것이 편리하다. 더불어, 속성명과 값을 붙이는 것보다 한 칸 띄우는 것이 가독성에도 좋고, 수정에도 용이한 것 같다. 다만, 최종적인 스타일시트의 경우 용량이 커질 수 있으므로 빈 칸을 모두 제거하여 한 줄로 만드는 CSS압축방식을 적용하면 좋을것 같다.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

깨지지 않는 라운드 박스 만들기...  (0) 2008.06.13
클릭을 좀더 편하게 - label  (0) 2008.06.13
css style 지정 순서  (0) 2008.03.26
테이블의 셀내,셀간 여백 (cellPadding,cellSpacing)  (0) 2008.02.13
텍스트(TEXT)  (0) 2008.02.13
<style>
 #dasfs .abc { display:block; position:relative; margin:0; padding:; width:; height:; text-align:; font:11px dotum; font-weight:; background:; }
</style>

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

클릭을 좀더 편하게 - label  (0) 2008.06.13
CSS우선순위  (0) 2008.03.29
테이블의 셀내,셀간 여백 (cellPadding,cellSpacing)  (0) 2008.02.13
텍스트(TEXT)  (0) 2008.02.13
input 박스안에 미리 지정글 넣어두고 클릭하면 사라지게하는 소스  (0) 2008.02.13
TABLE의 CellPadding 과 CellSpacing 을 이용한 테이블 디자인

CellPadding은 하나의 셀(칸) 에서 내용물과 셀 경계가 얼마나 간격을 둘지를 얘기하는 것이고 ... 이 값을 높이면 내용물에서 셀의 경계선이 멀어지게 된다.

CellSpacing은 개별 셀(칸)이 테이블이나 다른 셀로 부터 얼마나 간격을 줄 건지를 얘기하는 것 ... 이 값을 높이면 테이블로 부터 또는 다른 셀들과의 간격이 멀어지게 된다.

한가지 !!! 내용물 배치를 위한 뼈대를 만들 경우는 정확한 배치를 위해 둘다 "0" 을 사용한다.


■ CellPadding / CellSpacing

CellPadding 지정(X)
CellSpacing 지정(X)
Border 지정(X)
CellPadding=0
CellSpacing=0
Border=0 		CellPadding=3
CellSpacing=0
Border=0
   
   
abc 하하
하하 abc
abc 하하
하하 abc

* 첫번째 경우는 피하는게 좋겠다. 정확한 표현을 하는 습관을!!!
* 두번째 경우는 정확한 넓이를 가지고 있다. 원하는 위치에 내용물 배치할 때 사용
* 세번째는 내용물을 경계에서 붙지 않도록 하고, 셀의 높이를 지정하지 않아도 될 경우가 많다.



■ CellSpacing 으로 가늘게 경계선 그리기


* 항목을 배치할 때는 CellPadding을 꼭 사용하는 게 좋다. 경계선에 붙지 않도록 !!!

* 다음에 나오는 선은 Table의 바탕색이 CellSpacing 값 만큼 선으로 나온다



하늘을 가리는 천정(table) 이 있고 바탕색(bgcolor)은 파란색이라면...

그 천정이 4개의 조각(td) 으로 되어 있는데 바탕색(bgcolor)은 흰색이라면...

4개의 조각(td)이 빈틈없이 천정(table)을 덮고 있을 때는 하늘의 파란색(table bgcolor)이 보이지 않았는데...

4개의 조각들(td)의 사이(CellSpacing)를 1픽셀씩 벌린다면 ...

하늘의 파란색이 그 사이로 보이게 된다!!! 그게 선처럼 보이는 것!

CellPadding=3
CellSpacing=1
Border=0

table 에 bgcolor 적용
td 에 bgcolor 적용
 CellPadding=3
CellSpacing=1
Border=0

table 에 bgcolor 적용
td 에 bgcolor 적용		 CellPadding=3
CellSpacing=1
Border=0

table 에 bgcolor 적용
td 에 bgcolor 적용
abc 하하
하하 abc
abc 하하
하하 abc
abc 하하
하하 abc
abc 하하
하하 abc
abc 하하
하하 abc
abc 하하
하하 abc
CellSpacing=5
abc 하하
 CellSpacing=5
abc 하하
 CellSpacing=5
abc 하하


테이블 사용시 Border,CellPadding,CellSpacing 은 꼭 지정하고 사용하는 습관을 !!!

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

CSS우선순위  (0) 2008.03.29
css style 지정 순서  (0) 2008.03.26
텍스트(TEXT)  (0) 2008.02.13
input 박스안에 미리 지정글 넣어두고 클릭하면 사라지게하는 소스  (0) 2008.02.13
텍스트상자에 한글로 입력이 되게 하는 자바스크립트  (0) 2008.02.13

① 글자의 간격을 지정할 때(letter-spacing)

    - {letter-spacing:글자간의 간격값}

    - 상대적 길이 단위인 em으로 표기하면 적용하기 쉬움

    - 속성값 : normal 또는 길이 단위의 수치 입력

    - 예) <style type="text/css">

                 P {letter-spacing:0.5em ; font-size:12pt}

           </style>

 


② 텍스트에 밑줄을 그어줄 때(text-decoration)

    - {text-decoration:텍스트의 장식}

    - 속성값 : none - 기본값

                  underline - 텍스트에 밑줄(=<u>~~~</u>)

                  overline - 텍스트에 윗줄

                  line-through - 텍스트를 관통하고 중앙에 줄(=<strike>~~~</strike>)

                  blink - 텍스트가 깜빡이게 설정(넷스케이프에서만 지원)

    - 예) <body>

                 <P style="text-decoration:none">~~~</P>

                 <P style="text-decoration:underline">~~~</P>

                 <P style="text-decoration:overline">~~~</P>

                 <P style="text-decoration:line-through">~~~</P>

                 <P style="text-decoration:blink">~~~</P>

           </body>

 

 

③ 텍스트를 수직정렬할 때(vertical-align)

    - {vertical-align:글꼴의 수직정렬 값}

    - 이미지나 글꼴의 수직정렬 설정

    - 속성값 : baseline - 기본 줄에 맞춤

                  sup - 아래첨자

                  super - 윗첨자

                  middle - 이미지와 함께할 때 텍스트를 중앙에 맞춤

                  text-top - 텍스트와 함께할 때 텍스트를 맨위에 맞춤

                  top - 이미지와 함꼐할 때 텍스트를 맨위에 맞춤

                  text-bottom - 텍스트와 함께할 때 텍스트를 맨 아래에 맞춤

                  bottom - 이미지와 함께할 때 텍스트를 맨 밑부분에 맞춤

    - 예) <style type="text/css">

                P {font-size:12pt}

           </style>

           .....

           <body>

               <P>

                  <font style="vertical-align:sub ; color:red ; font-size:12pt">~~~</font>

               </P>

          </body>

 

④ 텍스트의 대소문자를 지정할 때(text-transform)

    - {text-transform:문자열의 변환값}

    - 대소문자를 변환해주는 기능(font-variant에서 확장된 속성을 가짐)

    - 속성값 : capitalize - 영문자의 첫자만을 대문자로 바꾸어줌

                   none - 아무런 적용을 하지 않음

                   uppercase - 모든 영문자를 대문자로 바꾸어줌

                   lowercase - 모든 영문자를 소문자로 바꾸어줌

    - 예) <body style="font-size:12pt">

                <font style="text-transform:capitalize">~~~~~~~</font>

                <font style="text-transform:none">~~~~~~~~~~</font>

                <font style="text-transform:uppercase">~~~~~~</font>

                <font style="text-transform:lowercase">~~~~~~~</font>

            </body>

 

 

⑤ 텍스트나 이미지 옆 문자열을 정렬할 때(text-align)

    - {text-align:문자열의 정렬}

    - HTML의 align속성과 같은 기능. 글자나 이미지의 위치를 자유롭게 설정

    - 속성값 : left

                  center

                  right

                  justify

    - 예) <body>

                <P style="text-align:left">~~~~~~~~~</P>

                <P style="text-align:center">~~~~~~~</P>

                <P style="text-align:right">~~~~~~~~</P>

                <P style="text-align:justify">~~~~~~~</P>

           </body>

 

 

⑥ 문자열의 들여쓰기를 할 때(text-indent)

    - {text-indent:문자열들여쓰기}

    - 속성값 : 길이의 단위 적용, %가능, 음의 값 사용 가능

    - 예) <body>

               <P style="text-indent:20pt">~~~~~~~~~~~~~~~~</P>

               <P style="text-indent:3cm">~~~~~~~~~~~~~~~~</P>

               <P style="text-indent:20%">~~~~~~~~~~~~~~~~</P>

            </body>

 

 

⑦ 문서의 줄 간격을 지정할 때(line-height)

    - {line-height:줄간격}

    - 사용자들의 가독성을 높이기 위해 문장의 줄 간격을 설정할 때 사용

    - 속성값 : normal, 길이단위, %

    - 예) <body>

              <P style="line-height:14pt">~~~~~~~~~~~~~~~~</P>

              <P style="line-height:normal">~~~~~~~~~~~~~~~</P>    

              <P style="line-height:150%">~~~~~~~~~~~~~~~</P>                 

           </body>

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

css style 지정 순서  (0) 2008.03.26
테이블의 셀내,셀간 여백 (cellPadding,cellSpacing)  (0) 2008.02.13
input 박스안에 미리 지정글 넣어두고 클릭하면 사라지게하는 소스  (0) 2008.02.13
텍스트상자에 한글로 입력이 되게 하는 자바스크립트  (0) 2008.02.13
IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기  (0) 2008.01.11

input 박스안에 미리 지정글 넣어두고 클릭하면 사라지게하는 소스

<input class="Wfield" onfocus="this.value='';" size="15" value="이름" name="RP_NAME">

<input class="Wfield" onfocus="this.value='';" size="15" value="비밀번호" name="RP_PASS">

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

테이블의 셀내,셀간 여백 (cellPadding,cellSpacing)  (0) 2008.02.13
텍스트(TEXT)  (0) 2008.02.13
텍스트상자에 한글로 입력이 되게 하는 자바스크립트  (0) 2008.02.13
IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기  (0) 2008.01.11
IE 7 에서 dt, dd 좌측여백이 생기는 문제  (0) 2008.01.11

아래 입력 상자는 한글로 입력이 됩니다.

[텍스트박스]
<input type=text style="ime-mode:active;" size=20>

[다중 텍스트박스]

<textarea style="ime-mode:active;" >
</textarea>

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

텍스트(TEXT)  (0) 2008.02.13
input 박스안에 미리 지정글 넣어두고 클릭하면 사라지게하는 소스  (0) 2008.02.13
IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기  (0) 2008.01.11
IE 7 에서 dt, dd 좌측여백이 생기는 문제  (0) 2008.01.11
CSS의 기초  (0) 2008.01.11
검색을 하다가 알아낸(http://www.cssplay.co.uk/layouts/fixed.html) 방법인데, 아주 간단합니다.

body{
    height:100%;
    overflow-y:auto;
}

/* Fixed 할 Element */
.fixed_div{
    position:absolute;
}


하면 됩니다. ㅎㅎ

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

input 박스안에 미리 지정글 넣어두고 클릭하면 사라지게하는 소스  (0) 2008.02.13
텍스트상자에 한글로 입력이 되게 하는 자바스크립트  (0) 2008.02.13
IE 7 에서 dt, dd 좌측여백이 생기는 문제  (0) 2008.01.11
CSS의 기초  (0) 2008.01.11
브라우저의 통일을 바라며 CSS Hack은 계속된다!  (0) 2008.01.11

IE7에서 dt, dd중 dt를 display:none을 했는데도 dd의 좌측 여백이 여전이 존재한다.(물론 margin,padding 모두 0)

<dt style="display:none;margin:0;padding:0">Title</dt>
<dd style="margin:0;padding:0">Description</dd>


해결책은 의외로 쉽다.
dl로 감싸주면 된다.

<dl style="margin:0;padding:0">
    <dt style="display:none;margin:0;padding:0">Title</dt>
    <dd style="margin:0;padding:0">Description</dd>
</dl>


FF때문에 dl 에 margin,padding을 0을 줘야 한다.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

텍스트상자에 한글로 입력이 되게 하는 자바스크립트  (0) 2008.02.13
IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기  (0) 2008.01.11
CSS의 기초  (0) 2008.01.11
브라우저의 통일을 바라며 CSS Hack은 계속된다!  (0) 2008.01.11
셀렉트 박스 그룹화 시키기~  (0) 2007.12.24
css를 작성하는 방법에 대해 알아보겠습니다.

#nipa { width:500px; height:300px; }

#은 객체를 부른다는 표시입니다. 이곳에 쓰일 수 있는 건 # 과 . 이 있습니다.
#은 id="어쩌고" 라고 이름 붙여진 객체를 부르고 . 은 class="어쩌고" 라고 이름 붙여진 객체를 부릅니다.

nipa 자리에는 객체의 이름이 들어갑니다. 객체의 이름은 html 문서에서 정해줍니다. 이름을 정하는 건 마음대로 하셔도 됩니다. "nikebabo"도 좋고 "clannad"도 됩니다.

{ } 안에 속성을 적습니다. 들어갈 수 있는 속성은 객체에 따라 다양합니다. 다 외우는건 무모한 짓이고, 태그처럼 필요할 때 찾아서 적는게 효율적입니다.

그리고 한가지. 띄워쓰기는 이름이나 속성을 제외한 부분에서 마음대로 하셔도 됩니다.
예를들어,

#nipa          {    width:   500px;height: 300px;  
            }

는 맨 위의 코드와 동일합니다.
물론 이렇게 쓰시는 분들은 없겠죠? 읽기 편하게 하면 됩니다.
예를들어,

#nike                 { width:300px; border:1px solid #ccc; }
#happybirthday   { text-align:left; }
#minamike          { margin:0; padding:0 }

이렇게 줄을 맞춰서 적으면 나중에 알아보기 쉽죠.
공백으로는 스페이스바 이외에 엔터나 탭이 들어가도 됩니다.


1. id 와 class
객체의 이름을 정하는 방법에는 두가지가 있습니다.
id 는 유일한 객체의 이름을 정할 때 사용됩니다.
전체 레이아웃에서 header는 한번밖에 나오지 않겠죠. 그러면 id="header" 라고 이름을 정해줍니다.
class 는 여러번 나오는 객체의 이름을 정할 때 사용됩니다.
한 페이지에 여러 포스트가 표시되는 경우
각각의 포스트마다 id="post1" id="post2" 라고 지정하는건 피곤한 일입니다.
class="post" 라고 지정해두면,
.post  { 속성 }
한방으로 끝낼 수 있습니다. :)

이 id와 class는 마음대로 정할 수 있습니다만, a, img 등 html에서 기본적으로 사용되는 태그 이름과 같게 지정하면 나중에 헷갈리므로 되도록 단순하면서 용도를 잘 드러낼 수 있는 이름을 정해주세요.


2. 어떤 태그들은 그냥 부를 수 있습니다.
html, body, blockquote, img, div, table 등은 # 이나 . 을 붙이지 않고 그냥 부르는 것이 가능합니다.

img { width:100px; }

라고 입력해주면, html 문서에 있는 모든 이미지들의 가로를 100픽셀로 맞추게 됩니다.


3. 여러개를 한번에 부를 수 있습니다.

#nipa , #header , #minamike { width:100px; }

이렇게 해주면 3개의 객체 모두에 속성을 지정하게 됩니다.


4. 속해 있는 것들을 부르는 방법
"속해 있다" 라는 표현이 익숙하지 않은가요? 아래의 예를 보세요

<div id="wrap">
    <div class="shout">
          <p>니파!</p>
    </div>
</div>

div는 레이아웃을 짜는 한칸짜리 표와 같은 형태의 태그입니다.
wrap 안에 shout가, shout 안에 글자가 들어가 있습니다.
css 에서 shout 의 가로를 500px로 바꾸어 보겠습니다.

#wrap .body { width:500px; }

네 그렇습니다.
상위의 객체의 이름 뒤에 한 칸 띄우고 이름을 부르면 됩니다.
그럼 니파! 라는 문구의 색을 바꾸어 보겠습니다.

#wrap .body p { color:#CCCCCC; }

p는 문단을 나타내는 태그로, 앞에서 알아봤듯이 이름을 정하지 않고도 부를 수 있습니다.
물론 저렇게 할 경우 shout 안에 있는 모든 문단의 색이 변하므로,
니파! 라는 문구만 바꾸고 싶다면 니파! 를 싸고 있는 p 태그에 이름을 붙여주면 됩니다.

'Web(웹) Study > HTML & CSS' 카테고리의 다른 글

IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기  (0) 2008.01.11
IE 7 에서 dt, dd 좌측여백이 생기는 문제  (0) 2008.01.11
브라우저의 통일을 바라며 CSS Hack은 계속된다!  (0) 2008.01.11
셀렉트 박스 그룹화 시키기~  (0) 2007.12.24
IE6,IE7 ,FireFox 에 대해 CSS 맞추기  (0) 2007.12.22

+ Recent posts

티스토리툴바