[HTML, CSS] HTML, CSS란 무엇인가

Lily·2022년 2월 25일

preWecode

목록 보기

1/9

HTML, CSS란 무엇이며 필요한 이유

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>제목</title>
</head>
<body>
 우리 눈에 보여지는 부분
</body>
</html>

<head> :  문서를 정의하는 데이터가 위치함
<title> : 웹 브라우저의 툴바, 즐겨찾기, 검색 엔진의 결과 페이지에 제목으로 표시되는 부분
<body> :  웹 브라우저를 통해 보이는 내용 /문서에 표시되는 컨텐츠가 위치함

정보를 정의 하는 형식을 의미한다. 태그의 기본 구조는 아래와 같다.

<태그명 속성명1="속성값1" 속성명2="속성값2"> 컨텐츠 </태그명>
 <link href="style.css" rel="stylesheet"> 컨텐츠 </link>

웹페이지를 예쁘게 하기 위해서 HTML을 사용하지 않고 웹페이지 전체를 이미지로 만들 수도 있다. 하지만 이는 웹의 핵심적인 철학인 접근성(accessibility)을 위반한다. 웹을 통해 누구나 차별없이 정보에 접근할 수 있어야 한다.

예를 들어서,
시각장애가 있는 사람은 스크린리더(screen reader)와 같은 프로그램을 이용해서 정보를 청각화해서 접하게 된다. 따라서 HTML이 필요하고도 중요한 이유 중 하나이다.

정보(HTML)와 디자인(CSS)을 분리할 수 있다.
(HTML에서 디자인 분리함으로써 시각장애인을 위한 프로그램인 스크린리더가 HTML을 해석할 수 있도록 할 수 있다.)
정보를 수정하지 않고 디자인만 변경할 수 있다.
검색엔진이 HTML을 해석 가능하도록 하기 때문에 더 많은 방문자들이 방문하도록 유도할 수 있다.
CSS는 이런 문제를 동시에 해결할 수도 있고, 웹 페이지 정보와 스타일을 분리하여 유지보수를 수월하게 할 수 있습니다

HTML, CSS, JavaScript의 관계

.html, .css, .js 세 종류의 파일을 연결하는 방법

  <head>
    <link href="style.css" rel="stylesheet">
    <script defer src="main.js"></script>
  </head>

link 태그에 반드시 명시되어야 하는 필수 속성으로, 현재 문서와 외부 리소스 사이의 연관 관계를 명시한다. 검색 엔진이 링크에 대한 더 많은 정보를 수집할 때 사용이 되어 사용자에게 더 정확한 검색 결과를 주는데 사용된다.