공부
-
[React] useState 함수공부/React 2024. 1. 31. 18:48
useState : React에서 state값을 추가하고 업데이트하는 데 사용되는 함수 - useState를 사용하면 함수형 컴포넌트에서도 컴포넌트의 상태를 관리가능하다. - 단, 하나의 useState는 하나의 상태 값만 관리할 수 있어 만약 컴포넌트가 여러개면 useState를 여러번 사용해야한다. - State를 이용해서 값을 변경하면 비동기로 처리된다.(비동기: 응답과 관계없이 다음 동작을 처리하는 방식) - state는 반드시! 변경 함수를 이용해서 값을 변경해줘야한다. ( 주로 복사하는 형태를 이용) 내가 이해한 상태값이란 사용자가 간에 주고 받는 데이터를 상태값이라고 하는것 같다. //기본형식 let [기본값(상태값(초기값)), 변경값] = useState(초기값); 1. 예시 : useSt..
-
[React] JSX(Javascript Syntax eXtension) 문법공부/React 2024. 1. 30. 16:50
(1). 정의 JSX(Javascript Syntax eXtension) : Javascript 를 확장한 문법, 리액트 프로젝트를 개발할 때 사용한다. Javascript의 공식적인 문법은 아니다. (2). 장점 JSX는 하나의 파일에 HTML과 Javascript를 동시에 작성하기에 생산성을 높여준다. 그리고 가독성이 좋다는 점과 오류검출이 쉽다는 장점이 있다. (3). 문법 1. 자바스크립트 표현식을 사용(포함)할 수 있다. 자바스크립트 표현식을 작성하면 JSX내부에서 코드를 {}로 감싸면 사용가능하다. {} 이런형태로 변수를 넣는 문법을 데이터 바인딩이라고 한다. function App() { const greeting = 'Hello world'; return ( {greeting} ); 2. ..
-
[HTML/CSS] CSS Sass(Syntactically Awesome Stylesheets)란?공부/Html OR CSS 2024. 1. 20. 20:57
1. 정의 CSS의 확장된 버전으로, 스타일 시트를 더 효율적으로 작성할 수 있게 해주는 스타일 시트 언어 2. 기본 문법 변수 (Variables) 문법을 이용하면 다음과 같은 형태로 변수를 생성해서 사용가능하다. $primary-color: #3498db; $font-size: 16px; body { background-color: $primary-color; font-size: $font-size; } 중첩 규칙(Nesting)을 사용하면 시각적으로 부모-자식관계를 확인하기 편해 가독성이 좋은 CSS를 작성가능하다. nav { ul { margin: 0; padding: 0; list-style: none; li { display: inline-block; margin-right: 10px; a {..
-
[HTML/CSS] Shadow DOM (쉐도우 돔) 이용한 디자인공부/Html OR CSS 2024. 1. 17. 20:53
1. Shadow DOM 웹 요소의 스타일과 구조를 캡슐화하기 위해 사용하는 기술 *캡슐화 : 외부로 부터 웹요소를 보호하고 독립적으로 유지하기 위해 DOM으로 감싼 과정을 의미 2. 왜 쓰는걸까? DOM API는 자체적으로 캡슐화를 지원하지 않는다. 즉, 캡슐화를 하지않으면 다른 요소간 겹쳐서 충돌이 발생할 수도 있다는 점이 있어 이를 개선하기 위해? 사용하는것 같다. Shadow DOM을 이용하면 외부 스타일과 격리되기 때문에 컴포넌트 내부에서 스타일을 정의하고 보수가 가능하다. 3. 기타 용어 Shadow host : shadow DOM이 부착되는 일반적인 DOM 노드 Shadow tree : shadow DOM 내부의 DOM 트리 Shadow boundary : shadow DOM이 끝나고, 일반..
-
[HTML/CSS] 컨텐츠 요소 가운데 정렬하는 방법공부/Html OR CSS 2024. 1. 13. 20:38
1. Margin을 이용해서 수평 가운데 정렬하기 //수평 가운데 정렬 display: block; margin-top: 30px; margin-left: auto; margin-right: auto; 2. text-align 속성을 이용한 가운데 정렬 (인라인 요소 정렬) .center { text-align: center; } /* */ 3. Flexbox 속성을 이용한 가운데 정렬 display flex 속성을 사용하면 여러 상황에서 중앙 정렬이 매우 편리하다. .container { display: flex; justify-content: center; align-items: center; } 4. div 요소 안의 div 가운데 정렬 .outbox{ text-align: center; } .in..
-
[HTML/CSS] 기존 CSS 파일(속성) 수정하기공부/Html OR CSS 2024. 1. 13. 18:56
기존의 레거시 코드를 수정할 때 원본파일을 건들지 못하는 경우 같은 클래스명 하단에 쓰기 우선순위 높이기 Specificity(특이성) 다음과 같은 방법을 택해서 수정하게된다. (1). 같은 클래스 명 하단에 쓰기 같은 클래스명이라도 하단에 정의한 클래스 명/스타일을 우선 적용한다. 따라서 하단에 명시해서 수정하도록 한다. See the Pen Untitled by 익명계정 (@puwifgaj-the-vuer) on CodePen. (2). 우선 순위 높이기 해당 순으로 왼쪽부터 제일 우선순위가 낮다. tag
-
[HTML/CSS] Flex 속성(align-items,align-content,align-self, justify-content)공부/Html OR CSS 2024. 1. 13. 00:23
Flex : flexbox의 레이아웃을 설정하는데 사용하는 속성 1. flex-drirection : flex-item의 방향을 설정하는 옵션 ( 명시하지 않으면 기본적으로 row 배치다.) .container { flex-direction: row; /* 기본값, 아이템들이 수평으로 배치 */ /* flex-direction: column; */ /* 아이템들이 수직으로 배치 */ } 2. justify-content : flex-item을 정렬시키는 옵션 .container { justify-content: flex-start; /* 기본값, 시작 부분으로 정렬 */ /* justify-content: center : 가운데 정렬 */ /* justify-content: flex-end : 끝 부분으..
-
[HTML/CSS] 색상 그라이데이션 넣기 (linear-gradient)공부/Html OR CSS 2024. 1. 11. 01:50
linear-gradient : 그라데이션 색상을 넣고 싶을 때 사용하는 옵션이다. 1. 예시 background-image: linear-gradient(blue,pupple); 기본적으로 방향을 생략하면 to bottom이 적용된다. 따라서 위에서 부터 아래로 이어지는 형태로 색상이 만들어진다. 예시 2. background-image: linear-gradient(80deg, yellow 20% ,blue 80%); deg : 방향을 오른쪽으로 진행한다. (+인 경우) yellow 20% ,blue 80% : 노랑을 20% 지점까지 표시, 블루를 80% 지점부터 표시 예제3. background-image: linear-gradient(-45deg, green 20%, red 20% 50%, gre..