웹으로 먹고 사는 사람 ::

'CSS'에 해당되는 글 8건

2007/12/04 기대되는 CSS3의 background와 border 모듈 몇 가지 (1)
2007/11/21 div, class는 남발을 줄이고, class명은 의미에 맞게 지어요
2007/11/21 IE6/5.5에서 :hover :focus 속성 앵커태그 이외에 주는 법 (2)
2007/10/16 테이블과 CSS로 달력 미니 캘린더 디자인 해보기
2007/10/16 접었다폈다하는 링크롤 소스 배포합니다
2007/07/28 실무에서 자주 마주치는 익스플로러 6 관련 버그 (4)
2007/07/27 웹표준 코딩을 위한 파이어폭스의 확장기능
2007/07/27 css span 태그에 가로 사이즈 주기 (2)

기대되는 CSS3의 background와 border 모듈 몇 가지

웹표준 HTML/CSS 2007/12/04 23:08

아마도 앞으로는 디자인을 모듈화 하는 작업이 더욱 많아질 것입니다.
그래서 CSS를 통한 박스형 디자인은 자주 쓰이는 업무 중 하나인데요,
아직까지는 CSS를 이용해서 박스를 디자인함에 있어서 불편한 점이 많습니다.
CSS3 에서 새로이 추가되는 프로퍼티들을 보면서 기대되는 것 몇 가지를 소개할까 합니다.

background-size
background의 사이즈를 조절할 수 있는 프로퍼티입니다

div {
background-image: url(bg.gif);
background-size: 50%; }

라고 하면 백그라운드 크기를 50% 줄입니다.

div {
background-image: url(bg.gif);
background-size: 50px; }

이라고 하면 백그라운드 이미지를 50픽셀로 고정하게 됩니다.

다중 background 도입
하나의 엘리먼트에 여러개의 백그라운드를 사용할 수 있습니다.

div {
background-image: url(bg1.gif), url(bg2.gif), url(bg3.gif), url(bg4.gif);
background-position: top left, top right, bottom left ,bottom right; }

이런 방식으로 사용이가능합니다.

div {
background-image: url(bg1.gif), url(bg2.gif), url(bg3.gif), url(bg.gif) url(bg5.gif);
background-position: 20% 30%, 10% 40%, 60% 100%, 60%, 70% 80%; }

갯수의 제한도, 포지션 선언 방법도 자유롭습니다.

div {
background-image: url(bg1.gif), url(bg2.gif);
background-repeat: no-repeat, repeat; }

각기 반복을 다르게 설정하여 사이트를 꾸밀 수 있게 됩니다.

border-style 추가

출처 : W3C

몇 가지

border-style이 추가됩니다. wave 속성이 눈여겨 볼만하네요~

border-image
엘리먼트의 border에 백그라운드를 넣을 수 있게 되었습니다!!

출처 : W3C

border-radius

출처 : W3C

border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius, border-radius

기다렸던 속성중에 하나입니다. 박스형 모델을 디자인 할 때, 모서리에 라운드를 넣기 위해서는 필수 불가결하게 background 를 동원하거나 여러겹의 레이어를 겹쳐서 꽁수를 써야했는데요. 이제 그런 불편함은 많이 사라질 것 같습니다.

box-shadow 속성
엘리먼트의 외곽에 그림자 효과를 줄 수 있습니다.

출처 : W3C

