section 8-2 css 선언 문의
안녕하세요. 강사님.
section 8-2 투두리스트 프로젝트 UI 구현하기에서
css 스타일에 대해서 질문이 있습니다.
.List > input 과같이 중간에 > 연산이 있는 경우와 없는 경우의 차이는 무엇인가요?
미션 day15 ContactEditor css 스타일에서
.input_wrapper className이 이미 적용되어 있는데 아래와 같이 부모 속성인 .ContactEditor를 명시할 필요가 있는지도 궁금합니다.
.ContactEditor .input_wrapper답변 2
0
안녕하세요 이정환입니다.
CSS에서의 ">" 는 바로 아래(한단계 아래)에 있는 요소를 의미합니다. 따라서 .List > input 은 .List 클래스 이름을 갖는 요소 바로 아래에 있는 input 태그를 의미합니다.
추가로 .ContactEditor 클래스 네임을 명시하지 않아도 문제가 되지는 않습니다. 다만 이후 중복된 클래스 네임을 다른 컴포넌트에서 활용할 경우 충돌이 발생할 수 있습니다.
0
네 답변 감사합니다.
.List >input의 ">" 연산자의 따라 바로 아래 input 태그만 CSS 스타일이 적용 됨을 확인 하였습니다. ">" 가 없을 경우 자식 input 태그 모두에 CSS 스타일이 적용되는 부분도 함께 확인해 보았습니다.
프로젝트가 복잡할 수록 컴포넌트에 중복된 클래스 네임을 다른 컴포넌트에서도 사용할 수 있기 때문에 부모 클래스 네임이 필요한 이유로 잘 이해 되었습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 유일용님.
CSS에서의 > 기호는 자식 결합자(Child Combinator)를 나타내며, 바로 아래 있는 자식 요소를 선택할 때 사용됩니다. 예를 들어, .List > input은 .List 클래스의 직접적인 자식으로 있는 input 요소만 선택하는 것을 의미합니다. 이것은 중첩된 구조가 있을 때 유용합니다. 반면, 중간에 > 없이 .List input이라면 모든 하위 input을 선택합니다.
부모 속성인 .ContactEditor를 명시하는 이유는 스타일 적용의 범위를 명확히 하기 위함입니다. 이렇게 하면 .ContactEditor 내부에서만 .input_wrapper 클래스가 적용되도록 제한할 수 있습니다. 만약 여러 곳에서 동일한 클래스명을 사용한다면, 이러한 부모-자식 관계를 명시함으로써 스타일의 우선순위를 관리하고, 의도치 않은 스타일 충돌을 방지할 수 있습니다.
아래 링크에서 보다 자세한 설명을 확인해 보세요:
- CSS 자식 결합자와 일반 결합자의 차이점
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
useEffect와 lifecycle문의
0
28
2
프론트엔드 학습 수준 문의
0
39
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
48
2
데이터 로딩중 화면만 계속 나와요!!
0
55
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
79
2
이후의 커리큘럼 문의
0
102
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
50
2
최적화 관련 질문있습니다 (useMemo 등)
0
84
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
82
3
Date 객체에 관련하여 질문드립니다.
0
85
2
리액트 개정판 교재 질문
0
60
2
예제코드가 안나와요!
0
78
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
108
2
onMouseEnter 관련 문의 드립니다
0
92
3
배열의 렌더링 관련 질문 드립니다.
0
73
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
113
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
137
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
70
1
vs code 자동완성관련 문의
0
113
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
179
2
87강 필터 함수 질문
0
69
2
useRef, useState count 비교
0
67
2
안된다고했던 이유가 무엇이었는지 모르겠습니다
0
90
2
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
0
75
2