Frontend/CSS12 [CSS] Flex / Grid 유용한 참고 사이트 A Complete Guide to Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ A Complete Guide to Flexbox | CSS-Tricks Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi css-tricks.com .. 2022. 12. 31. [CSS] 글자수 제한 효과 기능 3가지 (Limit text length) white-space nowrap : 1줄로만 표시되며 줄바꿈 일어나지 않음 https://developer.mozilla.org/en-US/docs/Web/CSS/white-space white-space - CSS: Cascading Style Sheets | MDN The white-space CSS property sets how white space inside an element is handled. developer.mozilla.org overflow ( 텍스트가 포함되어 있는 요소 영역을 벗어나는 경우 ) visible : 부모 요소 넘어가면서 텍스트 노출 hidden : 벗어난 컨텐츠는 보여지지 않고 감추어짐 scroll : 스크롤 형식으로 바뀌어 텍스트 보여줌 https://devel.. 2022. 12. 27. [CSS] CSS 포지션 속성 (relative, absolute) https://developer.mozilla.org/en-US/docs/Web/CSS/position position - CSS: Cascading Style Sheets | MDN The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. developer.mozilla.org CSS 포지션 relative, absolute 속성 (position) 요소의 배치하는 방법을 지정해주는 CSS 속성으로 top, right, bottom, left로 기준점 위치.. 2022. 12. 26. [CSS] 리액트 styled components Styled Components 공식 사이트https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com 자바 스크립트 파일 내에서 CSS를 함께 쓸 수 있는 라이브러리 컴포넌트의 클래스명을 지정하지 않고 스타일링이 된 컴포넌트를 생성하여 사용해주는 형식 별도의 CSS 파일을 생성하여 왔다 갔다 하지 않아도 되는 장점이 있음 기본으로 다운로드 되지 않기 때문에 별도로 yarn add styled-components 명령어 통해서 다운 필요 ㄴ 실.. 2022. 12. 16. [CSS] React CSS Module CSS Module? 클래스 이름을 고유한 값으로 자동으로 생성해주어 이름 중복됨을 방지해주는 스타일링 방법 클래스명 동일해서 충돌하는 현상 방지 가능하며, 리액트 내에서 컴포넌트 단위로 스타일 적용 보통 파일명은 컴포넌트명.module.css로 해주며 import styles로 임포트 import styles from '../modules/Navbar.module.css'; 스타일 지정 원하는 요소에 className={styles.title}과 같은 형태로 지정해주면 됨 function Navbar() { return ( YOUTUBE ); } 2022. 12. 12. [CSS] 유용한 CSS 속성 정리 헷갈리거나 활용하지 못했던 CSS 속성들 정리 (...ING) accent-color : ㄴ 브라우저 기본 지정 색 (e.g 체크박스는 파란색) 변경 해줄 수 있음 min-height: 0 ㄴ flex 아이템 중 어느 하나가 길어지는 경우 위의 요소가 화면을 넘어갈 때에 0으로 지정해주면 해결 가능 list-style-type: none; ㄴ li 태그 bullet 표시 제거 :root { --color-bg-dark: #f5f5f5; --color-bg: #fdfffd; --color-grey: #d1d1d1; --color-text: #22243b; --color-accent: #f16e03; } ㄴ 자주 쓰는 색상 이름 지정하여 var(--color-bg)와 같은 형태로 돌려쓸 수 있음 *{ box.. 2022. 12. 6. 이전 1 2 다음