div { border: 1px solid #999; box-shadow: 4px 4px #ccc; }

별 것 아닌 것 같지만, 이 속성 역시 필요없는 이미지 작업을 무척이나 줄여줄 것 같습니다. 또한 여러개의 엘리먼트를 겹치던 테크닉도 사라지겠네요. 너무나 유용할 것 같습니다.

CSS3로 인해서, 정말 다양한 CSS 기법들이 등장할 것 같습니다. 또한 불필요한 이미지 작업도 많이 줄어들 것 같습니다. 기대가 됩니다. 앞으로 더욱 웹페이지의 디자인 기법들이 발달해서 U.I.가 풍성해질 것을 기대하니 무척이나 고무됩니다.

꽤 오래전에 제안된 테크닉들 같은데요, 언제쯤 CSS3 프로젝트가 완료되고, 모든 브라우저에서 CSS3를 표준으로 채용할 날이 올까요 :D

소개하지 못한 많은 것들이 있습니다. 더 좋은 정보는 아래에 이 자료의 출처를 표시해두겠습니다. CSS3를 공부하시는데 참고가 되었으면 좋겠습니다.

출처 : http://www.w3.org/TR/css3-background

이올린에 북마크하기(0)

이올린에 추천하기(0)

글 작성자 : 소년허클베리핀

CSS, css3, 스타일시트, 웹표준

트랙백 0개 , 댓글 1개가 달렸습니다.

div, class는 남발을 줄이고, class명은 의미에 맞게 지어요

웹표준 HTML/CSS 2007/11/21 07:26

DIV 남발을 하지말자
TABLE 마인드에서 갓 DIV 마인드로 넘어오기 시작한 디자이너분들께서 실수하시는 부분 중 하나가, 바로 DIV를 남발하는 것입니다. DIV는 만병통치약이 아닙니다.
테이블의 단점 중 하나가 <td>에 재차 <table>이 들어가기 때문에, 겹테이블이 많아져서 페이지 로딩이 느려진다는 것 입니다. DIV도 예외는 아닙니다. DIV의 숫자가 늘어나면 자연적으로 페이지 로드가 느려집니다. 굳이 DIV를 쓰지 않아도 되는 곳에서 DIV 사용을 남발하는 것은 좋지 않은 습관입니다. 예를들어 보겠습니다.

<div class="titleBox">
<h2>올블릿 생성마법사</h2>
</div>
<div class="menuWrap">
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
</ul>
</div>

이 소스에서 필요없는 부분은 어디일까요?

네,
바로 이 소스에 있는 모든 DIV 입니다.
굳이 ul을 div로 감싸지 않더라도, 굳이 H2 제목 태그를 div로 감싸지 않더라도, CSS 컨트롤로 얼마든지 예제와 같은 디스플레이를 할 수 있습니다.

<h2>올블릿 생성마법사</h2>
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
</ul>

이렇게 조금더 소스가 가벼워질 수 있다는 말씁니다.
실제소스에서 수 없이 많은 div 가 쓸데없이 사용되고 있습니다.
이를 줄인다면 페이지가 로드되는데 걸리는 시간도 많이 줄어들겠지요 :D
더불어 DIV가 많아짐으로서 발생하는 다양한 버그발생의 가능성도 줄어들겠지요 :)

ID보다는 CLASS를 사용하고, CLASS역시 남발 하지말자
우선 CSS코딩시, id 사용은 자제하고 class 위주로 사용합니다. id는 한 번만 사용이 되므로, 재사용하기가 까다롭습니다. 더불어, 프로그램에서 페이지 컨트롤을 할 때 id 값을 이용하므로, 프로그램 수정을 가할 때, css도 고쳐야하는 번거로움이 있습니다. id는 지양하고 class를 사용하시길 권장합니다. CSS도 상위 엘리먼트에서 지정한 속성을 상속받을 수 있습니다. 상속은 CSS의 막강한 기능 중 하나입니다. 이 상속을 잘 활용해야, 향후 웹사이트 디자인을 관리할 때도 현저하게 시간을 줄여줄 수 있습니다. 상속을 활용하지 못하면, 오히려 웹표준이 아닌 홈페이지보다도 관리가 복잡하고 어려워 질 수 있습니다.

class를 남발한 소스의 경우

HTML
<div class="wrap">
<ul class="menuWrap">
<li class="li">메뉴 1</li>
<li class="li">메뉴 2</li>
<li class="li">메뉴 3</li>
</ul>
<div class="loginBox">
<img src="./img/thum.gif" width="80" height="80" class="thumImg" />
<table class="loginTable">
<tr>
<td>아이디</td>
<td><input type="text" class="inputText" /></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" class="inputText" /></td>
</tr>
</table>
</div>
</div>

CSS
.wrap { }
.wrap .menuWrap { }
.wrap .menuWrap .li { }
.wrap .loginBox { }
.wrap .loginBox .thumImg { }
.wrap .loginBox .loginTable { }
.wrap .loginBox .inputText { }

불필요한 class를 줄인 경우

HTML
<div class="wrap">
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
</ul>
<div>
<img src="./img/thum.gif" width="80" height="80" />
<table>
<tr>
<td>아이디</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" /></td>
</tr>
</table>
</div>
</div>

CSS
.wrap { }
.wrap ul { }
.wrap ul li { }
.wrap div { }
.wrap div img { }
.wrap table { }
.wrap table input { }

class를 남발하지 않고도, 디테일한 부분까지 컨트롤 할 수 있다는 걸 알았습니다. 또한 class명이 풍족하게 남음으로서 작명에 어려움이 없습니다.(이름이 쉽게 고갈되지 않으므로~) 소스가 짧아서 큰 효과는 못 느끼시겠지만, 불필요한 코드를 줄이고, 재사용율을 높임으로서 1000라인의 소스가 500라인이 되고, 이는 페이지 로딩이나 트래픽등에 영향을 줄 수 있다는 걸 상기합시다. 물론 위의 소스중 text input 의 스타일이 글로벌에 설정되어 있거나 하는 실전에서의 특수상황은 있지만, 저런 방식으로 로그인 박스나, 페이징 박스를 제대로 class 하나로 묶어서 만들어 놓으면 다른 프로젝트로 떼서 사용하기도 간단합니다.

