★ CSS 박스 모델, Box Model 모든 태그는 사각형으로 랜더링(출력) 된다. 태그가 화면에 출력 될 때 공통된 성질에 관련된 정책(모델) 1. border 2. width, height 3. padding 4. margin ■ 1. 테두리, border 모든 태그는 자신의 영역을 가진다. 영역이 항상 사각형이다. > 테두리 테두리 > 표현 O, 표현 X border-style : solid, dashed, dotted를 자주사용함. 박스 모델 상자1 상자2 상자3 상자4 상자5 ■ 2. width, height 너비, 높이를 지정 width : 개체의 너비 height : 개체의 높이 블럭 태그 : width/height 적용 가능 인라인 태그 : width/height 적용 불가능 width+..
★ TEXT 텍스트 색상, 전경색(Fore Color) /* 텍스트 색상, 전경색(Fore Color)*/ color : blue; /* color : #444; */ 텍스트 정렬(수평 정렬) left, right, center text-align: left; 텍스트 크기 /* 텍스트 크기 */ /* 권장 크기 : 10pt ~ 11pt */ font-size : 12pt; /* 권장 크기 : 12px ~ 16px */ font-size : 12px; /* 권장 크기 : 1em~1.5em*/ font-size : 1em; /* 배율로 따져서 커짐 */ /* 권장 크기 : 1rem~1.5rem */ font-size : 1rem; /* 배율로 따져서 커짐 */ 수치 표현 /* 폰트 - 그림X - 벡터 > 공..
★ 충돌 선택자 충돌 동일한 태그를 서로 다른 선택자가 동시에 선택했을 때 발생 ★ 선택자 우선 순위 충돌이 발생하면 우선 순위가 높은 선택자가 적용 점수 계산 선택자 점수 계산 1. 태그 선택자 > 1점> "사람" 2. 클래스 선택자 > 10점> "남자" 3. 아이디 선택자 > 100점> "홍길동" ■ 선택자 충돌 ex) 동일한 조건 아래 div가 적용됨 /* 선택자 충돌 */ div { color : red;} div { font-style : italic;} 선택자 충돌 + 속성 충돌 아래 div 적용됨 /* 선택자 충돌 + 속성 충돌 */ div { color : red;} div { color : yellow;} 우선 순위가 다른 충돌 id 선택자인 box1이 적용됨 div { color : r..
★CSS 서식 적용 원하는 태그(들)를 찾아서 태그에 맞는 속성 값을 넣어 적용 CSS 문법 선택자 {속성 : 값; } 선택자 {속성명 : 값; 속성명 : 값; 속성명 : 값; } 선택자 { 속성명 : 값; 속성명 : 값; 속성명 : 값; } 1. 선택자 : 문서내에서 원하는 태그를 검색 2. 속성 : 서식의 종류 3. 값 : 속성의 값 ★ CSS 선택자, CSS Selector HTML 문서내에서 서식을 적용하려는 대상 태그를 검색하는 도구 1. 전체 선택자 (*) 모든 태그를 선택한다. 모든 태그에 동일한 서식을 적용할 때 사용 사용 ex) 2. 태그 선택자 태그명을 가지고 원하는 태그를 선택한다. 검색된 모든 태그를 일괄 적용 > 생산성!! 사용 쉬움 단점 > 같은 태그를 일괄 적용 사용 ex) 3..
★ CSS, Cascading Style Sheet HTML 서식을 담당하는 언어 독립 실행이 안된다. 반드시 HTML 코드가 있어야 css 실행이 가능하다. CSS1, CSS2, CSS3(+HTML5) HTML 서식 기능 > CSS 서식 기능(확장) + 생산성 ■ ex01) 요구사항] "안녕하세요." x 5번 출력 추가사항] 글자색 > 파란색 추가사항2] 글자색 > 빨간색 HTML만 사용 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. CSS 사용 안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요 ★ HTML CSS HTML 문서에 CSS를 적용하는 방법 코드 관리 코드 재사용 1. 인라인 스타일 시트(Inline Styl..
★ HTML5 HTML 4.01 + XHTML 1.0에서 더 업그레이드 된 버전 ■ ex01) text에 미리 보기 기존 HTML 이용 실행 문제점 : 암호를 입력하라는 미리보기에 아래와 같이 마킹처리가 되는 문제점 HTML 5 이용 실행 상위 문제를 해결하여 깔끔하게 표출 ■ ex02) 필수입력 검사 HTML5 이용 ** 필수입력 실행 ■ ex03) 이메일을 입력 받는 박스 HTML 5 이용 이메일 : 실행 ■ ex04) URL을 입력 받는 박스 HTML 5 이용 URL : 실행 ■ ex05) 전화번호를 입력 받는 박스 HTML 5 이용 전화 : 실행 ■ ex06) 숫자를 입력 받는 박스 HTML 5 이용 숫자 : 숫자 : 실행 ■ ex07) 범위 박스 HTML 5 이용 범위 : 실행 ■ ex08) 색..
★ 문제 1 5x5 테이블을 생성하시오. 가로 셀 병합을 하시오. 세로 셀 병합을 하시오. ■ 소스코드 테이블 문제1 1 6 7 9 12 13 14 15 17 18 20 23 24 ■ 실행결과 ★ 문제 2 14x17 테이블을 생성하시오. 가로 셀 병합을 하시오. 세로 셀 병합을 하시오. ■ 소스코드 출석부 번호 일자 03월 31일 4월 01일 4월 02일 4월 03일 4월 04일 출석일 결석 지각 조퇴 확인 기관장 결재 확인 (지도교수) 시작 종료 시작 종료 시작 종료 시작 종료 시작 종료 1 강한님 2 권승도 3 김경빈 4 김용기 5 김용식 6 김은서 7 김재호 8 김정현 9 김준형 10 김찬호 ■ 실행 결과 ★ 문제 3 중첩된 테이블을 구현하시오. 가로 셀 병합을 하시오. 세로 셀 병합을 하시오. ■..
★ Form 입력 양식, 입력 컨트롤 클라이언트(사용자)로부터 입력장치(키보드,마우스 등)를 통해서 데이터를 입력 입력 데이터 > 서버로 전송!! > 업무 활용 or DB저장 등.. 모든 입력 컨트롤을 감싸는 컨테이너 입력값을 서버로 전송하는 역할 1. form.method 데이터를 전송하는 방식 1. get 전송되는 데이터를 URL에 붙여서 전송하는 방식 편법 전송되는 데이터가 노출(주소창) > 보안 X http://localhost:8090/client/html/ex19.jsp?data=java 노출되면 안되는 데이터 절대로 get으로 전송 금지!! URL(최대 256자) > Overflow > 짤림 > 대량의 데이터 전송금지(655535바이트) 2. post 전송되는 데이터를 패킷안에 넣어서 전송하..
