프런트엔드 개발자가 꼭 알아야 하는 지식 - HTML 역사

프런트엔드 개발 언어 하면 어떤 게 가장 먼저 떠오르시나요? 아마 HTML, CSS, 자바스크립트가 떠오르시지 않았을까 생각합니다. 단언컨대, 프런트엔드의 가장 기본이자 핵심이 되는 언어는 HTML, CSS, 자바스크립트이니까요. 그래서 대부분의 프런트엔드 개발자는 HTML, CSS, 자바스크립트를 잘할 줄 알아야 합니다. 그리고 생각보다 현업이나 취업을 준비하는 사람들도 저 세 가지 언어는 잘하는 사람이 엄청 많습니다. 하지만 역사는 아마 대부분 잘 모르실 거로 생각해요. 프런트엔드에 관심 있는 사람이라면 저 세 언어의 간단한 역사 정도는 알고 있으면 좋을 것 같은데요! 이번 글에서 제가 HTML의 역사를 짧게 소개해 드리도록 할게요! 🔥 최초의 월드 와이드 웹 구성 🔥 웹의 아버지라고 불리는 팀 버너스리(Timothy John Berners Lee)는 인터넷에서 전달되는 데이터를 단순히 플로피 디스켓 같은 외부 저장 매체나 컴퓨터 자체의 저장 매체로 받아오는 것이 아니라 눈에 보이는 형태로 만들어 저장하고 싶었습니다. 또 정보와 정보 사이에 연결성이나 연속성도 갖추게 하고 싶었습니다. 팀 버너스리는 그러한 형태를 만들 수 있는 컴퓨터 언어가 없을지 고민하다가 한 언어를 발견합니다. 바로 자신이 속한 유럽 입자 물리 연구소(CERN)에서 사용하던 SGML(Standard Generalized Markup Language)이라는 마크업 언어입니다. 마크업 언어(Markup Language)란 문서의 특정 부분이나 요소를 일반 텍스트와 다른 것으로 표시하기 위해 사용하는 언어입니다. 기본적으로 웹 페이지와 같은 응용 프로그램에서 텍스트 형식을 지정하고 특정 구조를 만드는 데 사용합니다. 팀 버너스리는 마크업 언어의 특징을 살려 일반 텍스트와 구분되는 특별한 텍스트를 정의하고, 그러한 텍스트를 사용해 정보를 시각적으로 볼 수 있는 웹 페이지를 만들고 싶었습니다. 하지만 SGML은 팀 버너스리가 생각하는 웹 페이지를 만들기에는 조금 부족했습니다. 팀 버너스리는 단순히 정보를 시각화하는 것에 그치지 않고 정보와 정보가 끊임 없이 연결되는 일종의 월드 와이드 웹(World Wide Web)을 구상했지만 SGML로는 정보와 정보를 연결할 수 있는 마땅한 방법이 없었기 때문입니다. 🔥 HTML의 탄생 🔥 이런 와중에 팀 버너스리는 당시 유명했던 컴퓨터 과학자인 테드넬슨(Theodor Holm Nelson)이 구상한 하이퍼텍스트(Hyper Text)라는 개념에 관심을 갖기 시작합니다. 테드넬슨이 구상한 하이퍼텍스트는 '한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트'를 의미했습니다. 팀 버너스리는 하이퍼텍스트의 개념을 SGML처럼 하나의 마크업 언어에 포함시키면 웹 페이지와 웹 페이지 간의 연결을 쉽게 할 수 있을 것이라 생각했습니다. 그는 하이퍼텍스트의 역할을 정의하는 <a> 태그를 만들었습니다. 그리고 기존의 SGML 마크업 언어 형식에 하이퍼텍스트를 담당할 <a> 태그를 추가해 1991년 HTML 언어의 초기 설계를 제안했습니다. 이후 첫 HTML 버전이 1993년에 공개되며 오늘날 사용하는 HTML이 되었습니다. <참고> 인터넷의 아버지 테드넬스 테드넬슨은 하이퍼텍스트를 처음 구상한 사람으로 오늘날 인터넷의 아버지라고 불리는 컴퓨터 과학자입니다. 테드넬슨이 1960년부터 진행한 제나두 프로젝트(Project Xanadu)는 최초의 하이퍼텍스트 프로젝트로, 훗날 팀 버너스리가 월드 와이드 웹 개념을 세우는 데 큰 영향을 줬습니다. </참고> 웹의 아버지라고 불리우는 팀 버너스리와 인터넷의 아버지라고 불리우는 테드넬슨, 두 과학자(연구자)의 노력이 없었다면 오늘날의 HTML은 없었을지도 모르겠네요. 😊 더 많은 프런트엔드 기술과 관련 정보, 로드맵이 궁금하시다면! 제가 이번에 집필한 <아는 만큼 보이는 프런트엔드 - 한 권으로 보는 프런트엔드 로드맵과 학습 가이드> 에서 조금 더 확인해 보실 수 있습니다! 🚀 교보문고: http://gilbut.co/c/23091331Eo 🚀 YES24: http://gilbut.co/c/23098124bF 🚀 알라딘: http://gilbut.co/c/23098896Pw