작명센스! 의미있는 CLASS명을 짓자
CSS를 이용해서 페이지 디자인을 하다보면 작명의 어려움의 벽에 부딪히게 됩니다. 왜냐하면 class 명은 좋은 이름이 있고 나쁜 이름이 있기 때문입니다.

- 나쁜이름의 예 1
변화가능성이 있는 이름은 짓지 않는 것이 좋습니다.
leftBox 의 경우 박스가, 레이아웃이 바뀌어 오른쪽으로 가야한다면, 박스는 오른쪽에 있는데 클래스 이름은 계속 leftBox로 가야하는 아이러니한 문제가 발생합니다. 이를 수정하는 것은 안해도 될 노동을 하게 되는 것이죠.

div class=greenbox // 녹색박스가 빨간박스로 바뀌면?
ul class=leftBox // 왼쪽에 있는 박스가 오른쪽으로 가야되면?
div class=firstButton // 첫번째 있는 버튼이 세번째로 가야되면?

- 나쁜 이름의 예2
자바스크립트 등 해당 페이지와 join 해서 작업할 언어의 기본 함수등과 겹치는 문자는 쓰지 않는 것이 좋습니다. class라면 관련없 적을 수 있지만, 컴퓨터는 어떤 문제를 발생시킬 지 모르는 기계이므로 일단은 안 쓰는 것을 추천합니다.

div class=string
div class=time
div class=var

- 좋은 이름의 예
해당 페이지의 CSS 레이아웃이나 디자인 요소가 바뀌어도, 만고불변 할 이름들입니다. class 이름 만을 보고도 개발자는 해당 위치의 기능에 대해서 파악할 수 있습니다. 의미있는 class 명을 지어야 한다는 말씀~

div class=postBox
div class=container
div class=loginBox
div class=category

인생은한방 2007/10/16 09:53 댓글주소 수정/삭제 댓글쓰기
저도 이 주제로 글쓰고 있었는데... 너무 와닿네요!

그렇죠... div를 남발하는 코딩은 테이블 코딩과 다를바 없죠...

더구나 div남발 코딩에 길들여지게 되면 웹표준 코딩과는 영 멀어지니...

너무 잘 정리해 주셔서 감사합니다!

덕분에 저는 더 심층적으로 생각해야겠군요 ^^
- 쏭군 2007/10/16 13:03 댓글주소 수정/삭제
  네 맞습니다.
  div가 많아지면, 브라우저별 출력도 다소 상이하게 되고, 버그도 빈번하게 발생하게 됩니다, 웹표준이라 하기에는 너무나 소스가 지저분 해지게 됩니다. 웹표준 대가께서 제 블로그에 친해 댓글을 남겨주셔서 영광입니다^^
qwer999 2007/10/16 12:56 댓글주소 수정/삭제 댓글쓰기
방대한 작업을 여러 사람이 co-work하게 되다보면 디자인을 모듈별로 나눠서 div로 감싸두는게 좀더 유연하게 각종 상황에 대처하기 좋은것도 같습니다.

예시 1 부분에서 제목옆에 edit 란 아이콘을 나중에 삽입해야하는 상황이 생기면 상당부분 css를 다시 수정해야 하겠지만, title box란 div가 있으면 좀더 편하게 상황 대처가 가능할거라 생각합니다.

쓸데 없이 div를 계속 쌓아두는거야 지양해야겠지만 디자인에 따라서 어느정도 모듈화는 해두는게 좋지 않나 싶어요.
- 쏭군 2007/10/16 13:13 댓글주소 수정/삭제
  앗! qwer999님 안녕하세요^_^)/
  
  첫 번째 예제는 모듈화를 염두해두지 않은 예제 소스입니다.
  보시는 바 가장 상단의 이미지대로만 출력할 때의 예를 말씀드린 것이구요, 그것을 모듈화 한다면 이를 감싸 줄 div 가 필요하게 되겠지요.
  
  그래서 모듈화에 대해서는 본 문서 가장 하단에 언급하였습니다.
  
  페이징, 로그인박스 등 자주 쓰는 모듈은 qwer999님 말씀대로,
  큰 div로 묶어서 모듈화해서 떼쓰기 쉽게 만들면 됩니다^^
  
  다만, 그 큰 div 안에 또 필요없는 여러번의 div를 감쌀경우 낭비되는 소스들에 대해서 언급해보았습니다^^
  
  좋은 의견 감사합니다^^

