코딩/HTML, CSS (20) 썸네일형 리스트형 폰트에 그라디언트 넣기 background: linear-gradient(to left top , #75019a, c44a8 ); // 직선 형태의 그라디언트 기본형태 -webkit-background-clip: text; // 백그라운드 적용: 텍스트에만 color: transparent; // 그라디언트 보여주려면 텍스트를 투명하게 해야함 animation속성 forwards, willchange animation 속성 forwards는 keyfrmaes마지막 속성 값을 애니메이션이 끝나고나서도 유지한다 @keyframes hideSplashScreen{ from{ opacity:1; } to{ opacity:0; visibility: hidden; /* 마우스에걸리지 않게 빼는 것 but ,element는 그대로 남아있다.chrome 개발자도구에서 확인 가능 함. 없애고싶다면 자바스크립트 사용해야함*/ } } /*opacity가 0이 된 상태로 유지하는 거지 element가 사라진 것이 아니라 다른 다른 버튼 클릭 안됨*/ animation 속성 willchange will-change: transform;브라우저에게 어떤 것이 변경 될 것인지 미리 말해주는 것 주로 흔들리거나 문제가 있을 때 .. 자잘한 팁 border-radius 로 원을 만들고 싶다면 width의 반 만 적용하면된다. 예를들어 width: 50px; height:50px; 일 경우 border-radius: 25px; display: flex는 block 특성의 flex container를 정의한 것이기 때문에 block성질과 같이 수직으로 쌓인다. 중앙 정렬 방법, header 정렬 1. display:flex; justify content: center; align-items: center;사용하기 2.. margin: auto; 메인 콘텐츠 컨테이너를 수평 중앙에 둘 때 사용 display가 inline, inline-block일 때 작동하지 않음 3.. text-align: center; inline, inline-block 일 때 수평 중앙에 둘 때 주로 line-height 와 같이 사용해 수직 중앙도 맞춤 4.. position:absolute; left:50%; top: 50%; trnasform:trnaslate(-50%, -50%); 5. display: grid; place-content: center; header 정렬하기 1. 햄버거버튼 로고 아이콘 .statu.. BEM / Block, Element, Modifier block , element , modifier 각 요소로 클래스 명을 짓는 방식, 어떤 목적인가에 따라 이름을 지어 코드를 읽기 쉬워 협업 시에도 용이하다. 또한 부모와 자식관계를 명시하기 좋음 block요소는 독립된 컴포넌트로 사용할 수 있는 단위를 말하고 element요소는 block내에 위치하여 독립적으로 사용 할 수 없다. //block요소: header, 컴포넌트로 독립적으로사용가능 Chats //엘리먼트요소: header__title, header__icons block 의 element는 상하의 관계가 아니라 모두 같은 element로 본다. Chats //header__content-title이 아님 modifier은 element의 속성으로 --로 표현한다. class="screen-h.. justify-content , align-items 사용 예제 justify-content (en-US) — 주축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성. align-items (en-US) — 교차축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성 Tuesday, June 30, 2020 .main-chat{ display: flex; flex-direction: column; // 세로축으로 주축 바꾸기 align-items: center; //세로축 기준 가운데 정렬 } 0 000 이 아이템들이 교차축기준으로 정렬이 되어있지않다면 align-item:center; 가로축 기준으로 주축이 설정 되어있다면 align : items 가 가로축 기준으로 가운데 정렬이되고 세로축 기준으로 주축.. atrribute selector, pesudo selector atrribute 선택자[ ] input[placeholder="name"]{} ~= :포함하는 ^= :로 시작하는 $= : 로 끝나는 input[palceholder~="name"] //name포함하는 모든 palceholder a[href $=".org"] // .org로 끝나는 모든 링크 pesudo selector + 바로다음에오는 형제요소 ~ 형제요소(바로 다음에 오지 않아도되는) focus-within 포커스를 받았거나, 그 자손 중 하나가 :focus 받을 때 .reply:focus-within input{} //클래스 reply 나 자손이 focus 받을 때 인풋이 흔히 쓸 수 있는 예시로서, 의 필드 중 하나가 포커스된 경우 전체 을 강조해야 할 때 유용하게 사용할 수 있습니다. 컬러를 변수에 넣기 :root 컬러를 바꿀 때 여러줄을 변경하는 수고를 덜 수있음 :ROOT 이전 1 2 3 다음
