'Web/HTML' 카테고리의 글 목록

Web/HTML

[HTML] HTML table advanced features and accessibility

2022.07.27

HTML table advanced features and accessibility HTML table의 추가 속성 및 접근성 table에 추가하기 요소 안에 요소를 정의하여 table에 대한 설명을 지정할 수 있다. 요소는 여는 태그 바로 뒤에 위치한다. Dinosaurs in the Jurassic period ... table에 대한 설명을 제공해주기도 하지만 시각장애인 사용자들에게 매우 유용하다. → 스크린 리더가 caption을 읽어 table에 대한 내용을 얻는다. table 요소의 summary 속성도 사용할 수 있지만 HTML5에서 더 이상 사용되지 않으므로요소를 사용하는 것이 좋다. Active learning: Adding a caption School timetable This is ..

Web/HTML

[HTML] HTML table basics

2022.07.27

Table은 무엇인가? table은 행과 열로 구성된 구조화된 데이터 집합이다. 태그 설명 table 테이블을 감싸는 태그 tr 표 내부 행(table row) th 행 내부 제목 셀(table heading) td 행 내부 일반 셀(table data) 이름 나이 정수연 25 김수연 30 HTML table을 사용하지 말아야 할때는? 레이아웃을 위해 사용하는 경우 레이아웃을 위한 table은 시각장애사용자의 접근성을 저하시킨다. 시각장애인이 사용하는 스크린리더는 HTML 페이지의 태그를 해석해 사용자에게 내용을 읽어준다. table이 tag soup을 만든다. 레이아웃을 위한 table은 일반적으로 레이아웃 태그들보다 더 복잡한 마크업 구조를 가진다. 이로 인해 코드 작성, 유지 관리 및 디버깅이 어려..

Web/HTML

[HTML] Adding vector graphics to the web

2022.07.22

벡터 그래픽은 파일 크기가 작고 확장성이 뛰어나서 확대하더라도 픽셀화되지 않는다. 벡터 그래픽이란 무엇인가? 웹에서는 raster image, vector image 로 2가지 유형의 이미지로 작업할 수 있다. Raster image 픽셀 그리드로 정의 raster image 파일에는 각 픽셀이 배치될 위치와 정확히 어떤 색이어야 하는지 보여주는 정보가 포함되어 있다. 예시 - .bmp, .png, .jpg, .gif Vector image 알고리즘을 사용하여 정의된다. vector image 파일에는 컴퓨터가 화면에 렌더링할 때 이미지가 어떻게 보여야 하는지 계산하기 위해 사용할 수 있는 모양과 경로에 대한 정의가 포함되어 있다. SVG 형식은 웹에서 사용할 수 있는 강력한 벡터 그래픽을 만들게 해준다..

Web/HTML

[HTML] From object to iframe - other embedding technologies

2022.07.21

웹페이지에 다양한 콘텐츠 유형을 포함시키는 , , 지원하지 않는 리소스에 대한 fallback content 지원 안함 PDF의 경우 웹페이지에 포함시키기보다 다운로드하거나 다른 페이지에서 읽을 수 있도록 링크하는 것이 훨씬 낫다. 확인하기 https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding Test your skills: Multimedia and embedding - Learn web development | MDN The aim of this skill test is to assess whethe..

Web/HTML

[HTML] Video and audio content

2022.07.20

Video and audio content 비디오와 오디오 플레이어를 추가하는 방법 → , 동영상에 캡션/자막을 추가하는 방법 웹사이트 동영상 2000년대 초반 모든 종류의 비디오를 지원할 수 있을만큼 충분히 빠른 대역폭을 갖기 시작하면서 → 웹에서 오디오와 비디오를 사용 비디오 파일 >> 텍스트, 이미지 초기 HTML은 비디오나 오디오를 포함할 수 없어 Flash와 같은 기술을 활용 → HTML/CSS 기능이 제대로 작동하지 않음, 보안 문제, 접근성 문제 HTML5 사양에 , 가 추가됨 요소 Your browser doesn't support HTML5 video. Here is a link to the video instead. src → 포함하려는 비디오의 경로 controls → 사용자가..

Web/HTML

[HTML] Images in HTML

2022.07.19