이올린에 북마크하기(0)

이올린에 추천하기(0)

글 작성자 : 소년허클베리핀

class, CSS, div, 상속, 스타일시트, 웹표준, 의미있는네이밍, 작명, 코딩

트랙백 0개 , 댓글 0개가 달렸습니다.

IE6/5.5에서 :hover :focus 속성 앵커태그 이외에 주는 법

웹표준 HTML/CSS 2007/11/21 07:24

CSS의 :hover 이벤트는 마우스가 엘리먼트 위에 올라가있을 때 발생합니다. 이것은 될 수 있으면 자바스크립트의 onmouseover 를 사용하지 않고도, 디스플레이를 컨트롤 할 수 있기 때문에 편리합니다. 최근에 나오는 브라우저는 앵커태그(a) 이 외에 다른 엘리먼트 에서도 :hover 를 사용할 수 있도록 되어있습니다.

하지만 익스플로러 6 이하 브라우저에서는 오직 앵커 태그에서만 :hover가 작동하고, 다른 엘리먼트에서는 작동하지 않는 문제가 있습니다.

지금 제 블로그에 메인 메뉴에 마우스를 올리면 뜨는 서브메뉴도 자바스크립트를 일체 사용하지 않고 CSS로만 만들어 진 것 입니다(올블로그 툴바가 있는 상태에서는 오작동합니다. 원인은 찾지 못했습니다). li:hover 기능을 이용해서 만든 것인데, 모든 최신 브라우저에서 별 문제 없이 작동을 합니다만, IE6 이하에서만 동작을 하지 않습니다.

이럴때는 expression을 사용하면 강력한 CSS컨트롤을 할 수 있습니다. 단점으로는 익스플로러 계열에서만 작동한다는 점인데요. 그래서 오히려 제 블로그 같은 서브메뉴를 구현할때는 장점으로 부각될 수 있습니다. li:hover 가 IE6 이하에서 인식을 못하고 다른 브라우저에서는 정상인식을 하므로 IE6 이하의 브라우저에서만 expression을 적용시키면 되기 때문입니다.

활용소스는 다음과 같습니다.

HTML 코드
<div class="menu">
이 레이어를 컨트롤 하기 위함입니다
<div>

CSS 코드
/* IE6 이외의 브라우저 */
.menu {
padding:50px;
text-align:center;
}
.menu:hover,
.menuOver { /* menuOver는 html에 선언되지 않았지만, 마우스가 올라갔을 때를 디자인합니다. */
background: #ff0000;
}

/* IE6과 그 이하의 브라우저 */
.menu {
behavior: expression(
this.onmouseover = new Function("this.className += ' menuOver';"),
this.onmouseout = new Function("this.className = this.className.replace(' menuOver', '');"),
this.style.behavior = null
);
}

일반적인 최신 브라우저는 위 소스에서 사용된 div:hover 가 작동합니다. 하지만 IE6 이하의 브라우저에서는 작동하지 않기 때문에, expression을 활용해서 강제로 div:hover 와 똑같은 효과가 구현 가능하도록 한 것입니다.
빨간 부분을 자신에게 맞게 고쳐서 쓰시면 됩니다. CSS는 상속중심의 코드이기 때문에, 기본적으로 상속받을 것은 받고, IE6 에서 사용할 expression만 그 아래에 따로 선언을 해주면 됩니다.

이올린에 북마크하기(0)

이올린에 추천하기(0)

글 작성자 : 소년허클베리핀

CSS, Expression, 스타일시트, 웹표준

트랙백 0개 , 댓글 2개가 달렸습니다.

테이블과 CSS로 달력 미니 캘린더 디자인 해보기

웹표준 HTML/CSS 2007/10/16 13:12

CSS 강좌를 쓰는 것은 참으로 오랜만입니다.
개발자분들은 연일 죽어나고 계시지만, 디자인은 비교적 회사일에 여유가 생기면서
이런 강좌를 쓸 시간도 주어지네요~
(특별히 칼님께서 휴일도 없이 해피빈기부와 올블릿 적립금 관련 개발하시느라 고생많으셨어요~ 토닥토닥~)

요번 강좌에서는 곧 마이올블에서 사용될 미니캘린더를 디자인 해볼까합니다.

테이블도 웹표준이 아닌건 아니란걸 아시리라 믿고~

테이블로 레이아웃을 짜지마라고는 많이들 들으셨을거에요~
하지만.. 테이블은 여전히 표형식의 데이터 출력물에는 매력적인 도구랍니다.
달력 역시 테이블방식의 코딩이 좋겠죠^^?

