CSS (5) 썸네일형 리스트형 CSS in JS CSS in JS는 말그대로 자바스크립트 코드안에서 css코드도 같이 작성하는 방식입니다. 이번에 웹사이트 하나를 만들며 공부하는 과정에서 CSS in JS 를 알게되어 공부를 하며 적용시켜보려 합니다. CSS in JS 라이브러리중 가장 많이 쓰는 것은 바로 styled-components가 있습니다. Styled Components는 CSS-in-JS 스타일링을 위한 프레임워크입니다. 그렇다면 왜 이것을 사용하는가 ? 장점에는 자바스크립트 와 css 사이에 상수와 함수를 공유할수 있으며 CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화하는 모듈성, Styled Components는 스타일링을 위한 코드 사용량이 줄어들고 CSS 문법에 친화적이라고 합니다. 일반적으로 사용하는 css 코드와 sty.. [CSS] 심화 개념 정리 1. transition 어떤 상태에서 다른 상태로의 변화를 주는 애니메이션 1) transtion은 state가 없는 요소에 붙어야한다. state에 transition을 준다면 변화를 준것(예- hover라면 마우스를 갖다 댄것)을 그만할경우(마우스를 뗄경우) 원래상태로 바로 돌아간다. 2) transition 은 상태에 따라 바뀌는 요소가 있을때 사용함 상태 ex) hover, active, focus ... transition: background-color 10s ease-in-out; 해석: 배경색을 10초동안 바꾼다. transition: all; state에 적은 모든 것들을 선택한 것 a { color: white; background-color: tomato; text-decoratio.. [CSS] 기본개념정리 3 1. States Active, hover, focus, focus-within, visited active 해당 요소를 마우스로 클릭했을 때 효과를 적용 hover 마우스가 해당 요소 위를 지나갈 때 효과를 적용 focus 키보드로 선택되었을 때 효과를 적용 focus-within 부모 요소에게 적용. 자신의 자식 요소 중 하나가 focused되었을 때 효과를 적용 visited 방문한 사이트일 경우에 효과를 적용 조건을 나열해 여러 상황을 설정할 수 있음. 예 high-tag:hover low-tag:focus{ } 인 경우, 상위 요소위에 마우스 커서가 있고, 하위 요소가 focused되었을 때 효과를 적용하게 된다. state들을 다른 엘리먼트와 연계해서 사용할 수도 있다 1) 부모의 state에.. [CSS] 기본 개념정리2 1. Position position : fixed를 이용하면 스크롤해도 항상 제자리에 머무른다. 처음 만들어진 자리에 고정 되어있다. 하지만 top, left, right, bottom 중 하나만 수정해도 서로 다른 레이어에 위치하게되어 원래 위치가 무시된다. positon fixed를 이용하면 가장 위에 위치하게 된다. (맨 앞) - positon: static (default) - position: relative; element가 '처음 생성된 위치'를 기준점으로, top bottom left right으로 위치를 조금씩 수정할 수 있다. - position: absolute; 가장 가까운 relative 부모를 기준으로 이동 position:relative; 를 해주면 부모가 된다. 없으면 bo.. [CSS] 기본 개념정리 CSS : Cascading Style Sheet Cascading : 위에서 아래로 내려오는 이미지(폭포가 흐르는 것 떠올리기) 어떤 것 다음에 어떤 것이 온다 이것이 cascading이 의미하는 바다. 브라우저가 CSS 코드를 읽을 때 cascading 방식으로, 즉 위에 있는 코드부터 차례차례로 읽힌다. - CSS가 하는 일은 HTML 태그를 가리키는 일. (이 태그는 초록색이다. 이 가리키는 것 자체를 'selector') 1. block과 inline 옆에 다른 요소가 못 오는걸 block , 올 수 있는걸 inline라고 한다. (in the same line) inline의 대표적인 태그 span, link, img가 있다. block의 특징 margin, padding, border (bl.. 이전 1 다음
