본문 바로가기

Front-End/CSS10

포지션 11.3 오프셋 프로퍼티top bottom left right => 오프셋 50% 등 비율로도 설정 가능 음수값이면 밖으로 나가게 됨 패딩이 적용되면 컨텐츠 영역 + 패딩 영역이 적용됨 (원하지 않는다면 box-sizing을 border-box로 지정) auto ? 11.4 콘텐츠 오버플로(포지션인데 왜..?) visible : hidden | scroll | auto(-> 스크롤 바는 필요할 때만 사용) 요소의 크기 < 콘텐츠 크기 11.5 요소 가시성visibility(레이아웃에 영향이 있다) 보이지 않을 뿐 영역을 차지함 [ display : none은 문서에서 제거함 ] 11.6.1 포함하는 블록과 absolute 포지션이 지정된 요소 문서 흐름에서 완전히 제거된다. parent가 relative.. 2024. 1. 6.
CSS Specificity (CSS 특이성. 선택자 우선순위 점수) https://www.w3schools.com/css/css_specificity.asp CSS Specificity W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 우선순위 점수는 0점과 1, 10, 100, 1000점으로 유일하다. 1000점과 100점 0점은 독보적이기 때문에, 딱 하나씩만 배정된다. 기억해야 할 것은 10점과 1점임. 인라인 선언: 1000점 id:.. 2023. 12. 15.
position relative: 1. 문서의 흐름상 배치 2. 자기자신의 원래 위치를기준으로, 오프셋 적용! (다른요소와 겹칠수 있음=== 오프셋은 다른 요소에 영향이 없다=== 공간은 static일때와 같다) absolute: 1. 페이지 레이아웃에 공간 배정되지 않음===다른 요소와 겹칠 수 있음 2. 부모 요소중 relative absolute fixed 2023. 11. 19.
display, visibility, opacity 프로퍼티 display inline-block none: 아예 보이지 않음 display 요소는 상속되지 않는다 inline요소(block요소를 포함할 수 없다) width, heigth 요소 지정 불가능 margin-top, margin-bottom 지정 불가능 https://oursmalljoy.com/css-width-auto-height-auto-기본개념-잘못-생각하고-있는-것들/ 【CSS】 width: auto와 height: auto 당신이 몰랐던 작동 원리 ⋆ Our Small Joywidth: auto와 height: auto는 우리가 생각했던 것이랑 다르게 작동할 때가 있다. 특히 이 설정값들은 기본 설정값이기 때문에 모든 사람들이 겪게 될 잠재적 문제이다. 이 포스트에서는 이들의 작동원oursm.. 2023. 9. 14.
Chakra UI 기본적인 사용 방법 1. 설치 npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion 2. 컴포넌트에서 프로바이더를 꼭 넣어주어야 적용된다. import * as React from 'react' // 1. import `ChakraProvider` component import { ChakraProvider } from '@chakra-ui/react' function App() { // 2. Wrap ChakraProvider at the root of your app return ( ) } 차크라? 나루토? 설마? 했는데 진짜로 문서 예시에 나루토가 나온다 https://chakra-ui.com/docs/components/tabs/.. 2023. 4. 3.
bootstrap (리액트 vscode) 1. npm install 할 때 react-bootstrap을 해야 function 컴포넌트 사용 가능 (안그러면 class 형이라서 오류 발생) npm install react-bootstrap bootstrap 2. CDN publid index.html 파일의 태그 안에 붙여넣기 src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 파일들은 그대로 보존된다 2023. 3. 28.
Ant-Design InternalTable https://github.com/ant-design/ant-design/blob/master/components/table/InternalTable.tsx https://ant.design/components/table 2023. 3. 22.
Styled-components 설치 npm install styled-components https://styled-components.com/docs/ 기본적인 사용 방법 1. const 컴포넌트명 = styled.css선택자`` `` : 백틱. 주의: 값을 집어넣을 때 따옴표를 작성하지 않는다. import styled from "styled-components"; export default function App() { const SimpleButton = styled.button` color: red; `; return ( Simple ); } 2. 만약 위에서 만든 button 컴포넌트에 또 다른 스타일 컴포넌트를 추가하고 싶다면. 즉 SimpleButton을 상속받은 LargeButton이라면 styled(상속할 컴포넌트).. 2023. 3. 13.
reflow, repaint (랜더 트리, reflow, reflow를 줄이는 예) 브라우저의 이해 #1 Reflow, Repaint에 대하여 알아봅니다. 폴시랩 자바스트립트, PHP, 워드프레스, HTML, CSS, 팁, 가이드, 일상이야기. falsy.me [브라우저의 랜더링 과정을 이해하고 reflow와 repaint를 줄여서 성능을 높이자. 불필요한 성능 저하를 줄이자] 1. 브라우저의 랜더링 과정 DOM 트리와 스타일 규칙을 합쳐서 랜더 트리를 생성. reflow: 배치. 레이아웃을 위치시킴 랜더 트리: display none의 경우 DOM에는 존재하지만, 시각적으로는 존재하지 않기 때문에 랜더 트리에 할당되진 않는다. position이 absolute,fixed 의 경우 DOM 트리와 다른 위치의 랜더 트리에 할당 랜더트리가 탐색되고 paint 메서드가 호출되어 UI 기반의 .. 2023. 3. 5.

티스토리툴바