cal.html 파일 작성

<!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=utf-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
<title>미니 캘린더 디자인</title>
</head>
<body>
<div class="cal_wrap">
<div class="cal">
<div class="nowcal">
<div class="prev_month">
<a href="#">
<span>이전달</span>
</a>
</div>
<div class="currunt_month">
July 2007
</div>
<div class="next_month">
<a href="#">
<span>다음달</span>
</a>
</div>
</div>
<table>
<tr class="week">
<td class="sunday">일</td>
<td>월</td>
<td>화</td>
<td>수</td>
<td>목</td>
<td>금</td>
<td>토</td>
</tr>
<tr>
<td class="sunday another_month">30</td>
<td>1</td>
<td>2</td>
<td class="today">3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td class="sunday">7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td class="sunday">14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td class="sunday">21</td>
<td>22</td>
<td>23</td>
<td class="selectDay">24</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td class="sunday">28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="another_month">1</td>
<td class="another_month">2</td>
<td class="another_month">3</td>
</tr>
</table>
</div>
</div>
</body>
</html>

레이어 형식으로 필요시 작게 띄워서 사용할 예정이므로, 테이블 바깥에 div 를 감싸줍니다.
div 의 클래스이름은 cal_wrap입니다. css에서는 얘만 호출해서 하단의 태그를 호출할수 있습니다. 일단 테이블을 구성할 기본 HTML 파일을 작성하였습니다.
저장 방식은 utf-8 이고, 메타태그에서도 utf-8 언어셋을 지정합니다.
연결되는 스타일시트 파일은 style.css 입니다.
일요일은 빨간색으로 표현할 예정입니다. 일요일에 해당하는 셀에는 클래스명 sunday 를 모두 주었고, 오늘 날짜에는 today 클래스를, 그리고 유저가 임의로 선택한 날짜를 표현하기 위해 selectDay 클래스를 주었습니다.
그리고 가장 상위에 요일을 표시하는 부분을 한번에 컨트롤 하기 위해서 tr 에 week 클래스를 주었습니다. thead를 써도 되지만 우선 이번에는 이렇게 사용하겠습니다.

style.css 작성

@charset "utf-8";
* { margin: 0; padding: 0; }

