Front-end/HTML 4

웹 접근성(Accessibility) with HTML

이 글에서는 웹 접근성과 HTML을 활용한 웹 접근성을 알아볼 예정입니다. What is Web Accessibility? 웹 접근성을 얘기할 때는 말 그대로 모든 유저가 "웹 사이트를 이용할 수 있는가"를 얘기합니다. 비장애인 분들은 사이트를 이용하실 때 큰 불편함이 없으시겠죠. 하지만 장애가 있으신 분들 혹은 고령자 분들이 웹 사이트를 이용할 때 부분적으로 한계가 있습니다. 그런 부분을 고려해서 모두가 웹사이트를 이용할 수 있게 하는 방법을 얘기합니다. What should we consider for web accessibiltiy? 웹 접근성을 고려해서 코딩을 할 때는 크게 6가지 사항을 고려하셔야 합니다. auditory (청각) cognitive (인지) neurological (신경) phy..

Front-end/HTML 2020.04.24

폼(Form)과 유효성 검사

What is Form? HTML 에서 이라는 요소는 사용자에게서 얻은 정보를 모으기 위해서 사용됩니다. 예를 들어서 네이버에 접속을 하시게 되면 아이디와 비밀번호를 입력하는 창이 있습니다. 사용자한테서 입력하는 그 공간이 으로 이루어져있다고 생각하시면 됩니다. 이렇게 입력된 정보들은 웹 서버와 웹 프로그램을 거쳐서 나중에 사용자가 보고 있는 브라우저에 결과물을 보여줍니다. HTML Form elements HTML Form에는 다양한 종류의 elements들일 존재하는데요. 그 중 몇 가지를 예시로 알아보겠습니다. The Element 은 폼 요소들 중에서 가장 중요한 요소로 여겨집니다. 또한 여러가지 속성을 가지고 있는데 그 속성에 따라서 다양하게 보여집니다. Text Fields Radio Butt..

Front-end/HTML 2020.04.21

의미론적(Semantic) 태그

What are Semantic Elements? 의미론적 태그들은 웹 브라우저나 개발자들에게 명확하게 의미를 묘사하는걸 뜻합니다. , , 같은 요소들은 의미론적인 태그들로 여겨지게 됩니다. 왜냐하면 이 태그들 안에 있는 컨텐츠들을 정확하게 묘사하는 것 자체가 목적이기 때문이죠. 사실 Semantic tag가 없어도 코드가 돌아가기는 합니다. 하지만 브라우저나 개발자가 그 코드를 읽고 해석할 때 Semantic tag가 있냐 없냐에 따라서 그 코드의 의미가 다르게 다가 올 수도 있죠. 그래서 코드를 짤 때 정확하게 의미를 부여하는게 중요합니다. Semantic Elements in HTML HTML Element 태그는 문서 안에 section을 정의하는데 사용됩니다. 다시 말해서 본문을 넣는다고 생각하..

Front-end/HTML 2020.04.20

HTML 첫 걸음

What is HTML? HTML이란 Hypertext Markup Language의 약자로서 인터넷 문서인 웹 문서를 만드는 마크업 언어입니다. How is HTML different than other languages? 엄밀히 말하자면 HTML은 프로그래밍 언어가 맞습니다. 하지만 HTML은 선언형 언어에 속한다고 합니다. 선언형 언어가 무엇이냐면 웹 페이지에 "뭐가 있어야 돼!"라고 선언하는 기초적인 언어라고 합니다. HTML의 이름에서 보이듯이 Markup은 "태그"라는 것을 사용해서 프로그래밍을 하게 됩니다. 위에 사진에서 보듯이 , , 등 다양한 태그로 문서를 작성하게 됩니다. HTML Basic Examples HTML Documents 지금 F12를 눌러서 HTML이 만들어진 코드를 살펴..

Front-end/HTML 2020.04.19