웹 페이지 만들고 배포하기 - HTML5 그동안 살펴본 HTML5 기초 문법만으로 엉성하지만 간단한 웹 페이지를 만들고 웹에 배포(www.netlify.com)까지 해 보았습니다. 처음 만들어본 페이지라 디자인 요소는 거의 사용하지 않았으며, 계산이 필요한 부분은 자바스크립트를 사용하여 결괏값을 페이지에 간단하게 뿌려지게 만들었습니다. HTML의 여러 기능들을 직접 적용하며 각각의 요소들이 어떻게 구현되는지를 살펴보는 게 주 목적입니다. 그러다 보니 페이지 구석구석 부족한 부분이 많지만 그래도 생각한 만큼의 필요 기능을 습득하는데 상당한 도움이 된 계기가 되었습니다. 이번에 작성된 웹 페이지는 프로그래밍 학습의 연장이라 생각하여 웹에 있는 HTML 템플릿 파일을 사용하지 않고 만들어 가독성이 다소 떨어질 수 있는 점을 미리 알려드립니다. ^^ .. 2021. 12. 14. 웹 페이지에 동영상/오디오 파일 재생하기 - HTML5 예전에는 웹에서 음악파일을 재생하거나 비디오 파일을 재생하려면 별도의 프로그램(플러그인)을 설치하여 실행하였습니다. 심지어 재생하려는 파일들이 표준화되지 않아 비디오 파일별 코덱을 설치해야만 했습니다. 하지만 최근 HTML5에서는 다양하지는 않지만 가장 널리 사용되는 비디오 & 오디오 파일을 보다 편리하게 재생하거나 불러올 수 있도록 합니다. 아직 일부 파일들에 대해 전용 플러그인이 적용되지만 예전보다는 많이 나아졌죠?! (통상 현재 사용되는 HTML5를 버전별로 분류하지 않고 그냥 HTML이라고 칭합니다. 예전 버전과 구분이 필요할 때만 HTML5, HTML4로 표기하겠습니다.) 앞서 언급된 외부 플러그인(HTML 자체에서 처리할 수 없는 파일을 처리할 때 사용)을 웹 페이지에 적용하기 위해 태그에서 .. 2021. 12. 14. 구조적인 웹페이지를 위한 시맨틱 태그(Semantic Tag) 살펴보기 – HTML5 HTML4에는 없고 HTML5에는 있는 시맨틱 태그(semantic tag)에 대해 살펴봅니다. 시맨틱 태그는 태그 자체가 특별한 기능을 하는 것이 아닌 웹 페이지의 구조를 일목요연하게 파악할 수 있게끔 돕는 기능을 합니다. 시맨틱 태그를 적용하지 않고도 페이지를 작성할 수 있으나 시맨틱 태그를 적용한 페이지가 좀 더 구조적이라 할 수 있습니다. 태그만 보고도 어디가 제목이며 어디가 메뉴이고 어느 부분이 본문 내용인지 쉽게 파악할 수 있습니다. 이렇게 시맨틱 태그를 적용하게 되면 화면을 읽어주는 기능을 구현할 때 어느 부분이 제목이며 어느 부분이 본문인지를 쉽게 구분하며, 검색 사이트를 통해 해당 페이지의 본문을 검색할 때 또는 부터 검색하지 않고 또는 태그에서 바로 검색할 수 있게끔 합니다. 결론을 말.. 2021. 12. 14. input 태그 속성에 대해 자세히 살펴보기 – HTML5 태그를 이용하여 폼을 만드는 방법에 대해 살펴봤습니다. 사용자들이 폼을 좀 더 사용하기 쉽게 만들기 위해 태그의 여러 속성들에 대해 살펴봅니다. 텍스트 입력창에 힌트를 표시하거나 필수 입력항목 등의 지정을 태그 속성으로 지정할 수 있습니다. autofocus 속성은 웹 페이지가 열리자마자 원하는 요소에 마우스 커서를 표시하며 바로 입력 가능하게 합니다. placeholder 속성은 사용자가 텍스트를 입력할 때 해당 필드에(텍스트 상자)에 힌트 등을 표시하게 되며 입력이 시작되면 힌트는 사라집니다. readonly 속성은 사용자 입력을 받지 않고 해당 필드를 읽기 전용으로 변경합니다. 사용법은 readonly="true", readonly="readonly" 또는 그냥 readonly만 사용해도 해당 기능.. 2021. 12. 14. 이전 1 2 3 다음
