자식, 자손 선택자 질문

자식, 자손 선택자 질문

작성일 2024.05.20댓글 2건
    게시물 수정 , 삭제는 로그인 필요

<article id="slider">
                <div class="link"></div>
            </article>



대충 이런 코드일 때
css에서
#slider > .link 로 많이 쓰나요?
아니면
#slider .link 로 많이 쓰나요??

학원에서 자손 선택자는 컴퓨터가 조금 이해하는데 시간이 걸려서 잘 안 쓴다고 하셨는데
그럼 전자를 많이 쓰는지 궁금합니다.
그리고 > 양쪽에 한 칸씩 띄우는 게 맞는지 아니면 전혀 상관 없는지 궁금합니다


#자식 자손 선택자 #자식 셀렉터 자손 셀렉터

profile_image 익명 작성일 -

둘다 필요에 따라 적절하게 사용합니다.

CSS로 최적화를 하는건, Javascript로 생기는 최적화 문제보단 아무레도 순위가 밀립니다. 최적화에 목숨거는 우리나라 특성상 강의하시는 분 말대로, 자식선택자를 쓸것 같긴 하지만, 회사마다 다를 거 같습니다.

막말로, 그냥 자손선택자, 자식선택자 싸그리 안쓰고, 리액트같은 프레임워크쓰는 컴포넌트들은 tailwind CSS같은걸로 캡슐화해서 쓰는 사례가 많아지고 있기도 하고요.

다만, 강사분꼐서 "컴퓨터가 이해하는 데 오랜시간이 걸린다"라고 하셨는데, 반은 맞는 뜻이고, 반은 틀린 뜻입니다.

컴퓨터는 이미 해당 코드를 이해하고 있으나 처리하는 데 오랜시간이 걸리는겁니다. 당연하게도 조건에 맞는 모든 자손 노드를 파싱해서 스타일을 줘야하기 때문이죠. 자식 노드는 해당 셀렉터에 부합하는 바로 아래있는 자식만 스타일링하기에 당연히 작업양이 적죠. 코드를 짜는 스타일은 현장에 가셔서 약속된 방법대로 하시면 되고, 필요에 맞게 쓰시면 됩니다.

그리고, 자식 선택자를 쓸 때는 > 앞뒤에 공간을 두셔도 좋습니다. 어처피 프로젝트에서 CSS를 minify하는 과정에서 알아서 한줄로 바꾸기 때문에 굳이 작업마져 불편하게 하실 필요는 없습니다.

profile_image 익명 작성일 -

대충 이런 코드일 때

css에서

#slider > .link 로 많이 쓰나요?

아니면

#slider .link 로 많이 쓰나요??

일반적인경우는 #slider .link 로 사용합니다

학원에서 자손 선택자는 컴퓨터가 조금 이해하는데 시간이 걸려서 잘 안 쓴다고 하셨는데

그럼 전자를 많이 쓰는지 궁금합니다.

위에 말한데로 전자(#slider > .link)보단 후자(#slider .link )를 많이 씁니다

css로 스타일링할때 일반적으로 자손선택자로 하는 경우가 대부분이라고 생각하시면 됩니다 지금 페이지를 f12 개발자도구를 눌러서 우측영역에 파일명적힌 css를 누르면 해당페이지의 css가 보이게 됩니다(여러 페이지를 직접 확인해보세요~) 그럼 대부분이 어떻게 작성됬는지 알수있죠 단순 시간차이로 쓰는경우는 드뭅니다

직계자식선택자(>)는 보통 자식안에 또 자식이 같은경우 사용합니다

즉 link안에 link가 있는경우 직계자식으로 정확히 해당요소에 스타일링을 할때 사용하죠(보통 ul에 li구조가 연속으로 들어갈때 자주 사용합니다) 그래서 일반적인경우에는 자손 선택자로 사용하고 특수한경우 직계자식선택자(>)를 각 상황에 맞게 스타일링 하시면 됩니다

그리고 > 양쪽에 한 칸씩 띄우는 게 맞는지 아니면 전혀 상관 없는지 궁금합니다

네 상관없습니다

css 하위 선택자 질문이요

하위 선택자가 부모, 자식, 자손에 해당하는 두 개의 선택자들을 띄어 쓰기로 구분하여 스타일을 적용하는 것이잖아요. 그럼 혹시 하위 선택자를 사용 하였는데...

html, css 선택자 질문

... 이해하려면 자손/자식의 개념을 알아야 합니다. 자손: 요소가 포함하고 있는... 중요) 질문자분이 작성한 HTML 코드를 봤을 때 중첩 의도를 잘못 넣은것 같은...

html 질문합니다.

... 자식 요소는 자손 선택자를 사용할 것. 메뉴 바위에 마우스가... net/xxxvvvxxx/rdj7v1pk/3/ & 기타 궁금하신 점은 언제든 1:1질문주세요....

html css3 질문드립니다/

자손선택자 공부중에있습니다. 기본적으로 선택자 A > 선택자 B 이런식으로... 요소의 자식요소를 가르키는 선태자이지요. 그래서 요소의 깊이에 따라 >을 계속 사용할 수...

아케다(이사악 묶기) 의 견해

... 자식(이사악)을 바치라 한다."" 여호와의 합당한 선택자... (참고= 전에했든질문=잘됏고나, 자식을 재물로 바치려고... 그리고 하나님은 그를 통해서만이 네 자손이 별같이...

css position 속성의 absolute 의 이해

... position 선택자가 이해가 잘 안가서 질문을... 모든 자손은 relative 가 정의된 엘리먼트 공간을... 있고 #me라는 자식이 있습니다. #me에 absolute 속성을 주고...