Frank의 공부 일지

header - 헤더를 의미 nav - 내비게이션을 의미 aside - 사이드에 위치하는 공간을 의미 section - 본문의 여러 내용을 포함하는 공간을 의미 article - 본문의 주내용이 들어가는 공간을 의미 footer - 푸터를 의미 이와 같은 공간 분할 태그는 일반적으로 다른 요소를 포함하는 컨테이너 역할을 하게 된다.

1. form - 사용자가 입력한 데이터를 수집하기 위해 사용되면 입력 양식 태그를 포함할 수 있다. 속성 action(value: URL) - 입력 데이터가 전송될 URL 지정 method(value: get/post) - 입력 데이터 전달 방식 지정 get/post는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며 HTTP request method라고 한다. GET - 전송 URL에 입력 데이터를 쿼리 스트링으로 보내는 방식 예) http://tistory.com/posts?userId=1&id=1 전송 URL 바로 뒤에 '?'를 통해 데이터의 시작을 알려주고 key-value형태의 데이터를 추가한다. 1개 이상의 전송 데이터는 '&'로 구분한다 - URL에 전송 ..

1. 이미지 속성 src - 이미지 파일 경로 alt - 이미지 파일이 없을 경우 표시되는 문장 width - 이미지의 너비 height - 이미지의 높이 2. 오디오 속성 src - 음악 파일 경로 preload - 재생 전에 음악 파일을 모두 불러올 것인지 지정 autoplay - 음악 파일을 자동의 재생할 것인지 지정 loop - 음악을 반복할 것인지 지정 controls - 음악 재생 도구를 표시할 것인지 지정 3. 비디오 속성 src - 동영상 파일 경로 poster - 동영상 준비 중에 표시될 이미지 파일 경로 preload - 재생 전에 동영상 파일을 모두 불러올 것인지 지정 autoplay - 동영상 파일을 자동 재생할 것인지 지정 loop - 동영상을 반복할 것인지 지정 controls ..

1. 목록 1) 순서없는 목록 2) 순서있는 목록 3) type 속성 사용하여 순서 나타내는 문자 지정 가능 "1" - 숫자 (기본값) "A" - 대문자 알파벳 "a" - 소문자 알파벳 "I" - 대문자 로마숫자 "i" - 소문자 로마숫자 4) start 속성 사용하여 리스트의 시작값 지정 가능 5) reversed 속성 사용하여 리스트의 순서값 역으로 표현 가능 6) 중첩 목록 2. 테이블 table - 표를 감싸는 태그 tr - 표 내부의 행 th - 행 내부의 제목 셀 td - 행 내부의 일반 셀 1) 테이블 태그의 속성 border - 표 테두리 두께 지정 rowspan - 해당 셀이 점유하는 행의 수 지정 colspan - 해당 셀이 점유하는 열의 수 지정

HyperText의 Hyper는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다. 이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능을 하이퍼링크라고 한다. HTML link는 hyperlink를 의미하며 a tag가 그 역할을 한다. 1. href 속성 이동하고자 하는 파일의 파일 시스템 상에서 특정 파일의 위치를 값으로 받는다. 사용 가능한 값은 아래와 같다 1) 절대 URL - 웹사이트 URL 2) 상대 URL - 자신의 위치를 기준으로한 대상의..

HTML 콘텐츠의 대부분은 텍스트로 구성된다. 1. 제목 태그 h1~h6까지 있으며 h1이 가장 중요한 제목을 의미하고 글자의 크기도 가장 크다. 시맨틱 웹의 의미를 살려서 제목 이외에는 사용하지 않는 것이 좋다. 2. 글자 형태 태그 1) b - bold체 지정 2) strong - b와 동일하게 bold체 지정 하지만 중요한 의미를 갖는다. 웹표준을 준수하고자 하면 strong 사용하는 것이 바람직 3) i - Italic체 지정 4) em - emphasize text 지정 i tag와 동일하게 Italic체로 표현. 중요한 의미를 갖는다. 5) small - small text를 지정 6) mark - highlighted text를 지정 7) del - deleted text 지정 글자 앞에 -..

1. 문서 형식 정의 태그 html5 - 2. HTML 태그 html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재 3. head 태그 head 요소는 메타데이터(데이터의 데이터)를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재 head 요소에는 메타데이터 이외의 화면에 표시되는 일체의 요소를 포함시킬 수 없다. 4. title 태그 문서의 제목을 정의, 정의된 제목은 브라우저의 탭에 표시된다. 5. style 태그 HTML 문서를 위한 style 정보를 정의(color 등) 6. link 태그 외부 리소스와의 연계 정보를 정의. 주로 HTML과 외부 CSS 파일을 연계에 사용된다. 예)

대부분의 인터넷 사용자는 원하는 정보를 취득하기 위해 Google, Naver, Daum과 같은 검색사이트를 이용한다. 고로 웹사이트는 검색엔진에서의 노출이 매우 중요하다. 검색엔진은 로봇이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다(->이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행) 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)를 만들어준다.(-> 이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행) 인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 되는데 이때 시맨틱 요소를 해석한다 이 2행은 모두 Hello W..

HYML(HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다. -> 자세히 말하면 웹페이지의 내용과 구조를 담당하는 언어로 HTML 태그를 통해 정보를 구조화하는 것이다. HTML5는 2014년 10월 28일 확정된 차세대 웹 표준으로 아래와 같은 기능들이 추가되었다. 멀티미디어, 그래픽, 통신, 디바이스 접근(하드웨어 기능을 직접적으로 제어할 수 있다), 오프라인 및 저장소(오프라인 상태에서도 애플리케이션을 동작시킬 수 있다), 시맨틱 태그(HTML 요소의 의미를 명확히 설명하는 시맨틱 태그를 도입하여 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명할 수 있다 -> 이를 통해 HTML 요소의 의미를 명확히 해석하고 그 데이터를 활용할 수 있는 시..