반응형 ⭐ 코딩 기초25 ⚛️ JSX, 컴포넌트(Component) 개요 JSX JSX란? 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JS의 확장 HTML과 비슷한 개발 경험을 제공하나 JS,HTML과는 다름 JS는 Babel에 의해서 Transcompile 되어 JS가 된다 JSX의 장점 개발자 편의성 향상 협업에 용의 / 생산성 향상 문법오류와 코드량 감소 JSX 특징 / HTML과의 차이점 HTML 태그 내에 JS 연산 class -> className 스타일은 object로 닫는 태그 필수 최상단 element는 반드시 하나 (간단히 라고 입력해도 됨) JSX 예시 const element = ( Hello, elice! ); 객체 표현 방식으로도 가능은 하지만 안 쓰임 (Babel에 의해 객체 표현으로 바뀜) 엘리먼트 렌더링 ReactDOM.render(e.. 2023. 4. 15. ⚛️ React란? React 입문하기! SPA(Single Page Application) 전통적인 페이지에서는 변경이 필요할 때 서버에서 요청(Form Post)받으면 HTML을 클라에 전달하며 페이지를 처음부터 다시 불러오게 됨 SPA는 데이터 전달을 서버로 데이터 전달을 AJAX 통신으로 하며, 변경이 필요한 부분만 JSON으로 전달하며 변경된 부분만 수정. React의 기본 Compoent React에서 서비스를 개발할 때 독립적인 단위로 쪼개어 구현, 후에 조립 Virtual DOM 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념 뒤에서 미리 그려보고 바뀐 부분만 다시 그려줌 JSX JS 내에서 HTML과 유사하게 UI 작성 쉽게 가능 React의 역사 페이스북은 성.. 2023. 4. 14. 📱 CSS 미디어 쿼리 요약! 미디어 쿼리란? 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문 (자연스러운 변화는 반응형, 끊기는 변화는 적응형) 브라우저 가로폭에 따라 CSS 속성이 달라지도록 함 .media { /* PC의 경우 */ background-color: red; } /* 미디어쿼리 */ @media (min-width: 320px) and (max-width: 800px) { /* 모바일의 경우 */ background-color: yellow; } min-width와 max-width로 브라우저 가로폭 설정 브라우저의 가로폭이 최소 320px, 최대 800px이 되었을 경우, 중괄호 안의 css 속성으로 대체 미디어쿼리 테스트 방법 크롬 개발자 도구 이용 미디어쿼리 사용시 주의사항 viewport 입력하.. 2023. 4. 10. 📐 레이아웃에 영향을 미치는 CSS 속성 (display, float, clear) display : Block과 Inline 바꿈 p { display: inline; } a { display: block; } a { display: inline-block; } inline-block은 둘 다 inline, block, inline-block에 대한 차이는 아래 글 참고 🖥️ HTML 인라인(Inline), 블록(Block) 비교하기! HTML 태그의 성격에는 두 가지가 있습니다. 바로 인라인(Inline)과 블록(Block)입니다. 이 둘의 차이점에 대해 알아봅시다! ⭐ 인라인(Inline) 특징 See the Pen blog/inline html by dobbyjang0 (@dobbyjang0) on CodePen. x programming4myself.tistory.com flo.. 2022. 9. 25. 🎞️ CSS 애니메이션(Animation) 요약! CSS로 애니메이션을 줘보자 애니메이션(Animation) 이란? 한 CSS 스타일에서 다른 CSS 스타일로 부드럽게 전환시켜 주는 것 애니메이션은 로드된 이후 바로 시행됨. 그러나 설정으로 조건에 따라 일어나게 만들 수도 한 번만 일어나게 할 수도, 아님 계속 반복하게 할 수도 있음 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임으로 구성 🐍 prefix 작성시 유의사항 : prefix 똑같이 달아야함 CSS에서 애니메이션 사용하는 방법 키프레임 작성하기 @keyframes namehere { from { margin-left: 100%; width: 300% } to { margin-left: 0%; width: 100%; } } 키프레임이란 애니메이션의 중간 상태를 .. 2022. 9. 25. 🎞️ CSS 트랜스폼(Transform)과 트랜지션(Transition) 요약! 인터렉션 디자인에 유용한 트랜스폼, 트랜지션, 애니메이션 CSS 트랜스폼 ⭐ 트랜스폼(Transform)이란? .transition { transform : rotate(45deg); transform : scale(2, 3); } 특정 오브젝트를 각도를 튼다거나 크기나 위치를 변경하는 것 단독으로 사용할 경우 변형 과정이 보이거나 하지는 않음 transform : 함수명(변수); 형식으로 입력 🐍 행렬 변환? ⭐ 트랜스폼의 종류 2D 트랜스폼 ⭐ translate(tx, ty) : 지정된 크기만큼 x축과 y축 이동, trnaslateX(tx), translateY(ty) ⭐ scale(sx, sy) : 지정된 크기만큼 x축과 y축으로 확대 축소 scaleX(sx), scaleY(sy) ⭐ rotate(.. 2022. 9. 25. 이전 1 2 3 4 5 다음 반응형
