[HTML] 테이블 태그(3) - 테이블 테두리 추가

테이블 테두리 1. 의 border 속성 추가 내용 01 02 2. CSS 사용 table { border: 1px solid black; } table, td { border: 1px solid black; }

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

[HTML] 테이블 태그(2) - colspan, rowspan 속성

colspan 속성 - , 에서 주로 사용 - 데이터가 여러 열에 걸쳐 있을 때 사용 - 범위에 걸쳐 있는 열의 개수를 입력받음 코드 coffee tea latte Americano herb tea strawberry latte colspan 속성 - , 에서 주로 사용 - 데이터가 여러 행에 걸쳐 있을 때 사용 - 범위에 걸쳐 있는 행의 개수를 입력받음 코드 coffee tea latte Americano Herb tea Strawberry latte Cold brew Matcha latte

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

[HTML] 테이블 태그(1) - <table>, <tr>, <td>, <th>, <tbody>, <thead>, <tfoot>

테이블 태그 (table) - 데이터를 포함하는 셀들의 행과 열로 구성된 2차원 테이블 생성할 때 사용 태그 - 테이블 생성 태그 - 테이블에 행 추가 태그 - 테이블에 데이터 추가 - 테이블 행, 열 내에 위치해야 함 Americano Herb tea Strawberry latte 태그 - 테이블의 행과 열에 제목 추가 scope : 제목이 어느 곳에 위치할지 결정하는 속성 제목 : 행의 제목 제목 : 열의 제목 coffee tea latte Americano Herb tea Strawberry latte 태그 - 테이블 데이터를 섹션화 - 테이블이 커져 많은 데이터를 포함할 때 사용 - 데이터를 한 개 이상 포함해야 함 coffee tea latte Americano Herb tea Strawberr..

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

[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] 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] 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