Web/HTML
지금 바로 사이트에 픽토그램 넣는 법 Font Awesome
지금 바로 사이트에 픽토그램 넣는 법 Font Awesome
2021.08.02들어가며 웹에서 앱과 같은 경험을 주고자하는 시도가 많아지면서, 웹사이트 제작시 아이콘은 필수적인 요소가 되었습니다. 아이콘 혹은 픽토그램은 사용자에게 전달하고자하는 복잡한 정보를 간단한 이미지로 보여줄 수 있습니다. "메뉴모음"이라는 단어가 아닌 햄버거 아이콘으로 모두가 이해하는 아이콘으로 보여줌으로써 사용자가 좀 더 깔끔한 웹사이트를 이용한다는 경험을 느끼게할 수 있습니다. 웹사이트에 픽토그램을 넣는 방법은 다양하게 있으나 주로 웹 아이콘 폰트를 이용하며, 일부 사용이 무료이면서 가장 유명한 것이 Font Awesome입니다. Font Awesome의 특징 1. HTML의 font 스타일 속성이 모두 사용 가능 Font Awesome은 이미지가 아닌 웹 폰트이기 때문에 HTML의 font 스타일을 모..
input 태그의 type 속성 종류와 예제
input 태그의 type 속성 종류와 예제
2021.01.21HTML에서 양식을 만들 때, form 태그를 사용하고, input 태그를 통해 입력 영역을 만듭니다. 입력 영역의 종류는 다양하며 type 속성의 값에 따라 동작 방식이 현격히 달라집니다. 특성을 지정하지 않는 경우 기본값은 text입니다. input 태그의 type 속성값 속성 설명 text 기본값으로 한 줄의 텍스트 입력 칸을 만듭니다. (기본 너비 문자는 20입니다.) password text 속성과 같지만, 입력 문자를 별표(*)로 대체해서 표시합니다. checkbox 선택 항목 중 여러개를 선택할 수 있는 체크박스를 만듭니다. radio 선택 항목 중 1가지만 선택 가능한 라디오 버튼을 만듭니다. button 누를 수 있는 기본 버튼을 만듭니다. submit 전송 버튼을 만듭니다. reset ..
[HTML5] <audio> 요소
[HTML5] <audio> 요소
2020.04.12HTML 요소는 문서의 소리 콘텐츠를 포함할 때 사용한다. HTML5 이전에는 웹 페이지에서 오디오를 들려주기 위한 표준안이 없어서 오디오를 삽입하기 위해서는 플래시와 같은 외부 플러그인에 의존해야했다. 하지만 HTML5에서는 요소를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공한다. src 값 또는 요소를 사용하여 하나 이상의 오디오 소스를 지정할 수 있으며, 다수를 지정한 경우 가장 적절한 소스를 브라우저가 자동으로 선택한다. MediaStream을 사용하면 미디어 스트림을 할 수도 있다. 오디오 파일 형식 HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, OGG이다. 오디오 관련 요소 요소 설명 오디오와 음악 등 오디오 파일을 명시한다. audio 요소의 원본..
[HTML] 🤔 HTML이란?
[HTML] 🤔 HTML이란?
2020.01.11🤔 HTML이란? HTML은 웹페이지를 만들기 위한 하이퍼텍스트 마크업 언어(HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는 의미의 웹 페이지를 위한 지배적인 마크업 언어다. HTML은 다음과 같은 특징을 가지고 있다. HTML은 태그를 통해 웹 페이지의 구조를 알려준다. HTML은 다양한 요소들로 이루어져있다. HTML은 브라우저에게 어떤 것이 보여질 지를 알려준다. HTML은 태그를 통해 표현된다. HTML 태그는 머릿말, 문단, 표 같은 것들을 라벨링한다. 📄 간단한 HTML 문서 첫 머릿말 첫 문단 해당 문서의 의미는 다음과 같다. 라는 선언은 해당 문서가 HTML5라는 것이다. 요소는 HTML 페이지의 root 요소이다. 요소는 문서에 대한..
[HTML] HTML DOM(Document Object Model)
[HTML] HTML DOM(Document Object Model)
2019.11.27HTML DOM(Document Object Model)이란? DOM은 W3C(World Wide Web Consortium) 표준으로 DOM은 문서를 접근하기 위한 표준을 정의합니다. W3C DOM은 프로그램들과 스크립트들이 콘텐츠나 구조, 문서의 스타일에 동적으로 접근하고 수정하기 위한 플렛폼이자 언어 중립적 인터페이스입니다. W3C DOM 표준은 3개로 나뉘어져 있습니다. Core DOM - 모든 문서 종류에 대한 표준 모델 XML DOM - XML 문서에 대한 표준 모델 HTML DOM - HTML 문서에 대한 표준 모델 DOM은 문서의 구조화된 표현 제공을 통해, 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여 그들의 문서 구조 및 스타일이나 내용등을 변경할 수 있게 합니다. 우리..
[HTML] WAI-ARIA란?
[HTML] WAI-ARIA란?
2019.07.30최근 Vue.js로 Auto Completion(혹은 Auto Suggestion)모듈을 만드는 과정에서 여러 라이브러리에서 WAI-ARIA 이라는 키워드가 계속 나와서 이를 정리해보았다. WAI-ARIA란? WAI-ARIA의 정의를 위키피디아에서 찾아보자. WAI-ARIA는 Web Accessibility initiative - Accessible Rich Internet Application의 약자로 웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, JS 및 관련 기술로 개발된 사용자 인터페이스 구성요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술사양입니다. 출처: 위키피디아 가장 중요한 키워드는 접근성(Accessibility, A11Y)이다. 과거 사이트를 조작하기 위..
[HTML] 시맨틱(Semantic) HTML을 짜보자
[HTML] 시맨틱(Semantic) HTML을 짜보자
2019.02.12시맨틱(semantic) HTML?시맨틱(Semantic) HTML을 직역하면 의미론적 HTML이 됩니다. 아직도 뭘 의미하는 건지 모르겠죠? 의미론적이란 언어에서 단어와 구절의 의미를 아는 것을 뜻합니다. Semantic elements란 의미를 가진 elements를 뜻하죠. HTML에서 semantic element는 해당 element의 의미를 브라우저와 개발자 모두에게 알려줄 수 있습니다. 시맨틱하지 않은(non-semantic) elements의 예시 와 이 있습니다. 이 element는 내용물에 대한 어떠한 것도 알려주지 못합니다. 와 으로만 이루어진 코드는 실제 돌아가긴 하겠지만, 나중에 내용물에 대한 어떤 정보도 알 수 없게 됩니다. 시맨틱한(semantic) elements의 예시 , ..