★ 표, Table 1. 큰상자 전체 컨테이너 2. table row 중간 상자 행 역할 3. table data 작은 상자 셀 역할 데이터를 저장하는 역할 4. table header 제목 역할 작은 상자 5. 에서 생략되서 사용되는 것 있으나 없으나 상관 없음, 잘안씀 관리용도 중간 컨테이너 6. 에서 생략되서 사용되는 것 있으나 없으나 상관 없음, 잘안씀 관리용도 중간 컨테이너 7. 아래에 들어가는 것 있으나 없으나 상관 없음, 잘안씀 관리용도 중간 컨테이너 ■ 소스 코드 1. 2행 2열 테이블 2행 2열 테이블 1 2 3 4 실행결과 2. 이미지가 삽입된 테이블 이미지가 삽입된 2행 2열 테이블 3 4 실행결과 3. valign 사용 테이블 옵션 = center, bottom, top 2행 2열 ..
★ 태그(Tag) 인라인 태그 vs 블럭태그 모든 태그는 위의 두 분류 중 하나에 속한다. 렌더링(Rendering, 태그를 화면에 출력하는 작업) 규칙이 서로 다르다. ■ 인라인 태그, Inline Tag 자신의 내용물과 앞뒤의 다른 태그의 내용물을 같은 라인에 출력한다. 이유 : 내용물의 크기가 태그의 영역이다. PCDATA(텍스트)는 인라인 태그로 취급한다. 인라인태그 : 스타일태그, , etc.. ■ 블럭태그, Block Tag 자신의 내용물과 앞뒤의 다른 태그의 내용물을 다른 라인에 출력한다. 이유 : 내용물의 크기와 상관없이 한 라인을 독점한다.(너비 100%) 높이는 내용들의 크기와 동일 블럭태그 : , .., , , , , ■ 소스코드 링크1 링크2 링크3 문단1 문단2문단2문단2문단2문단..
★ Visual Studio Code 다운 https://code.visualstudio.com/Download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications. code.visualstudio.com download - system - window 6..
★ 이미지, Image 단독태그 img.src source 이미지 파일 URL 필수값 img.alt alternate text > 대체 문자열 이미지가 올바르게 표시되지 않았을 때 대신 보여주는 문자열 필수값 img.width 가로길이 width="250" img.height 높이 height="300" ■ 소스코드 ■ 실행결과
★ 링크, LINK , anchor 링크 속성 a.href : 클릭하면 이동하는 URL 지정 a.target : 페이지 이동 방식. _self : 보고 있는 창에서 페이지 이동 _blank : 새 창에서 페이지 이동 _parent _top 사용 ex) 외부 링크 네이버로 이동합니다. 사용 ex2) 내부 링크 첫번째 예제 사용 ex) 이동방식 열번째 예제 열번째 예제 ★ anchor 테그 변수 소스코드 자바 정리 "변수" "메소드" "클래스" "인터페이스" 변수 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다..
★ List, 목록 1. 순서가 있는 목록 + Ordered List List item 2. 순서가 없는 목록 + Unordered List List Item 3. 용어 정의 목록 + + Definition List Definition Term Definition Description ■ 사용 ex) 1. 순서가 있는 목록 수업 복습하기 강아지 산책하기 운동하기 팔굽혀펴기 달리기 스쿼트 방청소하기 컴퓨터 포맷하기 2. 순서가 없는 목록 수업 복습하기 강아지 산책하기 방청소하기 컴퓨터 포맷하기 3. 용어 정의 목록 용어 설명입니다. 클래스 클래스는 어쩌구 저쩌구~클래스는 어쩌구 저쩌구~클래스는 어쩌구 저쩌구~클래스는 어쩌구 저쩌구~클래스는 어쩌구 저쩌구~클래스는 어쩌구 저쩌구~클래스는 어쩌구 저쩌구~클래스..
★ Style Tag 볼드체 볼드체입니다. 이탤릭체 이탤릭체입니다. 작은글자 작은글자 H2O표기 H2O 밑줄 밑줄을 긋습니다. 취소선 취소선입니다. 취소선 취소선입니다. 큰 글자 큰 글자 타자기 글자 타자기 글자 중요한 데이터(강조) 중요한 데이터 중요한 데이터(강조2) 중요한 데이터 형광펜 색칠 강조 데이터 한줄 인용구 한줄 인용구 여러줄 인용구 여러줄 인용구 코드 삽입 int a =10 주소 서울시 강남구 역삼동 추가된 데이터 추가된 데이터 삭제된 데이터 삭제된 데이터 폰트 변경 및 수정 텍스트
★ Horizontal Rule, 수평바, 구분자 문단과 문단을 구분하는 역할 단독 태그 ★ 속성 1. size : 선의 두께 2. width : 선의 너비(픽셀:절대크기, %:상대크기) 3. align : 수평 정렬 4. color : 선의 색상 5. noshade : 그림자 유무 6. title : 풍선 도움말(tooltip, hover text) ★ HTML 속성 유형 1. 숫자(단위 없음) 픽셀(px) > 화소 > 화상(이미지)를 구성하는 최소 단위> 단일 색상을 가지는 점 1개 글자수 2. 숫자(단위 %) 100%의 기준이 누구인지 부모 태그 영역을 100으로 하는 상대 단위 3. 열거형 정해져있는 속성값 중 하나를 선택해서 사용 4. 색상 색상명, RGB 5. 플래그형(boolean) 속성명 ..
