[HTML] 비디오 태그 - <video>

비디오 태그 (video) - 비디오를 웹 페이지에 포함할 때 사용 - 태그와 달리 닫는 태그 필요 - 여는 태그와 닫는 태그 사이에 적힌 텍스트는 브라우저가 비디오를 로드할 수 없는 경우에만 표시됨 src : 비디오의 위치, 주소 추가하는 속성 controls : 일시 중지, 재생과 같은 기본 비디오 컨트롤을 포함하도록 브라우저에 지시하는 속성 autoplay: 페이지가 로드되자마자 동영상이 자동으로 재생되는 속성 loop: 이 속성을 사용하면 비디오가 계속해서 반복해서 재생되는 속성 비디오를 로드할 수 없습니다. Video not supported

• format_list_bulleted Front-end/HTML
• · 2023. 9. 5.
• textsms

[HTML] 영역 정의 태그 - <div>

div 태그 - HTML 요소 그룹화하는 데 사용 - 시각적 표현 없음 - 사용자 정의 스타일 적용할 때 유용 This is a heading in a div element This is some text in a div element.

• format_list_bulleted Front-end/HTML
• · 2023. 9. 5.
• textsms

[React] 실습 - 댓글 컴포넌트 만들기

- Comment.jsx import React from "react"; const styles = { wrapper: { margin: 8, padding: 8, display: "flex", flexDirection: "row", border: "1px solid grey", borderRadius: 16, }, imageContainer: {}, image: { width: 50, height: 50, borderRadius: 25, }, contentContainer: { marginLeft: 8, display: "flex", flexDirection: "column", justifyContent: "center", }, nameText: { color: "black", fontSize: 16,..

• format_list_bulleted Front-end/React
• · 2023. 5. 24.
• textsms

[React] 실습 - 시계 만들기

- Clock.jsx import React from "react"; function Clock(props) { return ( 안녕, 리액트! 현재 시간: {new Date().toLocaleTimeString()} ); } export default Clock; - index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Clock from './chapter_04/Clock'; const root = ReactDOM.createRoot(d..

• format_list_bulleted Front-end/React
• · 2023. 5. 24.
• textsms

[React] JSX 정의, 장점, 사용법

JSX - JavaScript + XML/HTML - XML/HTML 코드를 JavaScript로 변환하는 역할 React.createElement() : React Element 객체 생성 : JSX 코드를 createElement() 코드를 사용하도록 변환 React.createElement( type, [props], [...children] ) // JSX 사용 Hello, {name} // JSX 사용 안함 React.createElement('div', null, 'Hello, ${name}') JSX 장점 코드 간결성 가독성 향상 - 버그 발견 쉬움 Injection Attacks 방어 - 보안성 증가 JSX 사용법 - XML/HTML을 사용하다가 자바스크립트를 사용하고 싶으면 {중괄호} 이..

• format_list_bulleted Front-end/React
• · 2023. 5. 24.
• textsms

[React] create-react-app

create-react-app - 리액트로 웹 애플리케이션을 개발하기 위한 모든 설정이 되어 있는 상태로 프로젝트 생성 - Node.js v14.0.0 이상, npm v6.14.0 이상, vs code 필요 1. 리액트 폴더 생성 - vs code의 터미널에 아래 코드 입력 - 에 원하는 폴더 이름 넣기 npx create-react-app 2. 폴더로 이동 - 생성한 리액트 폴더로 이동 cd / 3. 리액트 애플리케이션 실행 npm start

• format_list_bulleted Front-end/React
• · 2023. 5. 17.
• textsms

[React] HTML 코드에 직접 리액트 연동

HTML 코드에 직접 리액트 연동 - 화면에 Hello World! 표시 - Click here이라고 적힌 버튼 생성 - 버튼을 클릭하면 Clicked로 변경되도록 함 1. DOM Container(Root DOM Node) 추가 - virtual DOM의 시작점인 DOM Container를 태그 내에 추가 Hello world! 2. 리액트와 리액트 컴포넌트 가져오기 Hello world! 3. 리액트 컴포넌트 제작 - MyButton.js 라는 이름의 파일 생성 후 다음 코드 입력 function MyButton(props) { const [isClicked, setIsClicked] = React.useState(false); return React.createElement( 'button', {o..

• format_list_bulleted Front-end/React
• · 2023. 5. 17.
• textsms