WEB (33) 썸네일형 리스트형 HTML - 그림과 링크 1. 이미지 삽입 - 종료태그 없이 사용 속성 • src ="이미지파일" -> 문서에 표시할 이미지 파일을 지정 일반적인 이미지 파일 형식(GIF/JPG/PNG) HTML문서에 표시할 이미지파일의 이름/경로 지정(필수 속성) • width="숫자" -> 이미지의 폭 지정(픽셀, %) • height="숫자" -> 이미지의 높이 지정 (픽셀, %) 기본 출력 크기 - 이미지의 원본 크기 속성 값 : 픽셀, % 폭과 높이 중에서 하나의 크기가 지정되면 나머지 하나의 값은 원본 크기에 비례해서 자동으로 지정 • alt="내용" -> 이미지가 표시되지 않을 때 대체될 텍스트 이미지가 화면에 표시되지 않거나 이미지가 깨지는 경우를 위해 사용 • usemap="#맵이름" -> 클라이언트 측의 이미지맵 지정 콘텐츠 그룹핑 인라인 요소 블록요소 텍스트요소 -> 기존 내용에 이어서 작성됨 문서 구조요소 -> 새로운 행에 작성됨 입력 내용만큼의 공간을 차지해서 내용을 표시 하나의 줄을 전부 차지해서 내용을 표시 줄바꿈이 수행되지 않아 앞뒤 내용이 이어져서 한 줄에 표시됨 자동으로 줄바꿈 수행 , , ... , , ... 콘텐츠 컨테이너로서 , 태그 태그 블록 요소 인라인 요소 HTML 요소를 묶어 하나의 논리적인 단위의 영역을 구성 텍스트를 위한 컨테이너 논리적으로 구분된 대량의 내용에 대해 CSS스타일 지정 또는 전체 페이지의 공간을 분할하여 레이아웃을 구성하는 데 사용 텍스트의 일부에 대해 CSS스타일 지정 또는 자바스크립트에서 조작할때 유용 div태그의 특징1: 한 줄 공간을 제공 div태그의 특징2: 앞뒤로 자동으로 줄.. 목록 지정 목록의 종류 목록의 종류 설명 순서없는 목록(Unordered List) 글머리 기호( • )를 붙여 목록의 각 항목을 표시 ... 자식요소 -> li 순서있는 목록(Odered List) 순서(1,2,3 ...)를 매겨서 목록의 각 항목을 표시 ... 자식요소 -> li 서술 목록(Description List) 어떤 용어나 이름에 대해서 서술하는 형식 ... 자식요소 -> dt, dd 순서 없는 목록을 지정하는 태그 : 각 항목 앞에 순서를 나타내지 않는 기호를 붙여서 표시 CSS를 통해서 기호의 모양을 바꿀 수 있음 항목 1 항목 2 ... 항목 n 태그 :과 태그 내에서 공통으로 사용되는 자식 태그 목록에서 각 항목의 내용을 표현/ 들여쓰기 자동 줄바꿈을 수행 종료 태그없이 사용가능 목록의 종류 .. 글자 스타일 지정 글자 스타일 지정 관련 태그 1. 물리적 스타일 관련 태그 • 단순히 웹브라우저에 표시되는 출력 모양만을 지정하는 태그 --> , , , , , , : 진하게 표시 : 기울어진 형태(이탤릭체)로 표시 : 글자 가운데를 통과하는 줄(취소선)을 표시 : 밑줄을 표시 :글자를위 첨자로 표시 :글자를아래첨자로 표시 : 기본 글자의 크기보다 작은 크기의 글자로 표시 ▼ 태그 설명 : 진하게 표시 - 강조의 의미(X), 주목해야 할 단어를 표시 : 기울어진 형태(이탤릭체)로 표시 - 다른 분위기나 어조, 보통의 서술과 구분되어야 하는 텍스트를 표시 : 글자 가운데를 통과하는 줄(취소선)을 표시 - 더이상 정확하지 않거나 관련이 없는 내용을 표시 : 밑.. 텍스트 표현 주석 - 문서 소스의 이해를 돕기 위한 설명을 추가할때 사용 브라우저에 의해 출력되지 않으므로 소스에서만 확인 가능. 태그 내에서는 사용 불가 과목명: HTML 웹프로그래밍 개설학과 : 컴퓨터과학과 담당교수: 빌게이츠 줄을 바꾸는 태그 - 편집기에서 엔터키와 같은 기능 종료 태그 없이 사용 독립된 단락을 생성하기 위해서는 p태그를 사용하며, p 태그를 연속해서 여러개 사용해도 한 번 사용한 것과 같은 효과를 가짐 단락의 정렬은 CSS를 사용한다. 단락을 나누는 태그 - 문단을 나누어 독립된 단락을 생성 다른 내용과의 구분을 위해 단락 전후에서 자동 줄바꿈 수행 공백 및 특수 문자 입력 두 칸 이상의 연속된 공백, 예약어로 사용되는 문자, 키보드로 직접 입력할 수 없는 문자를 입력하는 경우 1. &특수이름.. HTML 문서 - 구성 요소 HTML 문서의 구성 요소 : 하나의 HTML 문서는 다양한 요소들의 조합으로 구성 요소 - 내용 : 속성 HTML 웹프로그래밍 요소는 기본적으로 시작태그와 종료태그는 하나의 쌍을 이루는데 경우에 따라서는 종료태그없이도 사용되는 태그도 있다. ,, 등 전역 속성 : 속성인데 글로벌하다는 의미( 모든 태그에서 사용이 될 수 있다.) class, id, style,lang, title 등 HTML 문서 작성 시 주의사항 1. 태그는 대소문자를 구분하지 않지 않지만 소문자 표기를 권고 한다. 2. 파일의 확장자는 반드시 htm, html로 지정 ( 파일명.htm or 파일명.html) 3. 화이트페이스는 입력한 의도대로 적용되지 않음 -> 두 칸 이상의 연속된 공백은 하나의 공백으로 처리됨 3. 요소 안에 다.. 태그 (열린태그) (끝 태그) 웹으로 실행하기위해서는 항상 htdocs에 파일을 저장해야한다. CSS 이론: 선택자 심화학습 h1{color:red; font-size:10px} 속성을 나누는 ; h1 { color:red; font-size:10px } 이렇게 코드를 작성해도 된다. 글자 밑 밑줄 h2{ text-decoration:underline; } [테두리] header h1{ border:1px solid red; } 이전 1 2 3 4 5 다음
