parent 좀 select 하게 해 달라
<li><a href='someLink'>Click Me</a></li> 같은 상황에서..
Click Me에 OnMouse(온마우스) 혹은 Click(클릭) 일때 li가 바뀔 수 있도록
처럼..(여기서 a:hover^ 는 Parent를 지칭하는 예약어)
CSS 초기화 기능
사이트의 규모가 좀 커지다보면, 여러개의 CSS파일을 만들게 된다.
그러다보면 어떤 css 파일에서 선언한것들을 취소시키고 싶을때가 있다.
쉽게 말을 하면, a.css 파일에서
라고 선언을 했다. 그런데 지금 작업하는 파일에서는
ul, li 를 기존 margin과 padding을 줘야 하는 상황이 왔을경우 초기화 하는 방법이 없다.
중첩 li 가 나타나도 모두 여백없이 딱 붙어있게 되어서, 중첩의 깊이(depth)를 표현할 방법이 없어진다.
이렇게 되면 위의 구문에서(a.css) ul, ol, li 항목을 삭제하고, 기존의 영향을 받던 dom을 전부 찾아서 따로 정의를 해줘야 하는 끔찍한 상황이 생긴다.
이럴때 초기화를 시키거나, 다른 css로 초기화시키는 기능이 있다면 좋을것이다.
border dotted, dashed 같은거에 옵션좀 추가해주라
디쟈인을 받아보면 dotted도 아니고 dashed도 아닌경우가 자주 있다. 이렇게 되면 결국 이미지를 따서 background로 처리하거나 image로 처리하게 된다.
막상 이거 할려면 무지 귀찮아진다.
border의 칠해진 부분 size지정과 border간의 간격에 대한 지정을 할 수 있으면 좋을것 같다
예를들어, 한칸의 border의 size가 width 10px height 3px, 칸사이의 간격이 10px이고, 색깔이 검정색이라고 한다면(아래 이미지 참고)
이런 느낌..?
Box Round(라운드)도 CSS에서 할 수 있게 해줘!!
background 혹은 border로 테두리를 둥그렇게 처리된 디쟈인들을 종종 작업하게 될때가 있다.
이것도 위의 border와 비슷하게..
둥그스름한 정도, 색깔, background인지 border인지 설정할 수 있게 해 주면 좋겠다..
배경색을 검정색으로 반지름 5px짜리 라운드를 만들고 싶을경우(아래 이미지 참고)
정작 CSS에 바라는것을 적을려니 몇가지밖에 안떠오르지만, 실제로 작업하다보면 답답할때가 한두번이 아니다.
<li><a href='someLink'>Click Me</a></li> 같은 상황에서..
Click Me에 OnMouse(온마우스) 혹은 Click(클릭) 일때 li가 바뀔 수 있도록
a:hover^ { background-color:red }
처럼..(여기서 a:hover^ 는 Parent를 지칭하는 예약어)
CSS 초기화 기능
사이트의 규모가 좀 커지다보면, 여러개의 CSS파일을 만들게 된다.
그러다보면 어떤 css 파일에서 선언한것들을 취소시키고 싶을때가 있다.
쉽게 말을 하면, a.css 파일에서
body, ul, ol, li, p, fieldset,...... { padding:0;margin:0; }
라고 선언을 했다. 그런데 지금 작업하는 파일에서는
ul, li 를 기존 margin과 padding을 줘야 하는 상황이 왔을경우 초기화 하는 방법이 없다.
중첩 li 가 나타나도 모두 여백없이 딱 붙어있게 되어서, 중첩의 깊이(depth)를 표현할 방법이 없어진다.
이렇게 되면 위의 구문에서(a.css) ul, ol, li 항목을 삭제하고, 기존의 영향을 받던 dom을 전부 찾아서 따로 정의를 해줘야 하는 끔찍한 상황이 생긴다.
이럴때 초기화를 시키거나, 다른 css로 초기화시키는 기능이 있다면 좋을것이다.
.this_ul, .this_ol, .this_li { default; }
.this_p { reset:#some_p }
.this_p { reset:#some_p }
border dotted, dashed 같은거에 옵션좀 추가해주라
디쟈인을 받아보면 dotted도 아니고 dashed도 아닌경우가 자주 있다. 이렇게 되면 결국 이미지를 따서 background로 처리하거나 image로 처리하게 된다.
막상 이거 할려면 무지 귀찮아진다.
border의 칠해진 부분 size지정과 border간의 간격에 대한 지정을 할 수 있으면 좋을것 같다
예를들어, 한칸의 border의 size가 width 10px height 3px, 칸사이의 간격이 10px이고, 색깔이 검정색이라고 한다면(아래 이미지 참고)
.border {
.border_top {
border-width:10px;
border-height:3px;
border-margin:10px;
border-color:black;
}border-height:3px;
border-margin:10px;
border-color:black;
.border_top {
border-top-width:10px;
border-top-height:3px;
border-top-margin:10px;
border-top-color:black;
}border-top-height:3px;
border-top-margin:10px;
border-top-color:black;
이런 느낌..?
Box Round(라운드)도 CSS에서 할 수 있게 해줘!!
background 혹은 border로 테두리를 둥그렇게 처리된 디쟈인들을 종종 작업하게 될때가 있다.
이것도 위의 border와 비슷하게..
둥그스름한 정도, 색깔, background인지 border인지 설정할 수 있게 해 주면 좋겠다..
배경색을 검정색으로 반지름 5px짜리 라운드를 만들고 싶을경우(아래 이미지 참고)
.round_box {
round-radius:5px;
round-style:background;
round-color:black;
}
이런식으로 말이다.round-radius:5px;
round-style:background;
round-color:black;
}
정작 CSS에 바라는것을 적을려니 몇가지밖에 안떠오르지만, 실제로 작업하다보면 답답할때가 한두번이 아니다.
'웹[기술|표준|접근] > 생각' 카테고리의 다른 글
| HTML5 초안 릴리즈, IE8 Acid2 성공~ (2) | 2008/01/31 |
|---|---|
| IE 접근금지..? (2) | 2007/12/21 |
| CSS 에 바라는것들 (7) | 2007/10/17 |
| DOM 스크립트 - 다이내믹한 웹 표준 (0) | 2007/07/24 |
| DAUM 메인페이지 CSS 날라가다~ (2) | 2007/07/11 |
| 서울시의 장기전세주택 '시프트' 홈페이지..인덱스화면;; (0) | 2007/07/11 |
TAG CSS
댓글을 달아 주세요
1번은 <a>태그의 display속성을 inline-block으로 바꿔서 사용하는 방법을 쓰거나 아예 hover속성을 li에 걸 수도 있겠구요, 2번은 현재로선 원래 초기 속성을 그대로 재정의해서 사용하는 방법이 있겠죠. 장단은 있겠지만 현존 브라우저 기본 css가 전부 다르고 나중에도 또 변화될 거를 생각한다면 현재가 더 낫다는 생각이 듭니다.
2007/10/18 10:56 [ ADDR : EDIT/ DEL : REPLY ]3번은 있었으면 좋긴 하겠지만, 그건 디자이너의 재량이니 디자이너를 설득하든지 그냥 이미지로 배경을 까는 것이 더 맘이 편하고, 4번의 경우는 css3에서 도입이 된다고 들었습니다.
어쨌든 저도 css를 많이 만지면서 아~ 그랬었지~ 했던게 많아서 반갑군요. ㅎㅎ
1번, a의 display 속성을 변경하는게 바람직한 방법인것 같네요.ㅎㅎ
2007/10/18 13:51 [ ADDR : EDIT/ DEL ]하지만 제가 예시한 경우가 아니더라고 parent node와 뭔가를 하게 되는일은 종종 있습니다.
CSS로 끝낼 수 있는것인데, 단지 parent selector가 없어서 번거롭게 js까지 가는게 아쉬워서 적은것이죠. ㅎㅎ
2번, ul같은경우 어떻게 하면 초기화할 수 있나요..?
margin, padding, list-style을 주면 되는 것으로 알고 있습니다. 원래 초기값을 잘 모르는 관계로 정확한 값은 모르겠지만요.
2007/10/18 21:42 [ ADDR : EDIT/ DEL : REPLY ]ul { margin:0;padding:0; }
2007/10/22 10:57 [ ADDR : EDIT/ DEL ]라고 정의가 되어 있는데, 아래 ul을 그대로 표현하고 싶으면 어떻게 하면 되나요..?
<ul>
<li>1-1</li>
<li>1-2
<ul>
<li>2-1</li>
<li>2-2</li>
</ul>
</li>
</ul>
(혹시 방법이 있나 싶어서 찾아봤는데 없더라구요)
일반적인 초기화는... 초기화파일만 따로 관리해서 필요할때 다시 import 하는 방법으로...
2007/12/17 12:58 [ ADDR : EDIT/ DEL : REPLY ]특정 객체의 초기화는 서버단 동적 파일 처리로... 했는데,
포스트 보고 곰곰히 생각해보니
만약 CSS 에서 이것이 가능하게 한다는 것은
코드 블럭이나 코드 스페이스 개념이 들어간다는 뜻이되겠죠? ^^;
그래서 php등의 동적처리보다는...
초기화를 위한 class 를 따로 관리하는 것이
현재로선 정적/동적 처리 양자에서 어느정도 이득을 볼 수 있는 방법이라는 생각이드네요.
CSS 는 정의하는 파일이지 로직이 아니니까요.
꾸벅~!
"그래서 php등의 동적처리보다는..." 말씀은 php에서 판단해서 class(CSS) 를 관리하는걸 말씀하시는거죠..? (잘 이해를 못해서 ㅎㅎ
2007/12/18 19:03 [ ADDR : EDIT/ DEL ]현 시점에서의 방법은 말씀하신대로 초기화 클래스를 따로 두는 방법밖에 없지요..
역시 너무 구려요 ㅠ,.ㅠ
라운드 코너는 이미 모질라로 되고 있는 부분이네요
2010/04/09 19:53 [ ADDR : EDIT/ DEL : REPLY ]여우나 동물원으로 보시면 되구요 단지 탐험자에서만 안되네요