/* 미니 캘린더 디자인 */
.cal_wrap { padding: 10px; color: #000; border: 1px solid #000; width: 127px; }
.cal_wrap .cal { width: 100%; }
.cal_wrap .nowcal { font: normal 11px/20px 돋움,Dotum; }
.cal_wrap .prev_month { float: left; }
.cal_wrap .currunt_month { float: left; font-weight: bold; }
.cal_wrap .next_month { float: right }

.cal_wrap table { clear: both; font: normal 9px/18px tahoma; text-align: center; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; border-collapse: collapse; }
.cal_wrap td { border-right: 1px solid #ccc; border-top: 1px solid #ccc; padding: 0 3px; color: #777; cursor: pointer; }
.cal_wrap td:hover { background-color: #f1f1f1; }
.cal_wrap .week { font: normal 11px/18px 돋움, Dotum; color: #00324B; background-color: #F1F6FA; }
.cal_wrap .sunday { color: #ff0000; }
.cal_wrap .another_month { color: #ccc; background-color: #f5f5f5; }
.cal_wrap .today { background-color: #00324B; color: #fff; }
.cal_wrap .selectDay { background-color: #FF7A00; color: #fff; }

.cal_wrap .prev_month a { background: url(calprev.gif) 0 0 no-repeat; width: 9px; height: 9px; display: block; }
.cal_wrap .next_month a { background: url(calnext.gif) 0 0 no-repeat; width: 9px; height: 9px; display: block; }
.cal_wrap a:hover { background-position: -9px 0; }
.cal_wrap span { display: none; }
.cal_wrap .currunt_month { text-align: center; width: 109px; }

CSS는 뒤에 오는 구절을 최근 디자인으로 갱신합니다.
지난달 혹은 다음달 일요일의 경우 another_month 클래스와 sunday 클래스가 겹칩니다. 지이번달이 아닌 날짜는 전부 회색으로 표현할 예정이므로, sunday 클래스를 another_month 보다 상단에 위치시킵니다. 이렇게 하면 빨간색이 입혀있던 일요일은 다음 클래스에서 바꾸라는 색으로 바꿔버립니다.
이전달, 다음달 넘어가는 버튼은 gif 이미지 하나에 마우스가 올라갔을 때 모양을 함께 붙여놓았습니다. 즉, 실제 9x9 사이즈의 버튼에 사용된 gif 는 18x9 사이즈이고, 마우스가 올라가면 background position 을 가로 -9px 시켜서 작동시켰습니다.

자세한 설명은 링크로 대체합니다.
소스를 분석해 보시고.. 어려운점 있으시면 질문주세요~

실제 동작모습보기

* 퍼가시거나 인용하실 때는 꼭 출처를 남겨주세요~ 쏭군 올림 ^-^

추가의견 :

peris 2007/10/05 11:35 댓글주소 수정/삭제 댓글쓰기
위의 예제의 table 요소에서 thead, tbody, th같은 기본적인 요소들이 빠져있네요.
물론 필수 요소들은 아닙니다만 의미론적인 부분에서 봤을 때 있는 쪽이 더 좋겠죠.
게다가 저런 요소들을 추가함으로써 불필요한 class의 사용을 막을 수 있습니다.

1. 쏭군 2007/10/05 23:22 댓글주소 수정/삭제
맞습니다. 정확한 지적이십니다^^
페리스님의 말씀대로, thead, tbody, th, caption 등을 사용하면 불필요한 클래스의 사용을 막고, 조금더 코드크기를 줄일 수 있습니다~
물론 테이블의 컨트롤도 더 편리해집니다^^

의미론적으로 보았을 때 반드시 이 처럼 코딩해야합니다^^

본 소스에서는 쉬운 이해를 돕기 위해서
thead 등을 사용하지 않고.. 바로 class 명을 지정하여
디자인 하였습니다~

좋은 의견 감사합니다^^

이올린에 북마크하기(0)

이올린에 추천하기(0)

글 작성자 : 소년허클베리핀

CSS, 달력, 디자인, 미니달력, 스타일시트, 웹표준, 캘린더

트랙백 0개 , 댓글 0개가 달렸습니다.

접었다폈다하는 링크롤 소스 배포합니다

웹표준 HTML/CSS 2007/10/16 13:10

needs...

태터 앤 미디어 링크롤 같이 접였다 폈다하는 링크롤

소스를 가지고 싶어하시는 분이 많으셔서, 급조해봤습니다.
일단은 기본 스킨을 배포합니다.
디자인을 자유롭게 고쳐서 사용하시면 될 듯 합니다~

소스 퍼가기

기본 스킨 01 - 기본 닫힘

소스보기

기본 스킨 01 - 기본 열림

소스보기

기본 스킨 02 - 기본 닫힘

소스보기

기본 스킨 02 - 기본 열림

소스보기

블로그에 소스 붙이기

기본적인 링크 디자인은 하지 않았습니다.
(블로그 자체 css에서 디자인을 상속받기 위해서요.. 그래야 잘 어울리겠죠)
따라서 단독 소스로 보면 대부분 깨지고
블로그에 삽입하셔야 디자인이 제대로 뜹니다..

위의 기본 디자인 4 개 중에서 원하는 디자인의 소스를
내 블로그의 원하는 부분에 통째로 붙여넣으시면 됩니다.
웹표준이기 때문에, 크로스브라우징이 되는 소스입니다.

웹표준을 준수한 스킨에 붙여넣기 하면
모든 브라우저에서 깔끔하게 출력되어 나옵니다.

만약 브라우저 별로 디자인이 상이하거나 깨지면
블로그의 css 소스 최상단에 * { margin: 0; padding: 0; } 선택자를 넣어주세요.
(기존 디자인이 깨질 위험이 있습니다)

태터나 티스토리 유저분들게서는 사이드바에 삽입시
치환자안에 포함해 주셔야 합니다~

링크롤 디자인 수정하기

디자인은 자유롭게 수정하실 수 있습니다.
기본적인 수정가이드를 안내해드리겠습니다.

링크롤 전체를 묶고 있는 div 박스입니다.
width을 조정하여, 링크롤의 가로크기를 설정할 수 있습니다.

li 가 링크 한 묶음 입니다.

<ul id="linkroll_list01"

ul 이 링크 목록 한 묶음입니다. id 값을 h2 의 자바스크립트에서 컨트롤 하면 열었다 닫았다를 할 수 있습니다.

ul의 display를 none 하면 링크를 접고, block 하면 링크를 엽니다.
기본 옵션을 이것으로 설정할 수 있습니다.

background: url(http://junjin21.golbin.net/box/bl.gif) 0 0 no-repeat;

background 부분을 수정해서 블릿 아이콘을 입맛대로 고칠 수 있습니다.

더불어 css 디자인으로 자유자재로 디자인을 수정할 수 있습니다.
블로그에 어울리는 링크롤을 달아보세요^^

하다가 잘 안되시거나 궁금한 점 이 있으시면,

제 블로그에 오셔서 언제라도 질문해주세요~

이올린에 북마크하기(0)

이올린에 추천하기(0)

글 작성자 : 소년허클베리핀

CSS, linkroll, 링크롤, 북마크, 웹표준

트랙백 1개 , 댓글 0개가 달렸습니다.

실무에서 자주 마주치는 익스플로러 6 관련 버그

웹표준 HTML/CSS 2007/07/28 16:12

실무에서 굉장히 자주 마주치는 익스플로러 6 만의 CSS 버그가 있습니다.

쏭군은 익스플로러 7과, 파이어폭스2를 기반으로 디자인 작업을 합니다.
(사파리나 오페라는 아주 가끔 열어보고요.. 그래서 사파리에서 약간의 문제가 있긴 하지만..)
그래도 익스7, 파폭2에서 제작하면 익스 6이나 다른 브라우저에서도 그럭저럭 잘 뜨더군요..

그런데 익스 6은 역시 요주의 녀석이긴 한게...
레이아웃이라던가 객체가 벌어지는 현상이 안 생길래야 안생길수가 없어서..

실무에서 정말 자주 마주치는 익스플로러 IE용 버그 해결 방법을 몇 가지 쓰고자합니다

float 를 쓴 객체에 margin의 left 값이나 right 값이 들어가면 마진값이 두배로 늘어납니다. 그래서 파폭이나 익스7에서 멀쩡한 레이아웃이 익스 6에서는 마진값이 2배로 불어나서 레이아웃이 깨지거나 벌어집니다. 그래서 반드시 알아야하는 버그해결 법입니다.

float 를 쓴 객체에 margin 가로값을 주고나서는 꼭 display: inline 값을 주자는 것!

거의 모든 IE관련 버그는 홀리핵이라는 녀석을 많이 사용하는데, 사용법은 간단합니다

* html { height: 1px; }

그리고 css 상단에는 모든 * 필터를 이용해서 마진과 패딩을 0으로 셋팅하고 CSS 코딩을 시작한다면, 거의 모든 브라우저의 마진 및 패딩 문제를 해결한 상태에서 코딩을 시작할 수 있습니다. 물론 100% 해결되는 건 아니지만 80% 이상 원하는 시안을 얻는데 도움이 됩니다.

* { margin: 0; padding: 0; }

가장 널리쓰고, 유용한 핵이라고 할 수 있겠습니다~

위에 녀석들도 필수적으로 숙지하고 이용해야 하는 자주 등장하는 녀석들입니다만, 역시 IE의 패딩버그를 따라갈 수 없지요.. 덜덜 ㅠㅠ 이 패딩버그는 상당히 많이 발생하고, 레이아웃도 깨먹고, 고치는데 많이 헷갈리기도 하는 기특한 녀석이라서~ 정말 겁납니다~
위에 사용한 별표 * html 을 이용해서 해결하는 방법이 있습니다~

CSS 표준의 width나 height 값은 border 값, padding 값, margin 값을 모두 제외한 순수한 알맹이 값을 의미하는 반면에 IE는 height나 width에 padding과 border값을 포함합니다. 따라서 상당히 레이아웃 차이가 많이 나는 경우가 있습니다. 그런 경우에는 아래의 방식대로 해결하시면 됩니다.

#content { width: 200px; padding-left: 10px; }

이렇게 하면 일반브라우저에서는 총 너비는 210px 입니다. 그런데 이것을 IE에서는 그대로 200을 유지해버리기 때문에, 실제 크기 210px 을 줘야합니다.

#content { width: 200px; padding-left: 10px; }
* html #content { width: 210px; }
/* 핵으로 210px 을 줍니다, 패딩은 위에서 줘서 패스~ */

맥용 IE에서는 CSS를 정상적으로 읽는데 핵 때문에 다시 깨집니다. 그래서 다시 맥용 IE를 위해서 아래와 같이 코딩해주면 완성됩니다.

#content { width: 200px; padding-left: 10px; }
* html #content { width: 210px; w\idth: 200px; }
/* \ 를 이용해 200px로 돌려줍니다~ */

이올린에 북마크하기(0)

이올린에 추천하기(0)

글 작성자 : 소년허클베리핀

CSS, CSS핵, IE 6, IE핵, 스타일시트, 웹표준, 익스플로러6

트랙백 0개 , 댓글 4개가 달렸습니다.

웹표준 코딩을 위한 파이어폭스의 확장기능

웹표준 HTML/CSS 2007/07/27 15:17

웹표준 코딩을 위한 파이어폭스의 다양한 확장기능을 이용해봅시다!

우선 파이어폭스를 다운로드 받습니다.

파이어폭스는 웹디자이너나 코더, 개발자를 위한 실로 다양한 기능을 제공합니다.
파이어폭스를 설치하셨다면 모질라사이트의 Addon 다운로드 페이지로 이동합니다.

파이어버그를 다운로드 받습니다

웹디벨롭퍼를 다운로드 합니다. 위의 두 프로그램을 다운로드 하실때는 파이어폭스에서 하면 편리하게 자동으로 애드온이 설치됩니다. 우선 파이어버그와 웹디벨로퍼를 설치하셨다면 파이어폭스를 실행하시고, 나름 잘 만들었다고 생각하시는 사이트에 접속을 해봅니다... 아니~ 꼭 잘 만든 사이트가 아니어도 되요~

저는 파이어폭스로 올블로그에 접속을 해보았습니다~

파이어폭스 우측하단에 있는 녹색 버튼을 클릭하면 파이어버그 창이 뜹니다. 이 기능이 정말 막강한데요, 제가 실무에서 자주 쓰는 유용한 기능을 중심으로 설명을 드릴게요^^ 나머지 기능을 알아가는 것은 여러분의 몫~ ^_~

하 단 소스창에서 하위 레벨 태그로 접근을 하면, 웹사이트의 레이아웃을 분석해 볼 수 있습니다. div, table, tr, td 는 물론이고 이미지맵, 링크 등 세밀한 레이아웃을 알 수 있습니다. 화면은 올블로그의 실시간 인기글 내 반복되는 박스 div 에 마우스를 올렸을때 해당 소스가 나타내주는 레이아웃을 보여주는 화면입니다. 우측에는 사용된 CSS 코드까지 자동으로 매칭이 됩니다. 정말 환상적이죠? +_+)=b 굿!

이와는 반대로 홈페이지의 원하는 부분을 찍어서 해당부분의 소스코드를 바로 찾아주는 기능이 있는데, Inspect 를 이용하시면 됩니다. Inspect 버튼을 눌러서 활성화 시킨 상태에서 홈페이지에 마우스 포인터를 가져가보면, 레이어, 테이블, 링크, 이미지, 셀 등의 단위로 소스코드를 바로 찾아줍니다. 역시 우측하단에 CSS 스타일 시트까지 같이 찾아주는 모습입니다~^^

인스펙트로 레이아웃 수정을 원하는 부분을 선택후, CSS 스타일 시트를 껐다 켰다 하는 모습입니다. 해당 스타일을 적용했을때 안 했을때 모습을 볼 수 있으며, 또한 값의 수정도 가능합니다. 정말 편리한 기능입니다~

Layout 탭도 요긴한 기능이니 활용해보세요~ 패딩, 보더, 마진값등을 임의로 입력해보고 페이지의 레이아웃이 어떻게 변경되는지 한눈에 알아볼 수 있는 기능입니다~

자~ 그럼 여기서~ 웹표준코딩의 하이라이트!!
HTML 데이터와 / CSS 디자인 파일의 분리!!!

정말 완벽한 웹2.0 시대의 시맨틱한 웹표준 코딩을 자랑하고 있는 CSS 젠 가든의 홈페이지입니다.
http://www.csszengarden.com

아까 설치했던 파이어폭스의 웹디벨롭퍼의 기능을 이용해서 CSS 파일을 꺼 보겠습니다

놀라지 마십시오! 정말 완벽한 구조의 문서원문이 출력됩니다.

아까

접속한 CSS 젠 가든의 CSS를 적용시키지 않은 모습입니다.
웹2.0 시대에서 ajax, ucc, 블로그 등 많은 부분의 이슈가 있지만, 그래도 역시 가장기본적이고 중요한 것은 웹표준 코딩입니다.

웹표준 코딩의 기본은 HTML 과 CSS 의 분리입니다

구조화가 잘 된 HTML 파일하나면 있으면 CSS 파일만 여러개를 만들어가면서 손쉽게 디자인 리뉴얼을 할 수 있는 최대장점이 있습니다.
아 직까지 대부분의 한국 사이트는 웹표준 규격을 준수하지 못하고 있습니다. 지금 수 많은 디자이너가 활동하고 있지만 웹표준을 공부하지 않는다면 정말 혼쭐이 나거나, 디자이너 숫자가 줄어들거나, 웹표준을 하고 못하고에 따라서 신분상의 위치마저 달라질지도 모릅니다. 너무 겁을 줬나요.. ㅎㅎ
여튼 파이어폭스의 이 부가기능을 잘 활용해가면서 작업하시면 많은 도움이 되리라 생각됩니다.