본문 바로가기

👁‍🗨FRONT-END/🎨CSS10

[styled-components] props 사용법 총정리!! A. 사용할 Button 컴포넌트 생성 // Button/index.jsx import * as S from "./button.style.js"; export const Button = ({ children, ...props }) => { return ( {children} ); }; // Button/button.style.js interface ButtonProps { width?: string; size?: string; color: string; } export const Button = styled.button` display: flex; width: ${(props) => (props.width ? props.width : "auto")}; align-items: center; justify-.. 2023. 7. 18.

가상요소 선택자 ::before, ::after 가상 요소란 선택자 (Pseudo-elements) 선택자에 추가하는 키워드로, 선택한 요소(element)의 일부에만 스타일을 적용한다. 즉, 선택한 요소 전체에 스타일을 적용하는 것이 아니라, 요소의 일부에만 스타일을 적용합니다. 다시 말해, HTML에 새로운 요소(element)를 추가한 것처럼 동작합니다. 그 중 가장 대표적인 ::before 와 ::after 의 사용 예시에 대해서 알아보자 가상 요소 사용법 가상 요소는, ::before, ::after, ::first-letter 와 같이 앞에 '::'를 붙여서 표기합니다. import React from "react"; import './App.css'; function App() { return ( Hello Hello ); } export.. 2022. 12. 10.

CSS에서 margin과 padding Margin과 Padding 차이 [날마다 3분 CSS] 글자와 상자 인라인 & 블록 HTML 요소가 화면에 출력되는 특성은 크게 2가지로 구분된다 인라인(Inline) 요소 : 글자를 만들기 위한 요소들. 블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들. 인라인 요소 ( greenteafrog.tistory.com 위의 포스트를 통해 글자와 상자를 이해한 뒤 보면 이해하는데 도움이될 것이다. 설명하기전 브라우저의 개발자도구를 열어서 쉽게 볼 수 있는 HTML 박스모델을 보면서 이해하면 더 쉽다. 👁‍🗨한줄요약 각 HTML 요소간의 간격을 margin , 보더(요소의 테두리선)와 요소와의 간격을 padding 이라고 한다. 예를들어 네모박스(보더)안에 글자가 있는 박스 여러개가 가로로 줄.. 2022. 10. 26.

[날마다 3분 CSS] CSS 선택자 #가상클래스 선택자 시작 가상(Pseudo) 클래스는 클래스, 또는 태그명 선택자 뒤에 콜론(:) 을 붙여서 표시하는 특별한 요소의 상태, 또는 요소의 순서를 기준으로 자식 요소를 선택하는 방법을 기술한 것이다 또한, 가상 클래스 선택자는 실제로 Html에 존재하지 않는 클래스지만 마치 클래스를 놓은것 처럼 작동한다고 하여 가상 클래스 선택자라고 부른다. 자주 사용하는 가상 클래스 선택자의 종류 :hover 마우스의 포인트가 올라간 HTML요소에 대한 상태를 정의한다. p:hover, a:hover, .class:hover 과같이 선택자 뒤에 :hover을 붙여 사용한다. 아래 예시에서 a태그 요소에 마우스를 올리면 글자 색깔이 빨간색으로 바뀌게 된다. 💫예시 a:hover { color: red; } :active act.. 2022. 10. 19.

이전 1 2 3 다음

티스토리툴바