P-Language/HTML (8) 썸네일형 리스트형 이미지/동영상/음악 등 멀티미디어 태그 1. 이미지 img tag src : 이미지 파일경로 alt : 이미지 파일이 없을 경우 표시되는 문장 width : 이미지의 너비 (CSS에서 지정하는 것이 일반적) height : 이미지의 높이 (CSS에서 지정하는 것이 일반적) 2. 미디어 2.1 audio : HTML5 에 새롭게 추가된 태그로 IE8 이하에서 사용 불가. src : 음악 파일 경로 preload : 재생 전에 음악 파일을 모두 불러올 것인지 지정 autoplay : 음악 파일을 자동의 재생 개시할 것인지 지정 loop : 음악을 반복할 것인지 지정 controls : 음악 재생 도구를 표시할 것인지 지정. 웹 브라우저 별로 지원하는 음악 파일 형식이 다름. Crome의경우 mp3,wav,ogg 모두 가능. IE의 경우 mp3만 .. List tag & Table tag 1. 목록 list 1.1 순서 없는 목록 Unordered List coffee tea milk coffee tea milk 1.2 순서 있는 목록 Ordered List coffee tea milk coffee tea milk ※ type 어트리뷰트를 사용하여 순서를 나타내는 문자를 지정할 수 있다 1 : 숫자(기본값) A : 대문자 알파벳 a : 소문자 알파벳 I : 대문자 로마숫자 i : 소문자 로마숫자 coffee Tea milk ※ start어트리뷰트로 리스트의 시작값을 지정 가능 ※ reversed 어트리뷰트를 지정하면 리스트의 순서값을 역으로 표현. 1.3 중첩 목록 Coffee Tea Black tea Green tea milk 2. table 표를 만들때 사용. 과거에는 테이블 태그를 .. 하이퍼링크 Hyperlink 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능을 하이퍼링크 Hyperlink. 담당하는 태그 : a(anchor) tag Visit google.com! 1. href 어트리뷰트 이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미. 1.1 디렉토리 (Directory) ■ 루트 디렉토리 : 파일 시스템 계층 구조 상의 최상의 디렉토리. Unix:/ Windows:c:\ ■ 홈 디렉토리 : 시스템 사용자에게 각각 할당된 개별 디렉토리. Unix:/Users/{계정명} Windows:c:\Users\{계정명} ■ 작업 디렉토리 : 작업 중인 파일의 위치한 디렉토리 ./ ■ 부모 디렉토리 : 작업 디렉토리의 부모 디렉토리 ../ 1.2.. 텍스트 관련 tag 1. 제목 태그 heading 태그는 제목을 나타낼 때 사용. h1에서 h6까지 있다. h1이 가장 중요한 제목을 의미하며 글자의 크기도 가장 큼. 시멘틱 웹의 의미를 살려서 제목 이외에는 사용하지 않는 것이 좋다. 2. 글자형태 태그 2.1 b bold체를 지정. 의미론적(semantic) 중요성 의미는 없다. 2.2 strong bold체를 지정, Semantic 중요성의 의미를 갖는다. 웹표준을 준수하고자 한다면 b 보다 strong을 사용하는 것이 바람직. 2.3 i Italic체를 지정. Semantic 중요성 의미는 없다. 2.4 em emphasized(강조, 중요한) 텍스트를 지정. 이탈릭체로 표현되고, 의미론적 중요성 의미를 갖는다. 2.5 small small 텍스트를 지정. 2.6 m.. Bug#01 리스트 태그 사용시 빈 리스트 발생 [전제조건] 0. 웹페이지 만들기 실습을 하다가 태그 사용시 발생. 1. main page를 복제시켜서 사용 중. [현상] 0. 안에 종속시켜둔 리스트 태그를 쓴 항목이 2개인데, 결과물에서 빈 항목이 생김. 1. 혹은 로 종속 시키는것과 상관없이 발생. 2. 리스트를 3개로 늘리면 2개 다음에 빈 리스트가 생기고, 그 밑의 줄에 세 번째 항목이 생겨버림 [해결방법] 0. 검색을 해봐도 키워드 부족이라 떠오르지 않음 1. 복제했던 태그를 모두 지우고 처음 부터 다시 작성했더니 재발생하지 않았다. Web page 구성 기본tag 1. 문서 형식 정의 tag (해당 버전: HTML 5) 출력할 웹 페이지의 형식을 브라우저에게 전달. 2. html tag html 태그는 모든 HTML 요소의 부모 요소. 웹페이지에 단 하나만 존재. 모든 요소는 html 요소 내부에 기술해야 함 , 는 예외. 화면에 표시할 모든 콘텐츠는 이곳에 기술한다. ■html은 글로벌 어트리뷰트를 지원 (lang 어트리뷰트 사용) 예) 한국어 3. head tag 메타데이터를 포함하기 위한 요소. 웹페이지에 단 하나만 존재. ※메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않음. head요소에는 메타데이터 이외의 화면에 표시되는 일체의 요소를 포함 불가. 3.1 title tag 문서의 제목을 정의.. 요소 (Element) 요소 Element 시작 태그 start tag와 종료 태그 end tag 그리고 태그 사위에 위치한 content로 구성. HTML document는 요소의 집합으로 이루어짐. 대소문자는 구별하지 않으나, 소문자를 추천하므로 소문자를 사용하는 것이 일반적. 1. 요소의 중첩 Nested Element 요소는 중첩되어 다른 요소를 포함할 수 있음. (이때 부자관계가 성립된다) 부자관계를 시각적으로 파악하기 쉽게 들여쓰기 indent를 활용 (tab키) 2. 빈 요소 Empty Element content를 가질 수 없는 요소. Empty element or Self-Closing element 오직 어트리뷰트 Attribute만을 가질 수 있다. br hr img input link meta 3. 어트리.. What is HTML. HTML (Hyper Text Markup Language)은 웹페이지를 기술하기 위한 마크업 언어. 웹페이지의 내용Content 와 구조 Structure를 담당하는 언어로써 HTML태그를 통해 정보를 구조화함 마크업(MarkUp)언어란? 마크업 언어는 "마크(Mark)"로 둘러싸인 언어. "태크(Tag)"로 둘러싸였다고도 표현. HTML, XML 등의 마크업 언어들은 문서의 구조를 정의. 쉽게 말하면 문서의 골격에 해당하는 부분을 작성하는데 사용. 마크다운(MarkDown)언어 일반 텍스트 기반의 마크업언어로 README.md 파일이나 온라인 문서, 혹은 일반 텍스트 편집기로 문서 양식을 편집할 때 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능 HTML문서는 반드시 로 시작하여 문서형식을 HTML.. 이전 1 다음
