본문 바로가기

FrontEnd

 (437)
React 컴포넌트 DRY하게 작성하기 : varient 원문 : Variants – a quick tip for better React components | Swizec Teller Variants – a quick tip for better React components | Swizec Teller Say you're building a component that shows up in lots of places, like a header. Look at designs and sure enough, same header on every page. Logo, few buttons, username. You create a reusable component. DRY all the way. const Header = () => { return ( )} Fa sw..
[React][Remix][tutorial]React-Remix를 이용하여 개발자 블로그 만들기. 공식 블로그 튜토리얼을 의역한 내용이다. 해당 튜토리얼을 따라 react-remix 프레임워크와 마크다운을 활용해 개발자 블로그를 만들어본다. Remix | Developer Blog Quickstart We're going to be short on words and quick on code in this quickstart. If you're looking to see what Remix is all about in 15 minutes, this is it. 💿 Hey I'm Derrick the Remix Compact Disc 👋 Whenever you're supposed to do something you'll s remix.run 완성된 프로젝트는 여기서 볼 수 있다. 추가로 튜토리얼과 다르..
[React][CSS] css를 styled-component로 변환하기 해당 게시물은 https://velog.io/@hyeoki/React-css%EB%A5%BC-styled-component%EB%A1%9C-%EB%B3%80%ED%99%98%ED%95%98%EA%B8%B0 에서도 볼 수 있다. Styled Component의 장점 class nesting이 필요 없음. &(parent selector)로 자기 스타일은 자기가 책임진다. 더 명확한 이름 스타일 충돌(및 클래스명 충돌) 걱정 및 벤더프리픽스 걱정을 안해도 됨. 이건 명시적이진 않음. className(class)속성을 사용하지 않음. 이건 tailwind같은 프레임워크를 사용하면서도 점차 나타나는 현상.5. 더 나은 개발 경험 예제 아래 프로젝트는 디테일(html의 신기한 기능), 폼, 아바타 카드를 sty..
[CSS][Layout][Relative layout][z-index 관리하기] 해당 게시물은 https://css-for-js.dev/ 코스를 학습하며 정리한 내용입니다. 사전 지식 : 쌓임 맥락 z-index는 특정 조건에서만 효력이 발생한다. 특히 브라우저의 기본 레이아웃인 Flow Layout 모드에선 효력이 없다. https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context Z-index가 관리하기 어려운 이유 내가 언제 어디서 어떤 숫자를 썼더라...? 일반적인 방법 : 높은 Z-index 주기 일반적으로 위와 같이 이미지 위에 카드를 올리고 싶으면, z-index를 주면 된다. z-index는 z축이다. 클수록 위로 튀어나온다. Hello Wor..
[CSS][Layout][Positioned Layout][Stacking Contexts : 쌓임 맥락] Q : 브라우저는 어떻게 요소들이 쌓이는 순서를 결정할까? 2단계 프로세스로 생각할 수 있습니다. 먼저 위치가 지정되지 않은 모든 요소가 렌더링됩니다(Flow, Flexbox, Grid...). 다음으로, 위치 지정 요소가 맨 위에 렌더링됩니다 (relative, absolute, fixed, sticky). 플로우 레이아웃 : 겹치지 않는다. 음수 마진을 사용하면 나중 순서가 위에 온다. 플로우 레이아웃은 레이어링을 위한 모드가 아니다. 컨텐츠랑 배경은 별개로 취급된다. A B 상대 레이아웃 모드를 사용하면, 상대 요소가 항상 정적 요소보다 먼저 그려진다. 위와 다른 부분은 단 하나다. HTML 삽입 미리보기할 수 없는 소스 .first.box { position: relative; } 둘다 상대 위치..
[CSS][Layout][Positioned Layout][Absolute Positioning] Absolute Positioning을 통해 흐름에서 벗어날 수 있다. 이걸 언제 쓰지? 툴팁, 드롭다운, 모달, 대화상자 등 명백히 문서 흐름에서 벗어난 요소들 기본 위치 만약 displacement를 설정하지 않으면? 원래 Flow Laout시 자기 위치에 쌓여 뒤에 오는 요소를 가린다. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Hello World It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 아래는 어떻게 그려질 지 생각해보자. This ..
[CSS][Layout][Positioned Layout][Relative Positioning] 모든 요소의 기본 포지션은 static(initial)이며, Flow Layout을 따른다. .box { /* Revert to its default value, which is ‘static’ */ position: initial; } 플로우 레이아웃은 기본적으로 모든 요소들을 겹치지 않게 배치하나, 기존 위치에서 벗어나면 겹칠 수 있다. Positioned Layout을 사용하지 않는 레이아웃들은 정적 레이아웃이라 한다.(플렉스박스, 플로우, 그리드) Positiond Layout는 요소들을 겹치게 하기 위해 존재한다. 제목이 곧 내용이다. Relative Positioning .some-box { position: relative; } 해당 클래스가 적용된 요소는 다음과 같은 기능을 한다. 자식들을..
[CSS][Flow Layout][Flow Layout의 width, height] https://courses.joshwcomeau.com/ Josh W Comeau's Course Platform Not logged in. Please log in to access your course. courses.joshwcomeau.com Width Width의 기본값은 auto다 block level 요소의 기본 너비는 100%이라 생각할 수 있다. 하지만 기본값은 auto다. 위의 경우 크기 (부모컨텐츠너비100%-32px)를 계산하여 화면에 넘치지 않게 보여준다. 아래의 경우 화면 크기를 넘어가는 걸 볼 수 있는데, 이는 box-sizing이 content-box일 경우, 해당 컨텐츠의 크기는 부모의 크기 100%를 갖기 때문이다. 오른쪽으로 16px + 부모컨텐츠너비100%(화면길이)..

티스토리툴바