[jquery] 각종 함수들

들어가기에 앞서 라이브러리 의미 : 자주 사용되는 함수들의 모임(묶음) jquery 배경 : 1) 웹브라우저(익스플러워, 크롬, 사파리 등) 간에 js 문법잘 동작을 안했음 (크로스 브라우저 문제 => jquery 등장)현재는 바닐라 js 가능 2) 바닐라 js 보다 코딩이 짧고 사용이 쉬움 단점 : 용량이 크고 , 성능이 떨어짐 jquery : 함수를 이용해서 DOM 조작 $(function() {jquery실행문} : html 위쪽에 넣어도 실행된다. => html 태그 보다 뒤 늦게 실행을 시켜주는 구문 - jquery cdn : 인터넷 주소로 자동 다운로드 입력 필수 - 사용법 : $(function() { $(css선택자).함수("속성명", "값"); }); jq selecter html DOC..

• format_list_bulleted Jquery
• · 2023. 8. 27.
• textsms

[CSS]

ani transition (애니메이션효과) html DOCTYPE html> Document css .box { /* 가로 */ width: 100px; /* 세로 */ height: 100px; /* 배경색 */ background-color: blue; /* 외곽선 */ border: 1px solid black; /* 바깥여백(축약식) - 중앙정렬 */ /* margin: 상하 auto */ margin: 20px auto; /* TODO: 애니메이션 추가 */ /* transition-property: 애니메이션효과를 부여할 속성 나열 */ /* 사용법 : trasition-property: 속성, 속성2 ... */ transition-property: width, height; /* 지속시간..

• format_list_bulleted Css
• · 2023. 8. 16.
• textsms

[CSS] 홈페이지 만들기

기본 속성들 padding(안쪽 여백) margin(바깥 여백) width(가로) height(세로) float(배치) clear(float 초기화) Homepage Layout html DOCTYPE html> Document 사이트 제목 사이드바 본문 꼬리말 css /* 여백 초기화 */ * { padding: 0; margin: 0; } /* 전체 페이지 크기 정하기 */ #container { /* 가로 */ width: 1200px; /* 중앙 정렬 auto (오른쪽/왼쪽 여백을 똑같이 정함(중앙 정렬이 됨))*/ /* 사용법 : margin: 상/하 auto */ margin: 20px auto; } /* 머리말 */ #header { /* 세로 */ height: 120px; /* 임시 */..

• format_list_bulleted Css
• · 2023. 8. 14.
• textsms

[CSS]특수 선택자, 가상 선택자 글꼴, 선택자 우선순위, div ,span

exam_train html DOCTYPE html> Document 열차표 예매 열차번호 출발 도착 출발시간 특실 일반실 소요시간 199 수원 대전 10:00 01:44 230 수원 대전 11:30 01:38 css table { /* 테이블 선사이 간격 붙이기 속성 */ border-collapse: collapse; /* 가로 크기 */ /* 화면단위 : px(고정크기), %(반응형단위) , vw(가로, viewport width), vh(세로, viewport height) */ /* viewport : 모니터의 화면(pc 모니터에 맞추어 보임, 테이블에 맞추어 보임) */ /* 예) 코딩 시 100vw(가로) -> pc , 테블릿 등에서 적절하게 화면을 맞추어 줌 */ width: 610px; ..

• format_list_bulleted Css
• · 2023. 8. 9.
• textsms

[CSS] box collapse schedule

box exam 8 html DOCTYPE html> Document 이용요금 행복카드 소지자는 본인 확인 후 입장료 30% 할인 만 5세 이하, 만 65세 이상 무료 단체는 30인 이상 30% 할인 단체 관람 시 인솔 교사는 무료 css /* 문제 풀이 : 예제 (모든 태그에 박스 적용하기) */ body { /* 사용법 : border: 선두께 선스타일 선색상 */ border: 1px solid red; } h3 { border: 1px solid blue; } p { border: 1px solid green; } ul { border: 1px solid red; } li { border: 1px solid blue; } box exam 9 html DOCTYPE html> Document 이용요..

• format_list_bulleted Css
• · 2023. 8. 8.
• textsms

[CSS] 폰트, 밑줄, 글자 속성, 정렬

exam 1 html DOCTYPE html> Document 제목 글자 안녕하세요 또만났군요 css /* 문제 풀이 : 태그 */ h1 { color: red; } p { color: blue; } class html 사과 바나나 오렌지 감 css /* 클래스 선택자 */ /* id선택자 vs class선택자 차이 id선택자 : 중복 불가(이름) class선택자 : 중복 허용(이름) ,실무 디자이너 사용 */ /* 사용법 : .클래스명 { 속성:값; } */ .select { color: red; } 결과 exam css1 html 웹 기획 과정 - 사용자 층 분석과 사이트 목적 - 콘텐츠 설계 - 스토리보드 제작 css h3 { /* 글자색 */ color: blue; /* 폰트 스타일 : 맑은 고딕..

• format_list_bulleted Css
• · 2023. 8. 4.
• textsms