CSS 에 바라는것들

parent 좀 select 하게 해 달라
<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 }

border dotted, dashed 같은거에 옵션좀 추가해주라
디쟈인을 받아보면 dotted도 아니고 dashed도 아닌경우가 자주 있다. 이렇게 되면 결국 이미지를 따서 background로 처리하거나 image로 처리하게 된다.
막상 이거 할려면 무지 귀찮아진다.

border의 칠해진 부분 size지정과 border간의 간격에 대한 지정을 할 수 있으면 좋을것 같다
예를들어, 한칸의 border의 size가 width 10px height 3px, 칸사이의 간격이 10px이고, 색깔이 검정색이라고 한다면(아래 이미지 참고)

 

.border {

border-width:10px;
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;

}

이런 느낌..?

Box Round(라운드)도 CSS에서 할 수 있게 해줘!!
background 혹은 border로 테두리를 둥그렇게 처리된 디쟈인들을 종종 작업하게 될때가 있다.
이것도 위의 border와 비슷하게..
둥그스름한 정도, 색깔, background인지 border인지 설정할 수 있게 해 주면 좋겠다..

배경색을 검정색으로 반지름 5px짜리 라운드를 만들고 싶을경우(아래 이미지 참고)

.round_box {
round-radius:5px;
round-style:background;
round-color:black;
}

이런식으로 말이다.

정작 CSS에 바라는것을 적을려니 몇가지밖에 안떠오르지만, 실제로 작업하다보면 답답할때가 한두번이 아니다.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중