Images in HTML 간단한 이미지를 HTML에 삽입하는 방법 캡션을 사용하여 주석을 추가하는 방법 HTML 이미지가 CSS 배경 이미지와 관련되는 방법 웹페이지에 이미지를 넣는 방법 이미지를 웹사이트에 넣으려면 태그를 사용한다. → empty element src 속성 하나는 꼭 사용되어야 한다. src 속성은 페이지에 삽입하고자 하는 이미지를 가리키는 경로(상대경로 or 절대경로) 상대경로 예시 검색 엔진은 이미지 파일 이름을 읽고 SEO에 포함시키므로 이미지의 내용을 표현하는 파일 이름이 낫다. 절대경로 예시 위와 같은 방식은 DNS 서버로부터 IP 주소를 처음부터 다시 찾아보는 작업을 수행하기 때문에 브라우저가 더 많은 일을 하게 만든다. ( 태그 href 속성에서 상대경로 추천했던 이유와 ..

Web/HTML

[HTML] 웹페이지를 구성하는 기본 태그

2022.07.18

01. 문서 형식 정의 태그(Document Type Definition, DTD) 출력할 웹 페이지의 형식을 브라우저에게 전달하는 태그 문서의 최상위에 위치해야 한다. 대소문자를 구별하지 않는다. HTML5 HTML 4.01 XHTML 1.0 02. html 태그 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. → 모든 요소는 html 요소의 자식 요소 글로벌 어트리뷰트를 지원 lang 어트리뷰트를 사용하는 경우가 많다. 콘텐츠 03. head 태그 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재하는 태그 메타데이터 - HTML 문서의 title, style, link, script 에 대한 데이터로 화면에 표시되지 않는 데이터 이 태그 내에는 메타데이터 이외의 화면에..

Web/HTML

[HTML] Document and website structure

2022.06.04

웹페이지는 다양한 방식으로 구성될 수 있지만 대부분 유사한 구성 요소를 가진다. header 일반적으로 제목과 로고 등이 있는 부분 navigation bar 메뉴 버튼이나 링크, 탭으로 표현되는 부분 main content 웹 페이지에서 주요 콘텐츠를 포함하고 있는 부분 sidebar 보조 navigation system으로 사용되거나 정보, 링크, 인용 부호, 광고 등으로 사용되는 부분 footer 페이지의 바닥 부분으로 저작권 정보, 회사 정보, 연락처 등을 포함하고 있다.

Web/HTML

[HTML] Advanced text formatting

2022.06.04

인용구, 서술문, 컴퓨터 코드 및 관련 텍스트, 첨자, 위첨자, 연락처 정보 등을 표시하는 방법에 대한 내용이다. Description lists 용어 및 정의, 질문 및 답변과 같은 일련의 항목 및 관련 설명을 표시하는 것이다. (실제로 FAQ 페이지 같은 곳에서 사용될까?) 태그 사용 - 용어, 질문과 같은 상위 항목(description term) - 답변과 같은 하위 항목(description definition) 하나의 에는 여러개의 가 존재할 수 있다. Blockquotes 블록 레벨 콘텐츠의 섹션(문단, 여러 단락, 리스트등)이 인용된 경우 이를 나타내는 요소로 감싸야 한다. cite 속성으로 출처를 표기한다. Inline quotations 요소를 사용한다는 것만 제외하면 블록 레벨 인용구..

Web/HTML

[HTML] Creating hyperlinks

2022.06.04

Hyperlink? 하이퍼텍스트 문서 안에서 모든 형식의 자료를 연결하고 가리킬 수 있는 참조 고리 URL은 HTML 파일, 텍스트 파일, 이미지, 텍스트 문서들, 비디오 및 오디오 파일 등 웹 상에서 존재할 수 있는 어느 것이라 할지라도 연결할 수 있다. 링크의 구조 title - 해당 페이지에 어떤 종류의 정보가 포함되어 있는지와 같은 링크에 대해 보충할 추가 정보 href - 이동할 링크 The naver homepage Block level 링크들 Block level 요소들이라고 해도 link로 바꿀 수 있다. ( 와 사이에 해당 요소를 넣기만 하면 된다.) Document fragments(문서 조각) 해시(#) 기호를 추가하여 HTML 문서 내부의 특정 부분에 링크할 수 있다. The com..

Web/HTML

[HTML] HTML text fundamentals

2022.06.04

시맨틱 웹(Semantic Web) 대부분의 인터넷 사용자는 원하는 정보를 취득하기 위해 Google 이나 Naver 와 같은 검색 사이트를 이용하므로 웹사이트가 검색엔진에 노출되는 것이 매우 중요하다. SEO(검색엔진 최적화; Search Engine Optimization) 도구를 사용해 검색엔진이 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 한다. 검색 사이트 이용자가 검색할만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다. (→ 인덱싱) 인덱스를 생성할 때 웹사이트의 HTML 코드가 사용된다. 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지할 수 있어야 하는데 이때 시맨틱 요소(Semantic Element)를 해석하게 된다. HTML으로 작성된 문..

Web/HTML

[HTML] Metadata in HTML

2022.06.04

HTML head 요소는 페이지를 열 때 웹 브라우저에 표시되지 않는다. 역할은 페이지에 대한 메타데이터를 포함하는 것이다. 이나 CSS의 링크, 파비콘(favicon), 다른 메타데이터(작성자, 중요한 키워드와 같은 HTML에 대한 내용)을 포함한다. 요소 메타데이터 : 데이터를 설명하는 데이터 문서의 character 인코딩 저자와 설명 추가 name 속성 : 메타 요소가 어떤 정보의 형태 가지고 있는지 표현 content 속성 : 실제 메타데이터의 콘텐츠 CSS와 JavaScript 적용하기 rel="stylesheet" href="" - 스타일 시트 파일의 경로 head에 들어갈 필요가 없고 태그 바로 앞, 문서 본문의 맨 끝에 넣는 것이 좋다. 외부 스크립트 파일을 지정하는 대신 스크립트를 안에..

티스토리툴바