CSS4 styled-components 사용법 [part 2 /2] 지난 포스팅에 이어서 styled-components 사용법에 대한 내용이며 이번에는 좀 더 헷갈렸던 고급 사용법에 대해서 공부해 보겠습니다. 의사 선택자(pseudo-selector) 선택자에 옵션을 줘서 일부 요소만 선택하는 방법입니다. 영어로는 pseudo라는 명칭을 사용하던데 많은 CSS 자료에서 "의사"라고 번역을 하네요. & (ampersand) "&"기호를 하나만 사용하게 되면 '모든 요소'를 의미합니다. 그냥 이렇게만 얘기하면 무슨 얘기인지 잘 이해가 안 되죠?! 저는 그랬습니다. ㅡ.,ㅡ 암튼 예제를 보면 이해가 쉽게 됩니다. 이 예제는 'styled-components' 공식 홈페이지의 예제를 그대로 가져와서 주석만 번역했습니다. 그리고 아래 내용을 이해하기 위해서는 CSS의 기본 문법.. 2022. 11. 14. CSS의 기본 - 개념, 문법, 용법 정리 "styled-components"를 공부하던 중 계속 진도를 나가기 위해서는 CSS에 대한 지식이 좀 더 필요하겠다고 느껴서 CSS에 대해서 한번 짚고 넘어가려 합니다. CSS란 CSS는 Cascading Style Sheet의 약자로 HTML 문서의 요소들을 어떻게 보여줄지를 정의한 서식 문서입니다. HTML4부터 서식 설정을 HTML 문서로부터 분리하는 게 가능해져서 CSS라는 별도의 파일로 관리하게 되었고 그래서 사이트의 스타일을 손쉽게 관리해 줄 수 있도록 해주는 역할을 합니다. CSS는 W3C라는 기관에서 표준안을 관리하는데 1996년에 최초 표준 권고안이 제정되었고 지금까지 계속 개발이 이어지고 있다고 합니다. 참고로 지금 최신 버전은 CSS2.1입니다. CSS 문법 CSS는 선택자와 선언부.. 2022. 11. 7. [React] styled-components 사용법 [part 1 / 2] styled-components는 리액트에서 CSS를 더 편하게 사용할 수 있도록 만들어주는 유용한 도구인데요. 저는 아직까지도 CSS가 마치 하나의 코딩 언어처럼 어렵게만 느껴지다 보니 styled-components에서는 이건 또 무슨 소리인가 싶더라고요. 그래서 기초부터 찬찬히 다시 봐야겠다는 생각이 들었습니다. "styled-components"에 대한 특징이나 기본적인 설명은 생략하고 넘어가겠습니다. 어치피 styled-components 좋은거 잘 알고 이미 잘 사용하고 있기 때문에 어떻게 사용하는지가 중요한 거 아니겠습니까?! 설치 styled-components 사용을 위해서는 먼저 설치하고 프로젝트에 추가해 줍니다. npm, yarn 등을 이용해서 설치합니다. # with npm npm .. 2022. 10. 27. 티스토리에서 CSS 코드 사용하기 (h태그 활용) 티스토리 편집기에는 h태그를 사용할 수 있도록 아주 편리한 기능이 제공 됩니다. 웹브라우저에서만 쓸 수있고, 다른 블로그에서도 제공하는 기능이라서 티스토리만의 장점은 될수 없지만요. 아무튼 CSS코드를 추가해서 h태그를 활용하게되면, 포스팅을 할때 글의 구조에 따라서 큰제목과 소제목 등 글의 제목부분의 디자인을 쉽고편하게 지정할 수 있는데, 제가 공부했던 내용을 공유하겠습니다. 1. 편집해야할 CSS코드 위치 확인하기 HTML편집기로 가서을 해서 CSS탭을 열어줍니다. CSS코드의 구조는 사용하는 스킨의 종류에따라 차이가 있어서 이 글만 보고 똑같이 따라할 수는 없습니다. 코드들을 찬찬히 보시고 해당되는 부분이 어디인지 확인을 해 주어야 합니다. 먼저 CSS코드의 전체적인 구성이 어떻게 되어 있는지 감을.. 2019. 2. 11. 이전 1 다음