아는 만큼 보이는 프런트엔드 개발 | 김기수 - 교보문고

kyobobook.co.kr

아는 만큼 보이는 프런트엔드 개발 | 김기수 - 교보문고

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2023년 10월 5일 오전 3:24

댓글 0

    함께 읽은 게시물

    WWDC 2025 감상. 애플은 여전히 진짜 필요한 걸 잘 만드는구나. 엄청난게 아니라, 별거 아닌 것 같지만 사람들이 매일 필요로 하는 걸 정말 잘 찾아서 제대로 만든다. 스티브 잡스가 떠난지 강산이 한 번 바뀐 시간 이후에도 계속 이렇게 하는게 대단하다는 생각도 들고, 뭔가 좌절스럽기도 하고.. 🫠



    👋 서비스가 AI를 활용해 사용자 경험을 구축하는 방법

    기업들은 어떻게 AI를 활용해 사용자 경험을 변화시키고 있을까요? 네이버, 배달의민족, 구글, 에어비앤비, 토스의 사례 살펴보기!

    네이버부터 에어비앤비까지, AI를 활용한 UX

    Brunch Story

    네이버부터 에어비앤비까지, AI를 활용한 UX

    < K-POP의 진짜 시작은 1978년이었다(?) >

    1

    ... 더 보기

    🌟 디테일의 간격 시리즈! [✏️ 테이블 디자인 시 10가지 참고사항] (👀간단 요약) 좋은 테이블 디자인은 사용자가 데이터를 쉽게 확인하고, 비교할 수 있으며 원하는 조건에 따라 빠르게 정렬할 수 있습니다. 대시보드, 가격비교 화면, 구매 페이지, 배송일정 등을 확인할 때 텍스트 위주로 표기해주는 것보다 직관적으로 안내할 수 있는 테이블 디자인이 자주 쓰이는데요. 조금 더 구체적으로 살펴보면 아래와 같은 특징을 갖고 있어요. - 웹, 모바일에 최적화된 상태로 데이터 전달 및 확인 가능 - 사용자가 확인해야 할 데이터를 하나에 담을 수 있음 - 수정 및 추가가 쉬움 - 화면 내 인터페이스 로딩 속도 증가 - 상대적으로 깔끔한 레이아웃 유지 가능 📌 인터페이스에 가장 적절한 행 스타일 찾기 ✓ 행 스타일은 사용자가 데이터를 빠르게 찾고자 할 때 얼마나 도움이 되는지 결정하는 요소 ✓ 격자의 활용 : 엑셀, 스프레드시트 등에서 일반적으로 사용하는 스타일로 세로와 가로선을 모두 활용해 데이터 구분 가능. 다만 너무 많은 그리드가 포함될 경우 집중이 흐트러진다는 단점이 있어 상세한 데이터를 제공해야 할 때 활용하는 것이 좋음 ✓ 가로... 더 보기

    20 Creative Table UI Design Examples You Should Know in 2021

    Medium

    20 Creative Table UI Design Examples You Should Know in 2021

    1인 개발자의 최고의 사무실은 바로 자기집 방구석

    ... 더 보기

    최고의 사무실은 바로 우리집 방구석

    K리그 프로그래머

    최고의 사무실은 바로 우리집 방구석