프론트개발자(5)
-
[HTML/CSS/JS] 달력 (calendar) 만들기
학사일정 2017년 6월 일 월 화 수 목 금 토 1 2 3 4 5 6 7 8 9 특강 10 11 12 13 14 기말고사 15 기말고사 16 기말고사 17 기말고사 18 기말고사 19 20 21 하계방학 22 23 24 25 26 27 28 29 MT 30 MT 31 body { color: #444444; font-size: 12px; font-family: '돋움', 'Dotum'; } table, th, td { border: 1px solid #aaaaaa; } table { border-collapse: collapse; } tr { height: 60px; vertical-align: top; } td { width: 76px; padding: 5px; } .bar-container { wi..
2024.01.08 -
[HTML/CSS/JS] table 생성
🔵 실습 1 더보기 HTML 삽입 미리보기할 수 없는 소스 영어 교재 안내 수강레벨 코스 A 코스 B 수강기간 세부내용 보기 레벨1 Side by Side 1 American Headway 1 1개월 세부내용보기 레벨2 Side by Side 2 American Headway 1개월 세부내용보기 레벨3 Exploring English 1 2개월 세부내용보기 레벨4 Exploring English 2 2개월 세부내용보기 table, th, td { border: 1px solid #e6ecd4; border-collapse: collapse; } table { color: #444444; font-size: 12px; font-family: '돋움', 'Dotum'; } tr { height: 30px; ..
2024.01.08 -
[HTML]table 태그
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)(분석 결과)
2024.01.07 -
[HTML] button 태그
🔵 부트스트랩에서 제공하는 버튼 여백값 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 정보(추천, 댓글수, 신제품.. ..
2024.01.07 -
[JavaScript] 이벤트 리스너 종류
이벤트리스너 웹 페이지의 상호 작용을 처리할 수 있게 해 줌 특정 사용자 행동에 응답하는 역할 // 버튼 클릭 시 메시지 출력 function showMessage() { alert('안녕하세요!'); } // 웹 페이지 로딩 시 실행 window.onload = function() { // 버튼에 이벤트 리스너 추가 var button = document.getElementById('myButton'); button.addEventListener('click', showMessage); }; Click 이벤트 리스너 사용자가 요소를 클릭할 때 발생 element.addEventListener('click', function() {...}); Change 이벤트 리스너 입력 필드나 선택 상자 등의 값이 ..
2023.12.22