개발 블로그🐶🐾

리액트 마크다운 뷰어를 적용했는데, 스타일링이 되어있지 않음. -> 테일윈드 사용하면 모든 html 요소들이 css 리셋되어있기 때문.타이포그래피가 기본적으로 리셋되어있기 때문에  className으로 스타일링 해주지 않는 이상, 아무런 스타일이 적용되어 있지 않음. -> 해결 : tailwindcss에서 제공하는 typography 플러그인 사용하기! https://github.com/tailwindlabs/tailwindcss-typography GitHub - tailwindlabs/tailwindcss-typography: Beautiful typographic defaults for HTML you don't control.Beautiful typographic defaults for HTML ..

https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com 1) Install npm i -D tailwindcss npx tailwindcss init 2)tailwind.config.ts module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins..

https://styled-components.com/ styled-components CSS for the Age styled-components.com * ThemeProvider : styled-components 라이브러리의 일부로, React 컴포넌트 트리 전체에 걸쳐 일관된 테마 적용을 도와줌. React의 Context API를 기반으로 만들어진 컴포넌트 (context 기능을 사용하여 테마 객체를 하위 컴포넌트로 전달) ex)사용자에게 테마를 커스터마이징할 수 있는 옵션을 제공할 때, import styled, { ThemeProvider } from 'styled-components'; // 라이트 테마와 다크 테마 const lightTheme = { backgroundColor: '#..

https://styled-components.com/ styled-components CSS for the Age styled-components.com * styled-components Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로, React 프레임워크를 주요 대상으로 한 라이브러리 (CSS-in-JS 방식을 사용하는 라이브러리에는 Styled Components, emotion, styled-jsx, JSS 등이 있음) * styled-components의 장점 1. 각 컴포넌트에 스타일을 직접 연결하여 CSS를 컴포넌트화, 컴포넌트의 재사용성을 높임 CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다. (모듈성) 2. JavaSc..

- CSS : Cascading Style Sheets : 종속형 시트, 스타일링을 위한 기본 언어로 모든 웹 브라우저는 CSS를 이해하고 렌더링 할 수 있음 HTML 요소의 속성을 변경할 수 있으며, 특정 요소를 선택하기 위한 다양한 선택자를 제공 -> 계층구조: 스타일은 상위에서 하위 요소로, 그리고 왼쪽에서 오른쪽으로 적용, 스타일이 적용되는 규칙을 '캐스캐이딩'이라고 합니다. -> 특성: 애니메이션, 변환(Transformation) 및 전환(Transition)과 같은 고급 스타일링 옵션도 제공 -> 예시 .container { font-family: Arial, sans-serif; color: #333; } .container .header { font-size: 24px; font-weig..

* container-query viewport가 아닌 특정 요소의 크기에 따라 스타일링을 할 수 있는 쿼리 부모 박스 폭에 반응하는 css 작성 가능! (media 쿼리는 브라우저 폭에 대해 반응했는데, 이건 부모 박스 폭에 반응함) container 쿼리를 사용하기 위해선 container-name, container-type 지정이 필요 ex) .card-container{ contain:style layout inline-size; //기준점 } .title{ font-size:30px; } @container(max-width:350px){ //부모박스의 크기가 350px이하이면 적용 .title{ color:grey; font-size:12px; } } 현재 크롬에서는 동작하지 않음 chrom..

졸업 프로젝트 전시회때, 한 교수님께서 모바일 버전에서는 어떻게 되는지 여쭤보셨다. 그때는 모바일 앱을 여쭤본건가 싶었는데 앱 개발은 안하고 웹만 하기로 했어서 그 부분은 안됐다고 말문을 흐렸었다. 이번 프로젝트에서 반응형 디자인을 구현 하면서 문득 그때 그 교수님이 '앱이 아니라 반응형 얘기를 하신건가?' 하는 생각이 들었다. 이번에 과제로 나온 프로젝트에서 반응형 css를 구현하는게 필수였기에 구현하기 위해 반응형 css에 대해 공부 한 내용들이다. 반응형 웹 은 "디바이스 종류(해상도)에 따라 웹페이지 크기가 자동으로 재조정" 되는것을 의미한다. 어떤 환경에서도 그에 맞는 사이즈로 조정되어 사용자가 보기 편리하다는 장점이 있다. 반응형 디자인의 기본은 모바일 기준으로 스타일링을 먼저 하고, 그 다음..

position : absolute; 를 하면 상단을 기준으로 원하는 곳에 아이템을 옮길 수 있음 top:100px; right:200px; 이런식으로 조절 가능 애니메이션을 만들기 위해서는 @keyframes사용하기 .main-image { cursor: pointer; position: absolute; border-radius: 8px; top: 250px; left: 300px; animation: slide 2s; } @keyframes slide { from { left: -100px; opacity: 0; //투명도 } to { left: 50%; transform: translate(-50%, -50%); opacity: 1; } }

관련 개념 : button type으로는 3개가 있음 - submit 폼 전송. 기본값(type 미 지정시) - reset 폼 리셋 - button 기능 없음. 직접 이벤트 핸들러를 정의해야 함. form 태그 내에서 button을 사용할 때 타입 명시가 없다면 기본적으로 'submit' 처리 -> 버튼을 클릭했을 때 새로고침되는 이유 명확한 구분을 위해 submit이 아닌 버튼에는 type="button"을 지정해주는 것이 좋음

* css: 사용자에게 문서를 표시하는 방법을 지정하는 언어 : 스타일, 레이아웃등 ,,, * css 사용방법1. html안에서 style속성 이용 -> 인라인 스타일 2. style태그를 통해 문서 내부 이용 -> 내부 스타일 시트 3. 별도 css파일로 분리하여 연결 -> 외부 스타일 시트 -> html은 문장의 구조를 만들고, css는 어떻게 보여줄지 지정(스타일링) * 형식선택자 { 프로퍼티 : 값} ex. button { color : white} * 수치값 표현1. 고정값 - 픽셀 (px) 2. 상대값 - em : 상위 엘리멘트가 기준, 상위 엘리멘트 폰트 사이즈가 10px이면, 2em은 20px, - rem : 항상 최상위 엘리멘트가 기준, 최상위에 폰트 사이즈가 없으면 chrome기준 16..