HTML, CSS의 정의

728x90

프론트 엔드를 공부하면서 당연하게 사용하였던 HTML과 CSS

단순히 마크업언어, 스타일 시트라고 생각하고 사용했지만
지금 취업준비를 하는 과정에서 기본을 제대로 정의하고 나아가고 싶은

마음에 정리하는 자료(문법은 적지 않을거얌)

HTML은 HyperText Markup Language의 약자

웹 페이지를 작성하기 위한 표준 마크업 언어이다.

HTML은 웹페이지의 구조를 정의하고,

그 안에 콘텐츠(텍스트, 이미지, 동영상 등)를 배치하는 역할을 하는데,

HTML 문서는 여러 개의 요소(elements)로 이루어져 있고, 이

요소들은 서로 중첩되거나 연결될 수 있다.

HyperText: 하이퍼텍스트는 웹 페이지 간에 링크를 생성하여 서로 연결할 수 있는 구조.

이러한 링크 덕분에 사용자는 한 웹 페이지에서 다른 웹 페이지로 쉽게 이동이 가능하다.

Markup Language: 마크업 언어란 태그 등을 사용하여

텍스트 내에 메타데이터를 포함시키는 방식의 언어.

HTML에서는 "<>"와 "</>" 사이에 위치한 태그 이름으로 요소들을 표현하며,

이런 요소들이 결합해 전체 페이지 구조를 형성

시맨틱 마크업: HTML에서 제공하는 의미를 가진 태그들을 사용하여

웹 페이지의 정보를 구조화하고, 그 정보의 의미를 명확하게 표현하는 방법

ex) <header>, <footer>, <article>, <section>, <nav> 등이 있다.

예시로 div태그만 사용한다면 이 태그가 무슨역할을 하는지 알기 어렵다.

<div id="header">...</div>
<div id="main">...</div>
<div id="footer">...</div>

하지만 시맨틱태그를 사용한다면 역할을 분명하게 정의할 수 있다.

<header>...</header>
<main>...</main>
<footer>...</footer>

시맨틱마크업을 사용하면 따라오는 장점은

가독성: 사람이 코드를 읽을 때 해당 요소가 어떤 내용을 담고 있는지 쉽게 이해 가능
접근성: 스크린 리더 등 보조 기술에 대한 지원이 향상되며, 이를 통해 웹사이트 접근성도 개선
SEO(검색 엔진 최적화): 검색 엔진은 웹 페이지의 내용과 구조를 파악하여 검색 결과 순위를 결정하는데,
시맨틱 마크업은 검색 엔진에게 페이지의 주요 콘텐츠와 구조 정보를 명확하게 전달하여 SEO에 향상에 도움이 된다.

CSS는 Cascading Style Sheets의 약자로,

웹 페이지의 디자인과 레이아웃을 꾸미는데 사용되는 스타일 시트 언어

HTML이 웹 페이지의 구조를 정의하는 것에 반해,

CSS는 이러한 구조가 어떻게 보여질지를 결정합니다.

Cascading: 캐스케이딩은 스타일 규칙(CSS는 규칙 기반 언어)이 특정 순서에 따라 적용

여러 CSS 규칙이 같은 요소에 적용될 경우,

CSS는 몇 가지 규칙(인라인, id, class, 외부스타일 등)을 사용하여

어느 스타일을 우선적으로 적용할지 결정

Style Sheets: 스타일 시트란 문서의 외관을 제어하기 위한 일련의 규칙들을 모아 놓은 것인데,

한 스타일 시트 내에서 여러 가지 스타일 규칙을 정의할 수 있다.