table 태그 이용해서 작성 class에 테이블의 효과 + table-부트스트랩 표형식 🔵 테이블 테마 table-striped 무늬 효과 table-bordered 테두리 효과 table-hover 마우스 효과 table-dark 어두운 테마 table-borderless 선제거 🔵 각 줄에 효과 전체, 각행 등에 적용 가능 table-primary table-success table-danger table-info table-warning 🔵 공지사항 등에서 작은 표 작성할 때 table-sm 작게 효과 🔵 table 구성 기본 tr(행) > td(칸) html5 table>thead(tr>th)(제목) = tbody(tr>td)(본문) = tfoot(tr>td)(분석 결과)

🔵 부트스트랩에서 제공하는 버튼 여백값 0~5, auto 여백명 방향 - 크기 ==> 클래스에 적용 m 바깥여백 p 안쪽여백 t 위쪽 b 아래쪽 l 왼쪽 r 오른쪽 x 왼쪽과 오른쪽 y 위와 아래쪽 🔵 버튼 종류 (총 9가지) input, button 태그 사용 class를 이용해서 모양 및 효과 설정 class에 여러 개의 값을 지정은 빈공백으로 구분해서 나열 btn 버튼모양 btn-primary 버튼색상 (일반적인 동작 처리 할 때 사용) btn-secondary 보조 동작 (취소) btn-success 성공(작업 후 처리가 완료) btn-danger 위험(삭제 등 실수할 수 있는 작업) btn-warning 경고 (수정, 삭제에 확인이 필요한 작업) btn-info 정보(추천, 댓글수, 신제품.. ..

HTML 태그(tag) HTML 요소(element)라고도 부르며, HTML 문서를 구성하는 기본 단위 🔵 HTML 구성 관련 주석(comment) 해당 문서(document)의 타입을 정의 HTML 문서의 루트 요소(root element)를 정의 해당 문서에 대한 정보인 메타데이터(metadata)의 집합 문서나 특정 섹션의 헤더(header)를 정의 해당 문서의 제목(title)을 정의 해당 문서의 콘텐츠 영역을 정의 문서나 특정 섹션의 푸터(footer)를 정의 🔵 페이지 이동 관련 다른 콘텐츠와 연결되는 하이퍼링크(hyperlink)를 정의 미지 맵(image-map)에서 하이퍼링크가 연결될 영역을 정의 해당 문서와 외부 소스(external resource) 사이의 관계를 정의 다른 페이지 또..

layouts 폴더 layout.html fragments 폴더 ▪️ header.html 👉 상단고정 ( fixed-top) ▪️ footer.html templates 폴더 index.html 본문 내용

이벤트리스너 웹 페이지의 상호 작용을 처리할 수 있게 해 줌 특정 사용자 행동에 응답하는 역할 // 버튼 클릭 시 메시지 출력 function showMessage() { alert('안녕하세요!'); } // 웹 페이지 로딩 시 실행 window.onload = function() { // 버튼에 이벤트 리스너 추가 var button = document.getElementById('myButton'); button.addEventListener('click', showMessage); }; Click 이벤트 리스너 사용자가 요소를 클릭할 때 발생 element.addEventListener('click', function() {...}); Change 이벤트 리스너 입력 필드나 선택 상자 등의 값이 ..

document 웹 페이지의 문서 객체 모델(Document Object Model, DOM)을 나타내는 JavaScript의 내장 객체 중 하나 HTML 문서의 구조를 표현하고, JavaScript를 통해 이 구조에 접근하고 조작할 수 있게 해주는 인터페이스를 제공 웹 페이지의 전체 문서를 나타내며, 해당 문서 내의 요소들에 접근하고 조작할 수 있는 다양한 메서드와 속성을 제공 JavaScript로 HTML 문서를 동적으로 조작 * 요소 선택 document.getElementById( ) 지정된 ID를 가진 요소를 선택 var myElement = document.getElementById('myId'); document.getElementsByClassName( ) 지정된 클래스를 가진 모든 요소를..