CSS
-
[React] styled-components를 사용하는 이유공부 2021. 10. 20. 00:35
리액트 컴포넌트 스타일링 방식 1. CSS 중복되는 클래스명 사용 금지 CSS파일 만들어서 import 2. SASS(Syntactically Awesome Style Sheets: 문법적으로 짱 멋진 스타일시트) CSS pre-processor 코드의 재활용성과 가독성을 높여 유지보수를 쉽게 해줌 SCSS와 SASS확장자를 지원하는데 주로 SCSS를 더 많이 사용 함 기본문법은 CSS와 동일 Nesting가능 상위 요소 이어쓰기는 "&" 사용(클래스명 등 글자도 이어쓰기 가능) 문자열 치환 가능(변수 쓸 수 있음) 3. styled-components (컴포넌트에 스타일 직접 입히는 방식) CSS-in-JS라고 하는 JavaScript파일 안에서 CSS를 처리할 수 있게 하는 라이브러리 class 이름..
-
[WEB] CSS 이해하기공부 2021. 10. 14. 16:51
선택자(selectors) universal * type Tag ID #id Class .class State : Attribute [] layout display div는 블럭레벨(한 줄에 하나가 다 차지함) display: inline-block; 으로 주면 인라인으로 속성 바뀜(상자로 변환, 지정된 사이즈가 있다면 그대로 변환) display: inline; 으로 주면 span처럼 사용 가능(컨텐츠 자체만 꾸며줌) span은 인라인레벨(한 줄에 여러개) display: block; 으로 주면 블럭으로 속성 바뀜 position 기본값으로 static을 가지고 있음(html순서대로 보여짐) position: relative; 로 주고 left, top등을 주면 그만큼 움직임 relative는 원래 자..
-
[항해99]00사전준비/1주차sparta/웹개발 2021. 6. 3. 02:56
본격적 개강이 5일밖에 남지 않은 시점에 시작하게 되어 시간이 매우 촉박한 상황이다. 하루에 한주차씩 잡아야 하는 상황..ㅠㅠ 약간 우당탕탕 느낌이 없지 않아 있지만 대충, 빨리, 잘 따라가보자. 1주차 사전준비는 HTML, CSS, JavaScript의 기초 문법과 그 예시들을 직접 해보는 시간이었다. 혼자 여러 강의를 찾아 공부할때는 기억해야할 것이 무엇인지 추려내는데 많은 시간이 걸렸다. 반면 99일이라는 타이트한 기간안에 개발자로 거듭나려는 커리큘럼은 그 많은 시간을 압축적으로 줄여줬다. 1. 외우지 말라 여러번의 예시를 반복적으로 풀어보면서 자연스럽게 익히게 하자. 모르는건 구글링! 2. CSS부트스트랩 사용하기 기존 사용자들이 작성해 놓은 코드를 사용함으로써 시간단축. https://getbo..