'HTML' 태그의 글 목록

Web/JavaScript

[JavaScript] HTML 파일에서 JavaScript 파일 효과적으로 로드하기

2022.07.29

브라우저의 렌더링 엔진은 HTML 문서를 파싱할 때 순차적으로 읽어들인다. 예를 들어, 아래와 같은 HTML 문서를 파싱한다하면 버튼 위에서 아래로 파싱을 진행하는데 중간에 script 태그를 만나면 파싱을 멈추고 script 파일을 로드하고 실행시킨다. script 파일이 다음과 같다면, 아직 button 요소를 파싱하기 전에 button DOM 요소에 접근하게 되어 문제가 발생한다. console.log("Hello World"); let btn = document.querySelector("#btn"); btn.addEventListener("click", function () { alert("Hello Wolrd"); }); 전체 흐름을 정리하면 다음과 같다. HTML parsing script ..

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] HTML text fundamentals

2022.06.04

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

Web/HTML

[HTML] HTML: Hypertext Markup Language

2022.06.04

HTML HTML은 웹을 이루는 가장 기초적인 구성 요소로 웹상에서 콘텐츠의 의미와 구조를 정의할 때 사용한다. CSS(style sheet language) : 웹 페이지의 모양/표현 JavaScript (programming language): 기능/동작 HTML은 웹 브라우저에 표시되는 콘텐츠(글과 이미지 등)를 표시하기 위해 Markup을 사용한다. 마크업 언어 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한가지 - 종류 : XML, HTML, 등 ... HTML 발전 과정 웹 상의 콘텐츠들을 다양한 환경(브라우저)에서 열람해도 동일하게 볼 수 있도록 하나의 표준화된 언어를 만들 필요성이 생기게 되었다. SGML을 기반으로 HTML은 표준화 과정을 거쳐 현재는 HTML5가 표준이 되..

티스토리툴바