css3 [TypeScript]나만 보는 TypeScript 기초 메모장(Styled-components 기본) 장점동적 스타일링 : props를 이용해 컴포넌트 스타일을 동적으로 바꿀 수 있음.컴포넌트 단위 스타일 : CSS가 컴포넌트 내에서 바로 정의되기 때문에, 스타일과 컴포넌트가 더 잘 결합, 유지보수하기 쉬움.자동으로 클래스 이름 해시화 : 클래스 이름이 자동으로 고유하게 변환되기 때문에, 전역 스타일 충돌을 걱정할 필요가 없음.예시:import styled from 'styled-components';const Button = styled.button` background-color: ${props => props.primary ? 'blue' : 'gray'}; color: white; padding: 10px 20px; border: none; border-radius: 5px;`;const.. 2025. 2. 19. HTML 표 태그 구현 - HTML 표 (또는 테이블)는 웹 페이지에서 데이터를 구조화하고 표현하기 위한 강력한 도구입니다. 표는 주로 엑셀이나 달력과 같은 형태로 생각할 수 있으며, 웹 페이지에서 정보를 정리하고 시각적으로 표현하는 데 사용됩니다. HTML에서 표를 만들 때 다음과 같은 기본 태그들을 사용합니다.1. 태그: 표를 정의하는 컨테이너입니다. 태그로 표를 시작하고 닫아야 합니다.2. 태그 (Table Row): 표의 각 행을 정의합니다. 행은 가로 방향으로 데이터를 나타냅니다. 표의 각 행은 태그로 시작하고 닫아야 합니다.3. 태그 (Table Data): 표의 데이터 셀을 정의합니다. 각 셀은 행 내에서 열의 위치를 나타냅니다. 셀 내에 실제 데이터를 입력합니다. 셀은 태그로 정의하고 닫아야 합니다.4. 태그 (.. 2023. 9. 11. [React] 개발 단계에서 렌더링 두 번 발생 원인 및 방지 방법 (참고:해당 설명은 Vitrual Studio 프로그램 기준으로 설명합니다.) 다들 리액트로 개발하면서, 웹 콘솔창에 이유 없이 두 번의 상태값을 보신 적이 있을 겁니다. 어? 나는 아무것도 안 했는데? 이게 왜 뜨지라는 생각을 하였을 겁니다. 렌더링이 무엇이고, 개발 단계에서 두 번 발생하는지도 알아보겠습니다.목록렌더링이란?렌더링 발생 두 번 그 이유는?렌더링 발생 두 번 방지 1. 렌더링이란?웹 개발 관점에서의 렌더링은 웹 개발에서는 주로 "웹 페이지 UI를 생성"하고 "표시하는 과정"을 "렌더링"이라고 합니다. 사용자가 웹 페이지에 접속하거나 상호작용할 때, 브라우저는 웹 페이지의 구조와 스타일을 기반으로 화면에 내용을 그리는 렌더링 과정을 거칩니다.간다히 말씀드리자면, 우리가 웹 브라우저를 열어 .. 2023. 8. 30. 이전 1 다음