Web/HTML8 HTML5의 콘텐츠 분류 체계에 대해서 알아보자 서론 기존 HTML은 인라인과 블록요소, 이렇게 크게 두 가지로 구분되었는데요. 2014년에 HTML5가 새롭게 개편됨에 따라서, 태그에 대한 분류 또한 더욱 다양해졌습니다. 그래서 오늘은 총 10가지의 태그 분류 체계에 대해서 알아보며, 기존 태그 분류와의 차이점은 무엇인지 함께 알아가봅시다. 본론 컨텐츠 분류 카테고리는 다음과 같습니다. 물론 웹 개발을 할 때, 이 모든 분류를 다 암기하고 있어야 하는 것은 아닙다만, 무의식적으로 분류하던 태그들을 의식적으로 분류하고자 노력하는 것이 전에 비해 더 나은 개발을 위해 도움이 되리라 생각합니다. Flow Content Phrasing content Metadata Content Sectioning Content Heading Content Interact.. Web/HTML 2022. 4. 20. [HTML] Input readonly와 disabled의 차이점은 무엇인가? 서론 정말 오랜만에 HTML 포스팅을 올리는데요, 오늘은 기본 html Input의 속성 중 비슷한듯(?), 다른 두 속성에 관해 비교해보겠습니다. 본론 아마 많은 분들이 disabled와 readOnly를 사용자가 Input에 값을 입력하지 못하도록 처리하기 위해 사용하실 것입니다. 두 요소 모두, 해당 역할을 수행할 수 있습니다. 그러나 차이점은 폼에 해당 Input value 값이 포함되느냐 마느냐의 여부입니다. 아래 예제를 살펴봅시다. See the Pen form readonly vs disabled by joonfluence (@joonfluence) on CodePen. 차이점이 보이시나요? disabled된 Input의 value는 폼 값에 포함되지 않습니다. 따라서 사용자의 입력은 막고 .. Web/HTML 2022. 4. 13. 프론트엔드 면접 질문 정리 ① HTML 질문 doctype은 무엇을 하나요? doctype은 docuemnt type의 약자이다. 이는 웹 브라우저에게 해당 문서의 HTML 버젼을 알려주는 역할을 한다. 여러 언어로 되어 있는 콘텐츠의 페이지를 어떻게 제공하나요? 여러 언어로 제공되는 페이지를 제공하기 위해선 페이지 내의 내용이 하나의 일관된 언어로 표시되어야 한다. 브라우저가 HTTP 요청을 서버에 보내면, 대게 Accept-Language와 같은 기본 언어에 대한 설정 정보를 보낸다. 서버는 이 정보를 확인하고 해당 언어에 맞는 문서를 반환한다. 이 때 태그의 lang 속성을 선언해줘야 한다. 서버는 일반적으로 백엔드 프레임워크의 도움을 받아, 특정 언어로 HTML 마크업에서 YML 또는 JSON 형식의 특정 언어에 대한 placeholder와.. Web/HTML 2021. 5. 10. [기타] script, script async, script defer의 차이점 우리는 HTML과 Javascript를 활용하여, 웹 프로그래밍을 할 때 아래와 같이 body 태그가 끝나는 지점 바로 위에 script 태그를 지정해준다(외부 파일에서 가져올 떈 그런데 이 방법은 완벽한 해결책이 아니라고 한다. HTML 문서 자체가 아주 큰 경우를 가정해보면, 브라우저가 HTML 문서 전체를 다운로드 한 다음에 스크립트를 다운받게 하면 페이지가 정말 느려질 것이기 때문이다. 이에 대한 대안은 script 태그에 defer 속성을 추가하는 것이다. defer 속성이 있는 스크립트(이하 defer 스크립트 또는 지연 스크립트)를 '백그라운드’에서 다운로드한다. 따라서 지연 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않는다. 그리고 defer 스크립트 실행은 HTML 파싱이 .. Web/HTML 2020. 11. 20. [HTML] HTML 요소들 정리하기 : 구획, 메타데이터, 멀티미디어 등 이미 HTML5에 대해 여러 차례 다룬 바 있지만, 전체적인 관점에서 조망할 기회는 없었기에 이번 글을 통해서 정리하고자 한다. 오늘은 현재 HTML5를 구성하는 요소들을 전부 살펴보며, 알지 못했던 부분들이 있으면 채우고 알고 있던 부분들은 더욱 자세하게 알기 위하여 글을 작성하겠다. 먼저 HTML(Hyper Text Markup Language)이란 웹 사이트의 기본 정보에 속하는 마크업 언어이다. Hyper Text란 간단히 말하여, 링크와 같이 다른 사이트를 참조할 수 있는 형식의 문자를 말한다. 웹에서 수많은 정보들이 연관되고 참조되는 모습을 우리는 쉽게 상상할 수 있으리라. 또한 마크업 언어란 와 같이, 여는 태그와 닫는 태그로 이루어진 것들을 말하며, 아래와 같이 태그 안에 들어가는 정보와 .. Web/HTML 2020. 11. 11. [WEB] Adobe Flash Player와 HTML5 & WebGL 플래시 플레이어는 1996년에 처음으로 출시되었다. 처음에는 FutureWave Software라는 회사에서 애니메이션을 만들기 위한 소프트웨어(벡터 애니메이션을 표현할 수 있도록 지원한 제품)였다. 그러나 96년 MacroMedia라는 회사에서 FutureWave사를 인수하면서, 브라우저 상에서 동작할 수 있도록 플러그인(웹 브라우저의 일부로서 쉽게 설치되고 사용될 수 있는 프로그램을 말한다. 넷스케이프 브라우저를 통해 사운드나 동영상을 재생하거나, 기타 다른 기능들을 수행해주는 추가 프로그램들을 다운로드하여 설치하고 또 정의할 수 있도록 한 것이 그 시초이다) 형태로 바뀌었고, 이는 곧 웹 디자인 영역에서 활발하게 쓰이기 시작했다. MacroMedia사에서 ECMA스크립트 기반의 액션스크립트 (AS).. Web/HTML 2020. 11. 10. [HTML] Doctype(Document Type)과 개방형 웹 플랫폼 HTML5 HTML은 버젼마다 제공하는 태그들이 다른데, 각 버젼에 따른 Doctype을 선언해줌으로써 HTML의 버젼을 알려준다. Doc의 Document를 HTML이라고 보아도 무방할 것이다. 그렇다면 그 종류에는 무엇이 있는가? 가장 최근 버젼인 HTML5의 선언 방법은 다음과 같다. (그 외 HTML 4.01 등 다양한 버젼을 선언하는 방법이 있지만, 검색을 통해 알 수 있는 부분이므로 다루지 않겠다) 또한 이 외에도 HTML5(발표일 2014년 10월 28일)에서 추가된 태그들을 살펴봄으로써 웹이 어떠한 측면에서 개선을 위해 노력했는지도 살펴볼 수 있다. Sementics 1) 섹션 구분 태그 기존에는 div태그로 내용들을 나누어 주었다. 그러나 컴퓨터에게 아무런 의미가 없는 태그에 불과하다. 해당 영역이.. Web/HTML 2020. 11. 9. [웹 개발 기록기]HTML을 통해, 개인 웹페이지 만들기 컴퓨터에 대해서 오랜시간 사용하면서, 한번도 던지지 않았던 질문을 한 것은 일주일 전이었다. 웹이란 무엇인가? 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다 - 네이버 지식백과 웹을 활용하여, 개인 웹페이지를 사용해봤던 경험은 초등학교 4학년 때가 처음이었던 것 같다. 채팅 어플리케이션인 '버디버디'를 활용하면서, 자연스레 개인 홈페이지를 갖게 되었으니 말이다. 본격적으로 활용했던 건 '싸이월드'가 나온 이후였다. 그 당시 핫했던 싸이월드를 하면서, 웹 공간 상에 나의 기록을 남길 수 있다는 사실을 어렴풋이 알게 된 것 같다. 공부만 하던 고등학교 시절을 지나, 대학교에 입학한 이후로는 instagram이나 facebook 등의 SNS를 써왔다. 이제는 명.. Web/HTML 2020. 6. 6. 이전 1 다음 반응형
