미디어 쿼리(feat. clamp())
·
공부/HTML, CSS
https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries를 읽고 정리한 문서입니다.미디어 쿼리문법 구조는 다음과 같다.@media media-type and (media-feature-rule) { /* CSS rules go here */}media-type : 미디어 유형(ex: 인쇄 또는 화면)media-feature-rule : css 규칙이 적용될 조건(ex: min-width: 1024px)CSS rules : 조건문을 통과하고 미디어 유형이 올바른 경우 적용되는 CSS 규칙 집합보통 쓰는 syntax@media all and (min-width: 특정px) { .클래스 { /* css properties */}medi..
효과적으로 프롬프트를 작성하는 방법(feat. ChatGPT Prompt Engineering For Developers)
·
공부/AI
ChatGPT Prompt Engineeering For Developers의 Guidelines 강의를 듣고 정리한 문서입니다.효과적으로 프롬프트를 작성하는 원칙명확하고 구체적인 지시 작성모델에게 생각할 시간 주기명확하고 구체적인 지시 작성을 위한 네 가지 전략```, """, ,  , : 와 같은 구분자를 사용하여 입력의 구분된 부분 명확하게 표시하기ex)text = f"""You should express what you want a model to do by \\ providing instructions that are as clear and \\ specific as you can possibly make them. \\ This will guide the model towards the des..
React 스타일 툴 장단점 정리
·
공부/리액트
인라인 스타일리액트 jsx 안에 style 프로퍼티로 스타일을 정의하는 것.장점동적 스타일링 용이 : state를 활용해 스타일을 다르게 주고 싶을 때 쉽게 조정 가능스코핑 자동화 : 인라인 스타일은 해당 컴포넌트에 직접 적용되므로 스타일의 충돌을 걱정할 필요가 없다.추가 설정 불필요 : CSS 파일을 별도로 관리하거나 로드할 필요가 없다.단점성능 이슈 : CSS 클래스를 사용하는 것보다 브라우저의 스타일 계산 비용이 더 클 수 있다. 각 컴포넌트 인스턴스마다 스타일이 복제되어 DOM 요소가 많은 페이지에서는 성능 저하를 초래할 수 있다.재사용성 제한 : 같은 스타일을 여러 컴포넌트에서 사용하고 싶은 경우, 각 컴포넌트에 동일한 스타일 규칙을 반복해서 적용해야 한다.유지 관리의 어려움 : 스타일 관련 코..