alert console.log console.log 는 자동 줄바꿈 alert는 \n 적어야함 html DOCTYPE html> Document js // TODO: 화면 출력 방법 (결과 확인용) // 1) 사용법 : alert("문자열") // 코딩 용어 : ;(세미콜론), :(콜론), &(엔퍼센트) // 자바스크립트(js) 명령문(문장)의 끝에 ;(세미콜론) 붙임(생략가능) // 주석 단축키 : ctrl + / alert("Hello Javascript"); // 2) 사용법 : console.log("Hello Javascript"); 결과 변수, 상수, 산술 연산자 html DOCTYPE html> Document js // 주석 단축키 : ctrl + / // 자바스크립트 주석 : // //..
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; /* 지속시간..
기본 속성들 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; /* 임시 */..
inline html DOCTYPE html> Document 대상 객체 대상 객체 대상 객체 css /* 자동 정렬 : ctrl + alt + l */ /* inline-block(인라인블럭) : div 속성 + 줄바꿈 없음(속성) */ /* 활용 : 세로배치 -> 가로배치 디자인 적용하고자 할때 사용 */ /* 예) ul - li(block 속성, 세로메뉴) -> 가로메뉴(위의 속성 고려) */ .box { /* 가로크기 */ width: 100px; /* 세로크기 */ height: 100px; /* 배경색 */ background-color: red; /* 바깥여백 */ margin: 20px; /* display 속성 */ display: inline-block; } .box2 { /* 가로크기..
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; ..
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 이용요..