웹/HTML
Layout
웹페이지의 레이아웃을 구성하기 위해서 공간을 분할할 필요가 있다. 공간을 분할할 수 있는 태그는 div, sapn, table 등이 있는데, 과거에는 table 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 div 를 사용하여 레이아웃을 구성한다. Tag Description header 헤더를 의미. nav 내비게이션을 의미. aside 사이드에 위치하는 공간을 의미. section 본문의 여러 내용(atticle)을 포함하는 공간을 의미. article 본문의 주내용이 들어가는 공간을 의미. footer 푸터를 의미한다. 이와 같은 공간 분할 태그는 일반적으로 다른 요소를 포함하는 컨테이너 역할을 하게 된다. div와 span의 차이는 block레벨 요소와 inline레벨 요소를 ..
사용자와의 커뮤니케이션을 위한 폼 태그
form form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 다양한 입력 양식 태그를 포함할 수 있다. ... form elements (input, checkbox, radio button, submit button...) ... action : URL 대상 / 입력 데이터(form data)가 전송될 URL 지정. method : get, post 방식 / 입력 데이터(form data)가 전달될 방식을 지정. GET과 POST는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며 HTTP request method라 한다. GET 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식이다. 예) http://jsonplaceholder.typicode...
Multi media Tags
이미지 웹페이지에 이미지를 삽입하는 경우, img tag를 사용한다. src : 이미지 파일 경로. alt : 이미지 파일이 없을 경우 표시되는 문장. width : 이미지의 너비( CSS에서 지정하는 것이 일반적) height : 이미지의 높이( CSS에서 지정하는 것이 일반적) 미디어 audio audio 태그는 HTML5에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다. src : 음악 파일 경로. preload : 재생 전에 음악 파일을 모두 불러올 것인지 지정. autoplay : 음악 파일을 자동 재생할 것인지 지정. loop : 음악을 반복 재생 할 것인지 지정. controls : 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있음. 웹브라..
List and Table tags
목록(List) 순서없는 목록 (Unordered List) 순서없는 목록 (Unordered List) Coffee Tea Milk 순서있는 목록 (Ordered List) 순서있는 목록 (Ordered List) Coffee Tea Milk type 어트리뷰트를 사용하여 순서를 나타내는 문자를 지정할 수 있다. '1' : 숫자(기본값) 'A' : 대문자 알파벳 'a' : 소문자 알파벳 'I' : 대문자 로마숫자 'i' : 소문자 로마숫자 Coffee Tea Milk start 어트리뷰트로 리스트의 시작값을 지정할 수 있다. reversed 어트리뷰트를 지정하면 리스트의 순서값을 역으로 표현한다. Coffee Tea Milk Coffee Tea Milk 르스트는 중첩해서 사용이 가능하..
Hyperlink
HyperText의 Hyper는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다. 이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크(hyper link)라 한다. HTML link는 hyperlink를 의미하며 a(anchor) tag가 그 역할을 담당한다. Visit google.com! href 어트리뷰트 href 어트리뷰트는 이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 절대 URL : 웹사이트 URL // href="h..
텍스트 관련 태그
제목 (Headings) 태그 Heading 태그는 제목을 나타낼 때 사용한다. h1부터 h6 까지의 태그가 있으며 h1이 가장 중요한 제목을 의미하며 글자의 크기도 가장 크다. 시맨틱 웹의 의미를 살려서 제목 외에는 사용하지 않도록 하자. heading 1 heading 2 heading 3 heading 4 heading 5 heading 6 글자 형태 (Text Formatting) 태그 b bold 체를 지정한다. 제목 태그와 같이 의미론적(Semantic) 중요성의 의미는 없다. This text is normal. This text is bold. This text is bold. strong b tag와 동일하게 bold 체를 사용한다. 하지만 의미론적(Semantic) 중요성의 의미..
기본 태그
1. 문서 형식 정의 tag 문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에 전달한다. 문서의 최상위에 위치해야 하며 대소문자를 구별하지 않는다. HTML5 HTML 4.01 2. HTML tag HTML 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. 즉, 모든 요소는 HTML 요소의 자식 요소이며 HTML 욧 내부에 기술해야 한다. 단 는 예외이다. 3. head tag haed 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재한다. 메타데이터는 HTML 문서의 titlem, style, link, script에 대한 데이터로 화면에 표시되지 않는다. head 요소에는 메타데이터 이외의 ..
시맨틱 웹(Semantic Web)
검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다.(이것을 크롤링 이라한다) 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다.(이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.) 인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다. HTML로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어 문장이 뒤섞여 있다. Hello Hello 해당 코드의 결과는 같은 모습이다. 그러나 1행의 ..