프론트엔드를 공부하면 가장 기본적인 3가지가 나옵니다. HTML(Hypertext Markup Language), CSS(Cascade Style Sheet), Javascript입니다.

HTML은 Sir Tim Berners-Lee에 의해 제안된 언어이고 문서의 웹 페이지의 뼈대를 구성합니다. 본래 '마크업(Markup)'이라는 용어는 출판계에서 유래하였습니다. 출판사에서 편집자는 출판을 위해서 원고에 다양한 정보를 따로 표기하였습니다. 예를 들어 주석, 수정 사항, 서식 지정등을 표시하였습니다. 이러한 작업을 '마크업(Markup)

프론트엔드 기술을 공부하는 데 중요한 핵심 포인트를 잘 설명해 주셨네요! 😊 HTML, CSS, 그리고 JavaScript의 기본 개념을 알기 쉽게 전달해 주셔서 많은 분들이 도움이 될 것 같아요. 계속해서 좋은 정보 공유 부탁드려요! 👍

원티드 회원들의 커리어 성장과 행복을 돕는 AI입니다.

원티드 에이전트

프론트엔드를 공부하면 가장 기본적인 3가지가 나옵니다. HTML(Hypertext Markup Language), CSS(Cascade Style Sheet), Javascript입니다.

HTML은 Sir Tim Berners-Lee에 의해 제안된 언어이고 문서의 웹 페이지의 뼈대를 구성합니다. 본래 '마크업(Markup)'이라는 용어는 출판계에서 유래하였습니다. 출판사에서 편집자는 출판을 위해서 원고에 다양한 정보를 따로 표기하였습니다. 예를 들어 주석, 수정 사항, 서식 지정등을 표시하였습니다. 이러한 작업을 '마크업(Markup)'이라고 불렀고 이때 단순히 정보만 전달하는게 아니라 원고의 구조와 형식을 지정 하였습니다.

따라서 HTML은 문서(=웹 페이지)의 구조를 알려줍니다. HTML은 태그(Tag)로 구분하여 문서의 구조와 서식을 보여줍니다.  HTML과 영국 기사님에서 삽입된 HTML을 한번 살펴 봅시다. 그전에 html의 가장 기본적인 구조는  > ,  ,  등등으로 이루어져 있습니다. 이 모든걸 하나하나 설명하는건 깊이가 너무 들어가니 필수 태그인 와 만 설명하도록 하겠습니다.

[지난번 글에서 보여준 '원티드' 글쓰기 챌린지의 HTML입니다.]
각 태크듣 '<>'로 둘러 쌓여 있습니다. 우선 태그 안의 자잘한 설정은 각자 의미가 있지만 더 깊이 들어가면 머리가 아프니 빨간색으로만 다시 한번 보려고 합니다.

이처럼 html은 브라우져로 하여금 작성된 문서의 구조를 파악하게 하여 작성자가 의도한 대로 구조화 하고 렌더링을 하게 됩니다.
[잘 모르시는 분도 많겠지만 '메모장'도 훌륭한(?) 코드 에디터 입니다.]
순수하게 HTML로만 html문서를 작성하면 웹페이지가 되게 심심합니다. 우리가 보는 웹페이지는 이렇게 단조롭지 않고 다양한 디자인이 들어가는데 이 디자인 기능을 해주는 역할을 하는것이 바로 CSS(Casecade Style Sheet)입니다.

초기 HTML에서는 문서의 기본적인 배치 기능만 제공하였습니다. 문서의 스타일과 레이아웃은 태그의 속성이나 특수한 태그(, 등)를 이용하여 그야 말로 기본적인 스타일링만 가능하였습니다.

이후 W3C에서 1996년 CSS Level 1을 발표하게 됩니다. 이때 당시 HTML의 태그에 디자인적 요소를 잔뜩 욱여넣어 개발하는것이 일반적이었다고 합니다. 본래 html은 문서의 구조화를 목적으로 개발된 언어인데 웹페이지 디자인 언어로 전락하였고 본래 목적과 다르게 사용되다보니 html의 구조가 너무 복잡해져서 유지보수도 어려워지고 있었습니다. 여기에 html의 본래의 목적을 다시 살리고자 디자인 요소를 때로 분리하는 목적으로 CSS가 만들어 졌습니다.
[글쓰기 챌린지 CSS를 확인할 수 있습니다.]
CSS는 이후 많은 업데이트가 이루어지게 되었고 웹 페이지의 디자인을 담당하게 되었습니다. 단순히 문자의 색, 글씨 크기 뿐만 아니라 flex와 grid로 대표 되는 레이아웃, 반응형 미디어 쿼리, 이벤트(주로 hover-over나 click)에 따른 애니매이션(animation)과 트랜지션(transition)까지 그 기능이 확대되었습니다.

프론트엔드를 공부하면 가장 기본적인 3가지가 나옵니다. HTML(Hypertext Markup Language), CSS(Cascade Style Sheet), Javascript입니다.

HTML은 Sir Tim Berners-Lee에 의해 제안된 언어이고 문서의 웹 페이지의 뼈대를 구성합니다. 본래 '마크업(Markup)'이라는 용어는 출판계에서 유래하였습니다. 출판사에서 편집자는 출판을 위해서 원고에 다양한 정보를 따로 표기하였습니다. 예를 들어 주석, 수정 사항, 서식 지정등을 표시하였습니다. 이러한 작업을 '마크업(Markup)'이라고 불렀고 이때 단순히 정보만 전달하는게 아니라 원고의 구조와 형식을 지정 하였습니다.

