진스

Scoped CSS | Vue Loader Scoped CSS When a tag has the scoped attribute, its CSS will apply to elements of the current component only. This is similar to the style encapsulation found in Shadow DOM. It comes with some caveats, but doesn't require any polyfills. It is achieved by u vue-loader.vuejs.org 또 한 이곳도 Scoped CSS, deep selector scoped, Child 컴포넌트의 영향 여부, **deep selector** velog.io Deep Sel..

방식 1. "역활"과 "이름" : btn, tab, tit, desc, nav, bg, gnb, lnb, snb, pop, popup /이름 "영역"과 "리스트" : wrap, area, inner, box, section, article, aside / list "상태"과 "순번" : 카운드 숫자, on, off, over, active #wrap 페이지(#heaer, #container, #footer)전체 #header 로고를 포함한 상단 영역 #container #heaer, #footer를 제외한 영역 #contents 처음 컨텐츠가 시작하는 영역, "#container" 안에 바로 컨텐츠가 시작되는 구조면 "#contents"가 대신 할 수 있다. #footer copyright를 포함한 하단..

:root 가상 클래스 웹 문서 구조에서 특정 위치에 있는 요소를 선택하는 가상 클래스이다. :root 선택자는 웹 문서 구조에서 가장 상위 요소를 선택할 때 사용한다. 즉, html에서 root은 항상 html을 가리킨다. 그러나 html보다 :root 가상 클래스의 스타일 적용 우선순위가 더 높다. 문서 전반적으로 재사용할 임의가 있는 값을 작성한다. :root을 이용해 최상위 요소에 변수를 선언하면 모든 요소에서 이 변수를 사용할 수 있다. 이렇게 :root을 사용하여 변수를 사용하게 되면 한 번에 수정이 용이하다. CSS :root 변수 선언 웹 문서에서 공통으로 사용될 속성을 미리 변수에 선언한다. --(하이픈 2개) 다음 속성 이름을 정해주고 : (콜론) 뒤에 속성 값을 적어준다. :root ..

2줄 이상으로 줄이려면 다음과 같은 코드를 적용할 수 있습니다. .text{ text-overflow: ellipsis;/* 없어도 될듯 */ line-height: 16px; max-height: 32px; /* 이 아래만 있어도 됨 */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; /* 표시하고자 하는 라인 수 */ -webkit-box-orient: vertical; }

감싸는 컨테이너에는 dispaly flex-direction flex-wrap felx-flow justify-content align-items align-content 각각 item에는 order flex-grow flex-shrink flex align-self 높이100%를 맞추는 방법 1. html{height:100%} body{height:100%} .container{height:100%} 상위 테그에 다 100%를 줘야함 방법2. .container{height:100vh} 100vh(view hight) 는 부모에 상관없이 현재 보이는 영역을 100%로 하겠다. - 100vw 가로100% 상위 테그에 100%를 안줘도 됨 Material Design Color Tool (색상 예쁘게 조..