오늘은 조금 늦게 들어왔는데 자게에 불이 났네요. css > 정보
오늘은 조금 늦게 들어왔는데 자게에 불이 났네요. css >
본문
자게만 불금입니다. ㅎㅎ
냑에서 댓글 알림 기능이 아쉬웠는데 꼭 필요한 기능이 생겼네요.
저는 아직 댓글이 없어서 못 봤는데 댓글 좀...
cshop2님이 css >를 간단히 설명해 주셨는데 제 굳은 머리로는 이해가 잘... ㅎ
초등학생 한테 설명하단 생각하시고 쉽게 부탁드려요.
블로거들도 이걸 제대로 설명한 사람이 없더라구요.
어떻게 사용해라만 있고...
css 구조가 Tree라고 했을 때 첫번째 노드, 마지막 노드, 단 노드 이 셋을 선택한다는 것이 이벤트가 발생한다는 것인지 oop처럼 속성을 지정한 지정한 노드를 참조 시키는 건지 상상력의 한계가 왔습니다.
사용법은 알지만 정확히 의미를 모르니 응용을 못하게 되서 자꾸 남에꺼 배껴오게 되서 답답합니다. ㅠㅠ
추천
0
0
댓글 7개
마크업
<ul>
<li>1
<ul>
<li>2</li>
</ul>
</li>
</ul>
스타일 #1
ul li {font-weight:bold}
결과 1 두껍게 2 두껍게
스타일 #2
ul > li {font-weight:bold}
결과 1 두껍게 2 보통
참고로 자식선택자는 익스 하위버전 6 이었나 7까지는 지원하지 않습니다. 그래서 국내에서는 ie6 버리지 않은 이상은 자주 쓰이지 않습니다.
맞나 모르겠네요. 저는 아예 사용을 안 하는 선택자라... ㄷㄷㄷ
<ul>
<li>1
<ul>
<li>2</li>
</ul>
</li>
</ul>
스타일 #1
ul li {font-weight:bold}
결과 1 두껍게 2 두껍게
스타일 #2
ul > li {font-weight:bold}
결과 1 두껍게 2 보통
참고로 자식선택자는 익스 하위버전 6 이었나 7까지는 지원하지 않습니다. 그래서 국내에서는 ie6 버리지 않은 이상은 자주 쓰이지 않습니다.
맞나 모르겠네요. 저는 아예 사용을 안 하는 선택자라... ㄷㄷㄷ
네. 맞습니다.
예제를 보시면 그냥 눈으로 보고 눈이 이해하는 건데.....
사실 설명할 내용이 없는 기본 css 입니다. 복잡할게 하나도 없는...
이해를 하고 못하고 그런 내용이 아닌데......
혹시라도 이해가 안되시면요, 그냥 뚫어지라고 쳐다만 보고 계세요. (리자님한테 배운 방법)
그럼 이해가 됩니다.
예제를 보시면 그냥 눈으로 보고 눈이 이해하는 건데.....
사실 설명할 내용이 없는 기본 css 입니다. 복잡할게 하나도 없는...
이해를 하고 못하고 그런 내용이 아닌데......
혹시라도 이해가 안되시면요, 그냥 뚫어지라고 쳐다만 보고 계세요. (리자님한테 배운 방법)
그럼 이해가 됩니다.
예제를 보니 조금 이해가 됩니다.
ul li가 저는 순차적으로 첫번째 등장하는 ul의 li들인 줄 알았는데 그 하위에 반복되는 ul li도 영향을 받아서 첫번째 ul에 id를 줬었거든요.
ul의 li를 모두 지정 할 대는 ul li로 하고 특정 노드를 콕 찍어서 할 때는 ul > li 이런식으로 한다라고 이해하면 되나요? ㅎㅎ
ul li가 저는 순차적으로 첫번째 등장하는 ul의 li들인 줄 알았는데 그 하위에 반복되는 ul li도 영향을 받아서 첫번째 ul에 id를 줬었거든요.
ul의 li를 모두 지정 할 대는 ul li로 하고 특정 노드를 콕 찍어서 할 때는 ul > li 이런식으로 한다라고 이해하면 되나요? ㅎㅎ
아뇨. "특정노드"는 nth-child 가 있구요, 이거는 그냥 아까 말씀드린데로 나랑 (내가 부모라고 치면) 직접적으로 연결된 자식 (중간에 타인이 안낀 자식) 만 선택해주는 겁니다.
사실 > 는 메뉴짤때 말고는 거의 쓸일이 없습니다. 안써도 되는거에요. (별로 안 중요한)
실제 css 작업시 오히려 nth-child 를 훨씬더 많이 사용하게 됩니다.
사실 > 는 메뉴짤때 말고는 거의 쓸일이 없습니다. 안써도 되는거에요. (별로 안 중요한)
실제 css 작업시 오히려 nth-child 를 훨씬더 많이 사용하게 됩니다.
nth-child 이거 살펴 봤는데요, 정말 쓸 일이 많을 거 같아요.
지금까지는 id나 class 지정해서 쓰다보니 style이 정말 지저분했는데 예상치 못한 중요한 걸 알게 됐네요.
홀수짝수 지정해서 선택도 되고 방법이 여러가지네요. ㅎ
이래서 대화가 중요한가봐요.
>를 안 궁금해 했으면 노드 선택자가 있다는 건 아마 죽을 때까지 몰랐을 거 같아요. ㅎ
오늘부터 써먹어야겠네요. 어제 작업한 것도 다시 정리하고... ^^
지금까지는 id나 class 지정해서 쓰다보니 style이 정말 지저분했는데 예상치 못한 중요한 걸 알게 됐네요.
홀수짝수 지정해서 선택도 되고 방법이 여러가지네요. ㅎ
이래서 대화가 중요한가봐요.
>를 안 궁금해 했으면 노드 선택자가 있다는 건 아마 죽을 때까지 몰랐을 거 같아요. ㅎ
오늘부터 써먹어야겠네요. 어제 작업한 것도 다시 정리하고... ^^
하위 브라우저 사용자까지 대응하면 nth-child 당장은 못 쓰고 대신, for 문 돌리는 경우에는 백엔드에서 자동으로 클래스명을 붙여줘서 쓸 수도 있죠. 간단한 column 계획만 세우면 어려운 일도 아닙니다. ^^
그런가요? ㅎㅎ 저 벌써 작업 들어갔는데... ㅎㅎ
제 홈피에 접속 할 때 8이하 버전 쓰는 사람은 강제로 업그레이드 페이지로 이동시켜 버릴려구요. ^^
css는 플랫폼이 브라우저라 디자인 하는 사람들은 정말 힘들겠어요.
여러가지로 도움말 감사합니다.
제 홈피에 접속 할 때 8이하 버전 쓰는 사람은 강제로 업그레이드 페이지로 이동시켜 버릴려구요. ^^
css는 플랫폼이 브라우저라 디자인 하는 사람들은 정말 힘들겠어요.
여러가지로 도움말 감사합니다.