따라서 HTML은 문서(=웹 페이지)의 구조를 알려줍니다. HTML은 태그(Tag)로 구분하여 문서의 구조와 서식을 보여줍니다.  [HTML과 영국 기사님](https://social.wanted.co.kr/community/article/109749?utm_source=wanted&utm_medium=share)에서 삽입된 HTML을 한번 살펴 봅시다. 그전에 html의 가장 기본적인 구조는 <html> > <link>, <style> <head>, <body> 등등으로 이루어져 있습니다. 이 모든걸 하나하나 설명하는건 깊이가 너무 들어가니 필수 태그인 <head>와 <body>만 설명하도록 하겠습니다.

[지난번 글에서 보여준 '원티드' 글쓰기 챌린지의 HTML입니다.]
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fimage.wanted.co.kr%2Foptimize%3Fsrc%3Dhttps%253A%252F%252Fstatic.wanted.co.kr%252Fcommunity%252Ftemp%252F589dac1e7b8caadfbe7b2ba3bea9896080cce4c46b3699ed0beb64a684f1bdee%26w%3Dinherit%26q%3D80&w=inherit&q=80)각 태크듣 '<>'로 둘러 쌓여 있습니다. 우선 태그 안의 자잘한 설정은 각자 의미가 있지만 더 깊이 들어가면 머리가 아프니 빨간색으로만 다시 한번 보려고 합니다.

<html> : 해당 문서가 HTML로 작성된 문서라는 것을 알려줍니다. 특이한 경우가 아니면 대부분의 태크는 열고 닫는 한쌍으로 이루어져 있습니다. 태그의 시작은 <html> 끝은 </html>로 작성하며 그 사이에 있는 태그는 <html>태그의 '자식(child)' 태그라고 부릅니다.

<head> : 문서에서 화면에 표시되지 않는 정보들을 작성합니다. 예를 들어 문서의 제목(<title>) 각종 메타데이터(문자 인코딩, 검색 키워 등등)를 작성합니다. 이러한 정보를 바탕으로 브라우져는 문서를 알맞게 해석하고 렌더링 할 수 있게 됩니다. 특히! SEO(Search Engine Optimization)를 하는데 이 <head> 태크안에 <meta>태그와 엄청난 씨름(?)을 하게 됩니다.

<body> : 문서의 본문을 나타냅니다. 웹 페이지의 시작이며 <body>태그 안에 또 수많은 태그들을 포함하게 됩니다. 예를 들어 제목에 많이 사용하는 <h1>태그, 구획을 나누는 <div>태그, 폼을 나타내기 위한 <form>태그와 각종 <input>태그 등등을 포함합니다.

이처럼 html은 브라우져로 하여금 작성된 문서의 구조를 파악하게 하여 작성자가 의도한 대로 구조화 하고 렌더링을 하게 됩니다.
[잘 모르시는 분도 많겠지만 '메모장'도 훌륭한(?) 코드 에디터 입니다.]
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fimage.wanted.co.kr%2Foptimize%3Fsrc%3Dhttps%253A%252F%252Fstatic.wanted.co.kr%252Fcommunity%252Ftemp%252F8e0c553d60b59bd6b2b66aad39fcef9cbb76801834929dd1cf250d1a5cf572b5%26w%3Dinherit%26q%3D80&w=inherit&q=80)순수하게 HTML로만 html문서를 작성하면 웹페이지가 되게 심심합니다. 우리가 보는 웹페이지는 이렇게 단조롭지 않고 다양한 디자인이 들어가는데 이 디자인 기능을 해주는 역할을 하는것이 바로 CSS(Casecade Style Sheet)입니다.

초기 HTML에서는 문서의 기본적인 배치 기능만 제공하였습니다. 문서의 스타일과 레이아웃은 태그의 속성이나 특수한 태그(<font>, <b>등)를 이용하여 그야 말로 기본적인 스타일링만 가능하였습니다.

이후 W3C에서 1996년 CSS Level 1을 발표하게 됩니다. 이때 당시 HTML의 태그에 디자인적 요소를 잔뜩 욱여넣어 개발하는것이 일반적이었다고 합니다. 본래 html은 문서의 구조화를 목적으로 개발된 언어인데 웹페이지 디자인 언어로 전락하였고 본래 목적과 다르게 사용되다보니 html의 구조가 너무 복잡해져서 유지보수도 어려워지고 있었습니다. 여기에 html의 본래의 목적을 다시 살리고자 디자인 요소를 때로 분리하는 목적으로 CSS가 만들어 졌습니다.
[글쓰기 챌린지 CSS를 확인할 수 있습니다.]
![](https://image.wanted.co.kr/optimize?src=https%3A%2F%2Fimage.wanted.co.kr%2Foptimize%3Fsrc%3Dhttps%253A%252F%252Fstatic.wanted.co.kr%252Fcommunity%252Ftemp%252F9f1a460560c7269855bdf28ef66417d97b719cfa5905e5887266e6b7e867ef0f%26w%3Dinherit%26q%3D80&w=inherit&q=80)CSS는 이후 많은 업데이트가 이루어지게 되었고 웹 페이지의 디자인을 담당하게 되었습니다. 단순히 문자의 색, 글씨 크기 뿐만 아니라 flex와 grid로 대표 되는 레이아웃, 반응형 미디어 쿼리, 이벤트(주로 hover-over나 click)에 따른 애니매이션(animation)과 트랜지션(transition)까지 그 기능이 확대되었습니다.


프론트엔드 - HTML와 CSS

글쓰기챌린지

글쓰기챌린지