전체 글

1. 자바스크립트의 개념 1) 자바스크립드 VS 자바 2) 자바스크립트의 의미 사용자에 의해 발생된 사건(event)을 프로그래밍하기 위한 언어 웹 브라우저에 포함된 방식 및 HTML 문서와 직접 상호 작용 가능 마우스 선택과 폼에 데이타를 입력하는 등의 사용자에 의해 발생하는 사건에 대해 응답하는 프로그램을 작성하는 것 가능 웹 페이지에 대화형 기능 추가 및 역동적인 폼의 제작 CGI 프로그래밍에 의해 야기된 서버의 부담을 줄이는 것이 가능 손 쉬운 디버깅 - 인터프리터 방식 원래 넷스케이프사에서는 클라이언트 쪽에서 독립적으로 실행되는 프로그램을 작성하기 위한 스크립트 언어로 만듦 그러나, 자바가 선풍적인 인기를 끌기 시작하자,넷스케이프사는 자바를 만든 선 마이크로시스템즈사(SunMicrosystems..

1. transform 박스모델 변형 관련 스타일 속성속성값 : 변형 관련 함수 - translate(), scale(), rotate() , skew() 등1) translate() - 이동 함수36_transform_translate.html  박스모델 변형 관련 스타일 속성 원본이미지 2) scale() - 확대 또는 축소 함수37_transform_sclae.html 박스모델 변형 관련 스타일 속성 원본이미지 3) rotate() - 회전함수38_transform_rotate.html  박스모델 변형 관련 스타일 속성 원본이미지   4) skew() - 비트는..

1. border | width | height | table-layout | word-break 속성 33_table1.html 테이블 관련 스타일 속성 CONSRAINT_VALIDATION 테이블 크기 관련 스타일 속성과 속성값 2. border-collapse | text-align 속성 34_table2.html 테이블 관련 스타일 속성 번호이름주소 1000홍길동서울시 강남구 2000임꺽정부산시 사하구 3000전우치광주시 광산구 4000일지매수원시 팔달구 5000장길산인천시 월미구 3. border | border-spacing | empty-cells | caption-side 속성 35_table3.html 테이블 관련 스타일 속성 회원목록 번호이름주소 1000홍길동서울시 강남구 역삼동 200..

1. 박스 모델 관련 스타일 속성 박스모델(BoxModel) 텍스트 또는 이미지를 출력하기 위해 태그를 이용하여 생성한 사각형 모양의 영역 1) margin | border | padding | width | height | border-radius 속성 24_box1.html 박스 모델 관련 스타일 속성 Box Model - 1 Box Model - 2 박스 모델 관련 스타일 속성 Box Model - 1 Box Model - 2 2) border-radius 속성 25_box2.html 박스 모델 관련 스타일 속성 3) box-shadow 속성 26_box3.html 박스 모델 관련 스타일 속성 2. 레이아웃 관련 스타일 속성 1) 인라인레벨 VS 블럭레벨 27_layout1.html 박스모델 배치 ..

1. 배경색 관련 스타일 속성 17_background_color.html 배경 관련 스타일 속성 배경색을 설정해 보세요. 번호이름주소 1000홍길동서울시 강남구 2000임꺽정부산시 사하구 3000전우치수원시 팔달구 4000일지매부천시 강남구 5000장길산인천시 남동구 2. 배경이미지 관련 스타일 속성 18_background_image.html 배경 관련 스타일 속성 3. 배경이미지 위치 관련 스타일 속성 19_background_postion.html 배경 관련 스타일 속성 오늘은 월요일입니다. 이번주가 시작되는 날입니다. 4. 배경이미지 고정 관련 스타일 속성 20_background_attachment.html 배경 관련 스타일 속성 브라우저에 출력될 아주 중요한 내용입니다. 브라우저에 출력될 아..

