programming/html-css
[HTML/CSS] CSS3 레이아웃과 애니메이션
7. CSS3 레이아웃과 애니메이션 가. block과 inline - block : 한 줄에 한개만 배치h, p, ul, li, table, div, form 등의 태그에 적용됨태그 { display:block; }- inline : 한 줄에 차례대로 배치a, img, input, span 등의 태그에 적용됨태그 { display:inline; } 나. 좌표값 지정 태그 { top:100px; left:200px; right:100px; bottom:200px; } - 정적 위치 설정(static) : 페이지의 정상적인 흐름에 따라 배치태그 { position:static; }- 상대 위치 설정(relative) : 정상적인 흐름을 기준으로 상대적인 좌표에 배치태그 { position:relative; ..
[HTML/CSS] CSS3 박스 모델과 응용
6. CSS3 박스 모델과 응용 6.1 박스 모델 - 웹 브라우저는 HTML 내의 요소들을 사각형으로 간주하고 웹 페이지에 출력시킴, 요소들을 박스 형태로 그리는 것을 박스 모델이라 함 - 각 박스는 margin(바깥쪽 여백), border(경계선), padding(안쪽 여백) 6.2 경계선(border) - 경계선의 스타일 : border-style: none, dotted, dashed, solid, double 등 - 경계선의 폭 : border-width - 경계선의 색상 : border-color - 둥근 경계선 : border-radius 6.3 요소의 크기 설정 - 가로 길이 : width - 세로 길이 : height 6.4 여백 설정 * 바깥쪽 여백 설정 margin-top margin-..
[HTML/CSS] CSS3 스타일 시트 기초
5. CSS3 스타일 시트 기초 5.1 CSS(Cascading Style Sheets) : 웹문서의 스타일, 디자인 요소 지원 - html에 문서의 구조를 지정하는 태그와 스타일을 지정하는 태그가 섞여 있으면 유지보수하기가 어려움 - 스타일을 지정하는 부분은 CSS로 분리하는 것이 바람직함 - 동일한 요소를 가진 웹페이지도 CSS가 달라지면 다른 모습으로 표현될 수 있다. - 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. 5.2 CSS 문법 - 태그 { 속성: 값 } p { background-color: yellow; } p 태그의 배경색상을 yellow로 설정함 5.3 선택자(selector) : 스타일을 적용할 요소(태그) - 태그를 선택하는 경우 : 태그 { 속성: 값; } - i..
[HTML/CSS] 멀티미디어와 입력 양식
4. 멀티미디어와 입력 양식 4.1 오디오- 오디오 파일은 mp3, wav, ogg 등이 지원됨- controls : 화면에 제어기가 표시됨 4.2 비디오비디오파일은 mp4, webm, ogg 등이 지원됨 4.3 iframeinline frame, 웹페이지 내부에 다른 웹페이지를 표시할 경우 사용 4.4 divide, 페이지를 논리적인 섹션으로 분리할 때 사용 4.5 줄바꿈이 없는 태그 4.6 html 입력 양식전송할 데이터들 4.7 데이터의 전송방식4.7.1 post 방식body를 통해 정보 전송정보가 주소창에 노출되지 않음대용량 자료 전송 가능 4.7.2 get 방식데이터를 header에 붙여서 전송(주소창에 표시)기본적인 방식, 보안에 취약http://localhost/login.jsp?userid..
[HTML/CSS] HTML5 기본 태그
2. HTML5 기본 태그 2.1 기본 태그 2.1.1 줄바꿈 BReak line- 웹에서는 엔터키는 무시되고 태그를 입력해야만 함 2.1.2 문단 나누기 Paragraph 2.1.3 입력한 그대로 출력 2.1.4 제목 ~ 2.1.5 주석 : 2.1.6 수평선 : 2.1.7 특수 문자2.1.8 공백문자 : 2.1.9 리스트 번호없는 리스트 Unordered List 번호있는 리스트 Ordered List 항목 2.1.10 테이블테이블의 행 Table Row테이블의 셀 Table Division셀 병합 : colspan행 병합 : rowspan테이블의 제목 : 2.1.11 tag의 id와 name- id : 중복 불가능, javascript/jQuery에서 참조, , jQuery에서 참조할 경우 : $("..
[HTML/CSS] 개발환경 설정 및 HTML의 개요
1. 개발환경 설정 및 HTML의 개요 1.1 개발환경 설정 1.1.1 컴퓨터 초기화 : 개인 데이터 백업, IP 주소 메모 1.1.2 웹 프로그래밍 실습에 필요한 프로그램 설치원할한 실습을 위해 디렉토리를 통일할 것을 권장함html 실습을 위한 툴들은 다양함Notepad, 드림위버, Visual Studio, Eclipse 등 다양한 툴로 실습이 가능하나 본 과정에서는 자바 기반의 웹 프로그래밍 실습을 위주로 진행되기에 자바 기반의 Eclipse를 활용하여 실습을 진행함('추후 Atom으로도 사용 예정) 1.1.3 크롬 브라우저 설치 1.1.4 자바 설치Eclipse는 자바 기반의 프로그램이기 때문에 먼저 자바를 설치해야 함 현재 자바 최신 버전 jdk 10.0.1, Eclipse 최신 버전은 Phot..