As i wish

이번 포스팅에서는 nth-child 에 대하여 몇가지 적어 보겠습니다. 일단 p: nth-child(an+b) 처럼 사용 할 수 있고 '부모의 an+b 번째 자식인 p 요소' 를 의미합니다. 어떤 부모가 있고 그 부모 밑에 p 요소가 있는데 그중에 'an+b 번째' 자식만 선택하겠다는 의미가 되죠. 말로 풀면 의미가 조금 어려운데 바로 코드로 보겠습니다. The first paragraph. The second paragraph. The third paragraph. The fourth paragraph. Note: Internet Explorer 8 and earlier versions do not support the :nth-child() selector. 전체 스타일 내에 2번째 자식인 p 태그를..

안녕하세요. 엄티입니다. 오늘은 CSS selector 중 비슷하지만 조금 다른 것들을 알아보겠습니다. 오늘은 그 중에서 4 가지 경우를 알아볼건데요. 1. A B 2. A > B 3. A + B 4. A ~ B 1, 2 번은 A 태그 안에 있는 B 라는 태그 가 있을 경우, 3, 4 번은 B라는 태그가 A 태그 랑 같은 레벨에 있을 경우에 적용 됩니다. 1. div p: div 자식안에 있는 모든 p 의 적용 2. div > p: div 의 직계자손인 p 의 적용 'List Item 1' 가 p 태그로 감싸져 있는데 1 번인 경우 div 에 자식안에 있는 모든 p의 적용 되기 때문에 ul 태그 안에 있어도 스타일이 적용 되는 반면 2 번인 경우 'List Item 1' 이 div 의 직계 자손이 아니기..

styled-component를 쓰면서 가장 큰 장점은 스타일링이 템플릿 리터럴(Template Literal)을 사용하기 때문에 $ (props.isMenu ? '30px' : '')}; background-color: ${(props) => (props.isMenu ? '#8080804d' : 'transparent')}; `; const Number = styled.div` min-width: 20%; margin: auto 0; padding-left: 1%; `; const Content = styled.div` min-width: 40%; margin: auto 0; padding-left: 1%; `; const InputContainer = styled.div` min-width: 38%;..