css 작성법을 바꿨는데. 이게 옳은 방법인지 모르겠네요 정보
css 작성법을 바꿨는데. 이게 옳은 방법인지 모르겠네요
본문
<style>
#page1{}
#page1 .class1 .class2 .class3{요소선언}
</style>
<div id="page1">
<div class="class_1">
<div class="class_2">
<div class="class_3">
</div>
</div>
</div>
</div>
이런식으로 class_3 의 스타일을 선언할때
기존에는
#page .class_3{요소선언}
이런 방식으로 선언을했는데
계층구도를 명확하게 하기위해
#page1 .class1 .class2 .class3{요소선언}
이런식으로 작성을하기 시작했는데
이방법으로 해도 문제될게 없겠죠?
궁금해서 여쭤봅니다 ㅎㅎ
추천
0
0
댓글 15개
가능하면 2~3 단계 안에서 끝내려 하고, 거기서 더 가능하다면 1단계에서 끝내려고 노력 중인데요.
단계가 많아져도 사실 성능에 그렇게 무리를 준다 그런건 없지만 유지보수할 때 처음 작성할 때 품이 더 많이 들더라구요.
단계가 많아져도 사실 성능에 그렇게 무리를 준다 그런건 없지만 유지보수할 때 처음 작성할 때 품이 더 많이 들더라구요.
아하 문제는 없는거군요 ㅎㅎ 손가락노동은 더많이 들어가긴 하는데 저는 이게 더 명확해 보이는것 같기도 하고 아닌것 같기도 하고 그렇네요 ㅎㅎ
저는 가능하면 계층 단계를 모두 작성 해 줍니다.
나중에 헷갈려서요. ㅎㅎㅎ
나중에 헷갈려서요. ㅎㅎㅎ
정답은 없군요 ㅎㅎ 그럼 이방법대로 계속사용해야겠네요 ㅎㅎ
<div id="page1">
<div class="class_1">
<div class="class_2">
<div class="class_3">
<img class="class_4">
</div>
</div>
</div>
</div>
#page1 .class1 .class2 .class3 .class4 {border:1px;}
...
..
.
.class_4 {border:100px;}
했는데 100px이 안먹을 때 당황 할때가 종종 있습니다.
<div class="class_1">
<div class="class_2">
<div class="class_3">
<img class="class_4">
</div>
</div>
</div>
</div>
#page1 .class1 .class2 .class3 .class4 {border:1px;}
...
..
.
.class_4 {border:100px;}
했는데 100px이 안먹을 때 당황 할때가 종종 있습니다.
!important 써도 안먹히나요?
ID가 class보다 우선순위입니다.
ID > class > tag
요 우선순위라 악먹힐 경우가 있을거에요
ID > class > tag
요 우선순위라 악먹힐 경우가 있을거에요
사실유무확인은 못했지만(체감할수 없다보니...)
단계를 다 적으면 css처리속도 면에서 안좋다는 이야기를 예전에 어느 책에선가 얼핏 본 기억이있어서 ~_~
지극히 제 개인적인 방법입니다만... 저는 아래와 같은 방법으로 계층을 특정 단어조합으로 계층구분을 합니다.
특정단어를 사용해서 컨텐츠를 싸고 있는 껍질의 단계를 구분하는거지요...
wrap(특정페이지구분을 위해 id 조합) > _area > _box > 개별네이밍
의 순서에서 대부분 구조를 잡고 있습니다.
body에 이어서 wrap처리 하는건 나중 유지보수를 위해 그냥 습관적으로 붙이다보니 사실상 의미없는 빈태그가 되거나
디자인에 따라서 아에 wrap을 빼는경우도 많아서, 보통은 _area > _box > 개별네이밍의 3단계면 왠만한 구조코딩이 가능하더라구요..
디자인상 배경처리때문에 부득이 컨텐츠에 배경용으로 껍질을 씌우는 일이 자주 있다보니..
개인적으로 쓰는방법입니다만...
그냥 내 손에 편한 방법이 제일 좋은 방법 같습니다.
예)
스타일//////////////////////
.sidenavi_area {}
.sidenavi_box {}
#sub11 .sidenavi_box {}
.sidenavi_lists {}
sub11.php파일/////////////////
<body>
<div class="wrap" id="sub11">
<div class="sidenavi_area">
<div class="sidenavi_box">
<ul class="sidenavi_lists"></ul>
</div>
</div>
</div>
</body>
단계를 다 적으면 css처리속도 면에서 안좋다는 이야기를 예전에 어느 책에선가 얼핏 본 기억이있어서 ~_~
지극히 제 개인적인 방법입니다만... 저는 아래와 같은 방법으로 계층을 특정 단어조합으로 계층구분을 합니다.
특정단어를 사용해서 컨텐츠를 싸고 있는 껍질의 단계를 구분하는거지요...
wrap(특정페이지구분을 위해 id 조합) > _area > _box > 개별네이밍
의 순서에서 대부분 구조를 잡고 있습니다.
body에 이어서 wrap처리 하는건 나중 유지보수를 위해 그냥 습관적으로 붙이다보니 사실상 의미없는 빈태그가 되거나
디자인에 따라서 아에 wrap을 빼는경우도 많아서, 보통은 _area > _box > 개별네이밍의 3단계면 왠만한 구조코딩이 가능하더라구요..
디자인상 배경처리때문에 부득이 컨텐츠에 배경용으로 껍질을 씌우는 일이 자주 있다보니..
개인적으로 쓰는방법입니다만...
그냥 내 손에 편한 방법이 제일 좋은 방법 같습니다.
예)
스타일//////////////////////
.sidenavi_area {}
.sidenavi_box {}
#sub11 .sidenavi_box {}
.sidenavi_lists {}
sub11.php파일/////////////////
<body>
<div class="wrap" id="sub11">
<div class="sidenavi_area">
<div class="sidenavi_box">
<ul class="sidenavi_lists"></ul>
</div>
</div>
</div>
</body>
저는 묘듈마다 겹치는경우가있기때문에 각묘듈은 id로 감싸고 순차적으로 코딩하고있어요 나중에묘듈 분리할때 스타일 정리하기도 편하더라구요 ㅎ
#page1 {
font-color: blue;
.class1{
margin-top: 2px;
.class2{
.class3{
class4 {
border:1px;
}
}
}
}
}
font-color: blue;
.class1{
margin-top: 2px;
.class2{
.class3{
class4 {
border:1px;
}
}
}
}
}
속도문제도 있을수 있지만
왠만하면 저렇게 정확히 써주는게
나중에 불상사를 막을수 있어 ㅋㅋ
왠만하면 저렇게 정확히 써주는게
나중에 불상사를 막을수 있어 ㅋㅋ
앗 너구리횽님이시네요 ㅎㅎ 음 횽님이 그렇다면 그렇게 해야겠네요 ㅎㅎ
간단한건 상관없는데
복잡해지면 저거때문에 골머리 썩는다 ㅋㅋ
복잡해지면 저거때문에 골머리 썩는다 ㅋㅋ
ㅋ 클래스 겹치는거때문에 그런거죠?
<style>
#page1{}
#page1 div div div {요소선언}
</style>
<div id="page1">
<div><div><div></div></div></div>
</div>
깔끔한게 쵝오
#page1{}
#page1 div div div {요소선언}
</style>
<div id="page1">
<div><div><div></div></div></div>
</div>
깔끔한게 쵝오