1. 문장(텍스트 - Text)관련 스타일 속성 14_text.html 1) direction - 문장 쓰기 방향 브라우저에 출력될 아주 중요한 내용입니다. 브라우저에 출력될 아주 중요한 내용입니다. 2) text-align - 문장 정렬 브라우저에 출력될 아주 중요한 내용입니다. 브라우저에 출력될 아주 중요한 내용입니다. 브라우저에 출력될 아주 중요한 내용입니다. 브라우저에 출력될 아주 중요한 내용입니다. 3) text-shadow - 문장 그림자 HTML5와 CSS3를 배우고 있습니다. 4) overflow & text-overflow - 벗어난 문장 처리 HTML5와 CSS3를 배우고 있습니다. HTML5와 CSS3를 배우고 있습니다. HTML5와 CSS3를 배우고 있습니다. 5) text-deco..

1. 기본 글꼴 사용 09_font_family.html 글꼴 관련 스타일 속성 브라우저에 출력될 아주 중요한 내용입니다 브라우저에 출력될 아주 중요한 내용입니다 브라우저에 출력될 아주 중요한 내용입니다 브라우저에 출력될 아주 중요한 내용입니다 브라우저에 출력될 아주 중요한 내용입니다 2. 글꼴파일다운 & 구글폰트이용 1)글꼴파일 다운로드받아 사용하기 클라이언트에게 글꼴 파일 제공 후 글꼴 설정하는 것 권장 2) 구글폰트 이용하기 or @import @import 사용하려면 메인페이지에 딱 한번만 import 해주는 것을 권장 10_web_font.html 글꼴 관련 스타일 속성 브라우저에 출력될 아주 중요한 내용입니다. 브라우저에 출력될 아주 중요한 내용입니다. 브라우저에 출력될 아주 중요한 내용입니다..

https://flukeout.github.io/ CSS DinerA fun game to help you learn and practice CSS selectors.flukeout.github.io 1. 기본 선택자1) 전체 선택자모든 엘리먼트(Element - 태그)를 선택 - 비권장 전체 선택자 브라우저에 출력될 아주 중요한 내용입니다. 브라우저에 출력될 아주 중요한 내용입니다. 브라우저에 출력될 아주 중요한 내용입니다. 2) 태그 선택자태그명을 이용하여 엘리먼트 선택태그명이 같은 다수의 엘리먼트가 선택되어 동일한 스타일 적용 태그 선택자 브라우저에 출력될 아주 중요한 내용입니다. 브라우저..

https://cssreference.io/ CSS ReferenceCSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.cssreference.io 1. CSS의 등장1) 태그CSS를 사용하기 전에는 디자인 관련 HTML 태그와 속성을 사용하여 웹문서 작성 -  웹문서에 생산성 및 유지보수의 효율성이 낮음01_old.htmlOld Style브라우저에 출력될 아주 중요한 내용입니다.브라우저에 출력될 아주 중요한 내용입니다.브라우저에 출력될 아주 중요한 내용입니다.브라우저에 출력될 아주 중요한 내용입니다.브..

1. 입력폼 태그와  하이퍼링크 태그의 차이점1) 입력폼 태그 : submit이벤트 발생 시 동작됨서버에게 값 전달할 때 많이 사용 - 특히 사용자 입력값GET 방식으로 요청 : 쿼리스트링으로 전달 (= URL주소로 값이 전달됨)POST 방식으로 요청 : (오직form만이 가능) : 리퀘스트 메세지(Request Message)의 몸체부(body)에 저장하여 전달물론 사용자 입력값을 받지 않고 , 특정 값을 전달하고 싶을 수도 있음type = "hidden" 이용왜? 자바프로그램에서 사용한 결과값을 다른 프로그램에게 주고 싶어서2) 하이퍼링크 태그 : click이벤트 발생 시 동작됨단순히 연결된 링크에 들어갈 때 많이 사용GET 방식으로 요청 : 쿼리스트링으로 전달 (= URL주소로 값 전달할 수 있음)..