[JavaScript] 팝업 창 열기, 닫기, 이동하기, 모니터 해상도, 웹 브라우저 크기, 스크롤 이동

window open html DOCTYPE html> 새창(새탭) 열기/닫기, 새창/새탭 금지(웹브라우저 설정) #container { width: 300px; margin: 20px auto; } button { border: 1px solid #222; padding: 15px; font-size: 0.8em; margin-right: 20px; } 팝업 창 열기 팝업 창 닫기 notice html DOCTYPE html> 공지사항 #content { border: 2px double skyblue; border-radius: 10px; padding: 10px; } ul { margin-left: 15px; list-style-type: none; } ul li { margin: 10px 5px;..

• format_list_bulleted JavaScript
• · 2023. 8. 26.
• textsms

[JavaScript] 함수, 객체

exam7 html DOCTYPE html> Document js // 문제 // 연습문제 1) // 현재 날짜를 아래와 같이 주어진다. // 12시 이전이면 "오전입니다." 라고 출력하고, // 12시 이후이면 "오후입니다." 라고 출력하는 // 프로그램을 코딩하세요. // let date = new Date(); // let hour = date.getHours(); // if(hour Document js // 객체 : 실생활에서 보이는 모든 것을 객체라고 함 // 예) 사람, 사물 등 // 객체의 요소 : 1) 속성(특징나타냄, 90%), 2) 함수(행동, 동작) // 비교) css 사용법 // 선택자 { // 속성: 값; // 속성2: 값2; // ... // } // TODO): 객체 사용법(..

• format_list_bulleted JavaScript
• · 2023. 8. 21.
• textsms

[JavaScript] for문, 반복문 예제

기본함수 입력받는 함수 prompt 특수문자는 \붙이기 // 문자열 특수문자 : \(역슬래쉬) // 특수문자 사용법 : \영문자 소수점 자르기 함수 : 숫자.toFixed(자를자리수) 자르기 함수 .split("자를문자") for문 html DOCTYPE html> Document js // 반복문 : for문(80%) // 왜? 같은 명령문을 많은 횟수를 출력하고 싶을 때 사용 // 예) alert("Hello"); // 10번출력 // 사용법 : 초기값을 조건식에 넣어 판단해서 참이면 반복하고, // 거짓이면 중단함 // for(초기값; 조건식; 증감식) { // 반복문(문장); // } // 예제) 안녕하세요를 3번 출력하세요 // 단, 반복문을 사용하세요 // for(let i=0; iDOCTYP..

• format_list_bulleted JavaScript
• · 2023. 8. 17.
• 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