HTML 이란? HyperText Markup Language의 약자입니다. 웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어입니다. HTML DTD 웹 기술의 진보에 따라 HTML도 변화 되는데, 변화에 따라 브라우져가 HTML을 해석하는 방식도 변화했어요. 이를 극복하기 위해서 브라우져에게 해당 HTML이 어떤 표준에 따른 것인지를 알려주는 것을 DTD(Document Type Definition)이라고 합니다. DTD는 문서의 제일 위에 위치해요. Hello, HTML5! HTML 보일러 플레이트 보일러 플레이트는 프로그래밍에서 어떤 일을 하기 위해 꼭 작성해야하는 코드를 말합니다. 최상위 태그로 을 사용해요. 그 하위에 메타 데이터(meta data)란 데이터를 설명하는 데이터를 의미..

구분해야 하는 이유 HTML의 태그는 크게 블록 요소(block element)와 인라인 요소(inline element)로 나누어 집니다. 이 각각의 요소에 적용되는 CSS가 별도로 존재하기 때문에 CSS를 적용해 놓고도 "왜 적용이 되지 않지?" 라는 상황이 발생할 수 있습니다. 예를 들면, 인라인 요소는 height가 적용되지 않는다. 인라인 요소는 width가 적용되지 않는다. 블록 요소는 vertical-align 이 적용되지 않는다. 블록 요소는 text-align이 적용되지 않는다. 블록 요소 HTML5의 블록 요소 종류는 다음과 같습니다. address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption..

URI는 리소스를 식별하기 위해 문자열 전반을 나타내는데 비해, URL은 리소스의 장소(네트워크 상의 위치)를 나타냅니다. 즉 URL은 URI의 서브셋입니다. URI(Uniform Resource Identifiers) 리소스 식별자 https://www.google.co.kr URL(Uniform Resource Locator) 웹 주소 ftp://ftp.is.co.za/rfc/rfc1808.txt http://www.ietf.org/rfc/rfc2396.txt Idap://[2001:db8::7]/c=GB?objectClass?one mailto:John.Doe@example.com news:comp.infosystems.www.servers.unix tel:+1-816-555-1212 telnet:..

Code files 일반적으로 3가지의 파일 형식으로 구성됩니다. 1. HTML 웹사이트의 구조를 나타냅니다. 집짓기와 비교해본다면, 벽돌, 화장실, 창문 같은 것들입니다. 웹사이트로는 버튼, 텍스트, 이미지 등이 됩니다. 2. CSS 웹사이트의 스타일을 나타냅니다. 집짓기와 비교해본다면, 가구의 배치, 벽지의 모양 등의 인테리어라고 생각해주세요. 버튼의 색상, 크기, 텍스트의 폰트 등이 됩니다. 3. JS 웹사이트의 기능을 나타냅니다. 집짓기와 비교해본다면, 배수관을 통해 물이 흐르고, 스위치를 켜겨나 플러그를 꽂으면 전기를 사용할 수 있게 하는 것입니다. 버튼을 눌렀을 때 실제 동작하게 만드는 일을 하죠. 웹사이트에 생명을 불어넣어줍니다. 브라우저 URL 입력 후 이루어지는 일들 URL parsing..

요소에 추가 할 수 있는 속성은 version, xmlns, xmlns:xlink, viewbox, width, height 속성이 설정됩니다. ... 하지만 인라인 SVG 코드의 경우, 웹 브라우저에서 렌더링 하는데 다음 속성은 필요하지 않습니다. 불필요한 속성은 제거해 코드를 정리하세요. (DTD, version, xmlns, xmlns:xlink, xml:space) version xmlns xmlns:xlink 그러므로 인라인 SVG를 사용할 경우, 아래 코드처럼 간결하게 사용할 수 있습니다. ... SVG의 너비(width), 높이(height)를 설정하는 방법은 요소와 동일하며 viewBox 속성은 값으로 min-x, min-y, width, height숫자 배열 값을 전달 받습니다. 이 값은..

1.DOM이란? DOM(Document Object Model)은 노드(Node) 들이 트리 형태로 구조화 된 데이터 표현이다. 그럼 어떻게 생겼느냐? 이런 트리 구조로 형성이 되어있는데... 1-1 Node 우선 node가 무엇인가? tree 구조에서 root 노드를 포함한 모든 개개의 개체를 node라고 표현한다. head, body, title, script, p, h1, div 등등 태그뿐아니라 태그안의 속성이나 텍스트도 모두 node에 속한다 1-2 Tree 자료구조 그럼 tree라는 자료구조를 이해할 필요가 있다. 하나의 root node에서 시작하며 루트 노드(최상위 노드)에서 아래로 퍼져나가는 형태이다. 트리에서 최상위 노드를 root node 즉, 가장 최상위에 있는 node이기에 par..

무음인 경우 항상 자동 재생이 가능 video요소에 muted 속성을 추가 하거나, muted 값을 true 로 설정한 경우는 자동 재생이 가능합니다. 비디오 파일에 오디오 트랙이 없는 경우 일부 브라우저(Safari, Firefox)는 muted 여부와 별개로 자동 재생이 가능합니다. 무음 자동 재생 중에 스크롤 등으로 인해 비디오가 뷰포트 밖으로 나가는 경우, 일시 정지됩니다. 저전력 모드가 켜져있는 경우 유/무음 자동 재생 불가. (iPhone)

마크업 Validation 체크 오류 The width attribute on the col element is obsolete. Use CSS instead. col 태그에 style을 따로 입히거나 css class를 이용하여 width값을 추가하면 해결됩니다.

기본적으로 사용하는 input 요소와 label을 짝을 이룹니다. A 체크박스와 라디오의 경우 input요소 뒤에 label이 위치해야 합니다. B 하지만, 디자인이 label을 수용할 수 없을 때 혹은 label로 식별되는 텍스트가 없을 때, 혹은 label을 표시하는 것이 혼란스러울 수 있는 곳에서는 title 만으로 폼 컨트롤을 식별하게 됩니다. 검색의 경우 Search for subject actor writer content 전화번호의 경우 전화번호 그 외 label을 쓰지 않는 경우 전송과 초기화 버튼 (input type="submit" 또는 input type="reset") 이미지 버튼 (input type="image") 숨겨진 입력필드 (input type="hidden") 스크립트 ..

- 보통 페이지 링크를 걸 때 주로 사용되는 일반적인 방식 - 값을 전달하는 사용자 인터페이스를 정의하는 마크업 - 값을 받거나 전달할 떄 사용하는 마크업 태그 .. 요소의 어원은 anchor(닻)이다. 다른 자원을 연결하는 의미를 지니고 있고 href 속성으로 하여금 어떤 자원을 연결하고 있는지 표시할 수 있다. ( href 속성의 어원은 hypertext reference) 그러나 href의 값으로 아무 의미없는 "#"을 사용하여 onclick과 같은 방식을 쓰는 것은 ... 요소를 본래의 의미(자원의 참조)와 다르게 사용했다는 것을 반증한다. 참조하는 자원이 있다면 유효한 URL 값을 넣어 준다. 다른 자원의 참조하는 의미 없는 버튼이나 텍스트가 키보드 포커스를 받아야 한다면 ... 요소를 사용해야..