728x90 반응형 CSS2 [TIL] 11/12 styled-components 모르는 것 정리 1. styled-components 모르는 것 정리 1.1. styled-components 의 중첩 스타일링 스타일링 컴포넌트를 작성할 때 이렇게 중첩으로 스타일링을 작성할 수 있다는 것을 알게 되었다. 컴포넌트 구조와 스타일이 일치하기 때문에 어떤 태그(클래스)에 어떤 스타일링이 적용되었는지 쉽게 알아볼 수 있다. const HeaderStyled = styled.header` .logo { img { width: 250px; } margin: -15px; }`; - 중첩 스타일의 동작 방식 styled-components 는 내부적으로 CSS 클래스를 생성할 때 중첩된 스타일을 컴파일한다. 위의 코드를 컴파일하면 아래와 같이 앞에 유니크한 클래스 이름이 붙어서 생성되.. 2024. 11. 12. [TIL] 8/21 CSS, Javascript - Inline, internal, external CSSCascading Style Sheets 의 약자로, HTML 을 꾸며주는 언어HTML 태그를 하나하나 꾸며줌 (문서를 통채로 한 번에 꾸며주는 것 x) HTML 에 CSS 를 적용하는 방법은 3가지가 있다. 인라인 (Inline): HTML 태그 안에 같이 작성내부 스타일 시트 (internal style sheet) : HTML 문서 안에 같이 작성외부 스타일 시트 (external style sheet) : HTML 문서 밖에 작성하고 연결 1. 인라인 (Inline) Login ID : PW : 인라인 CSS 는 스타일을 적용하고자 하는 태그 안에 style 속성을 적고 적용시킬 CSS 를 나열해주면.. 2024. 8. 21. 이전 1 다음 728x90 반응형
