HTML이 뭘까?

세상에 존재하는 모든 웹페이지는 HTML로 작성한다

  • HTML = 웹사이트의 구조를 이루는 뼈대
  • CSS = 웹사이트에 살을 붙이고 옷을 입혀 스타일링
  • JS = 웹사이트가 사용자와 상호작용할 수 있도록 움직임을 더하는 관절

HTML (Hypertext Markup Language)

→ Markup Language 즉, 마크업 언어는 “자료의 구조 (웹페이지)를 표현하기 위한 언어”

  • 진짜 더 쉽게 풀어서 설명하면,
  • 웹페이지의 내용(content)와 구조(structure)를 담당하는 언어로써 HTML태그를 통해 정보를 구조화하는 것

우리가 웹페이지에 글, 버튼 등을 넣는 것이 ‘자료를 입력하는 것’이다.

그 자료들이 어디에 배치되는지 같은 것들을 기록하기 위해 존재하는 언어를 HTML이라 한다.

✅ HTML 문서는 .html로 끝나도록 파일을 만들면 된다

✅ HTML 파일 기본 템플릿

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8">
    <title>Documetn</title>
  </head>

  <body>
    
  </body>
</html>
  • <> 열린태그 </> 닫힌 태그 : HTML은 열린 태그가 있다면 반드시 같은 언어로 닫힌 태그가 있어야 한다
  • <!DOCTYPE html> : 문서 형식을(document type)을 HTML5로 지정
  • <html> </html> : 실질적인 HTML document의 시작과 끝
  • <head> </head> : document title, 외부 파일의 참조, 메타데이터 설정 등의 정보가 들어감
    • 이 정보들은 브라우저에 표시되지 않음
  • <body> </body> : 웹 브라우저에 출력되는 모든 요소 (웹페이지에 단 하나만 존재)

! → tab : 하면 해당 템플릿이 생성된다

HTML 핵심 요소

<p> : 시작 태그

HELLO WORLD : 콘텐츠

</p> : 종료 태그

→ HTML 요소는 시작 태그, 종료 태그, 태그 사이 위치한 콘텐츠로 구성되어 있다.

중첩 요소

요소는 중첩이 가능하다. 즉, 요소는 다른 요소를 포함할 수 있다

<body>
	<h1>안녕하세요!</h1>
	<p>반갑습니다!</p>
</body>

이 중첩 관계를 웹페이지 구조를 표현하는 것이다.

빈 요소

콘텐츠를 가질 수 없는 요소이다. Attrubute (어트리뷰터 : 속성) 만 가질 수 있다

<meta charset="utf-8">

 

✅Attribute란?

요소의 성질, 특징을 정의하는 명세이다. 즉, 요소에 추가적인 정보를 제공한다.

위 메타 예제에서 charset=”utf-8” 부분이 속성이다.

  • src : 어트리뷰트명
  • “html.png” : 어트리뷰트 값
<img src = "html.jpg" width = "104" height = "142">
  • src : 이미지 파일의 경로와 파일명
  • width : 이미지의 너비
  • height : 이미지의 높이

→ 이 어트리뷰트들을 통해 정보들을 브라우저에 알려준다

이 정보들을 사용하여 브라우저가 img 요소를 화면에 출력한다

글로벌 어트리뷰트

모든 HTML요소가 공통적으로 사용할 수 있는 어트리뷰트

주석

주로 개발자에게 코드를 설명하기 위해 사용되며 브라우저는 주석을 화면에 표시하지 않는다

 

HTML 핵심 개념 중 하나인 hyperlink

우리가 텍스트를 눌러서 다른 웹사이트나 페이지로 이동할 수 있게끔 만들어주는 하이퍼링크

a 태그가 그 역할을 담당한다

  • herf : 이동하고자 하는 파일의 위치(경로)를 값으로 받음
  • target : 링크를 클릭했을 때 창을 어떻게 오픈할지 지정
    • _self : 링크를 클릭했을 때 연결문서를 현재 윈도우에서 오픈
    • _blank : 링크를 클릭했을 때 연결문서를 새로운 윈도우나 탭에서 오픈

파일 경로란? 파일 시스템에서 파일의 위치를 나타내는 방법

  • 절대 경로
    • 현재 작업 디렉토리와 관계없이 특정 파일의 절대적인 위치
    • 루트 디렉터리 기준으로 파일 위치를 나타낸다
    • ex) /index.html
    • / - 우리 프로젝트의 폴더 구조상 최상위 디렉토리
    • ex) <http://www.mysite.com/index.html>
    • URL
  • 상대 경로
    • 현재 작업 디렉토리를 기준으로 특정 파일의 상대적인 위치를 가리킴
    • ex) ./index.html
    • ./ - 작업 중인 파일의 위치한 디렉토리
    • ex) ../dist/index.js
    • ../ - 작업 중인 파일의 부모 디렉토리
    • <a href="../home.html>home이동</a>
target=”_blank”
target=”_blank” 로 외부 페이지를 새 탭으로 오픈하는 경우, 이동한 외부 페이지에서
자바스크립트 코드를 사용해 악의적인 페이지로 리다이렉트 할 수 있는 보안 취약점(피싱 공격) 있을 수 있기 때문에 rel="noopener noreferrer” 추가해서 공격에 대비할 것을 권장합니다.

 

시맨틱 태그란?

시맨틱 태그는 왜 중요할까?

웹 사이트는 검색 엔진에 노출되는 것이 굉장히 중요하다.

SEO(검색엔진 최적화)를 위해 본인 웹사이트를 검색하기 알맞은 구조로 조정하기도 하는데, 이것도 최적화 잘해주려면 웹사이트 정보가 잘 수집된다는 것이 전제로 깔려야 한다.

→ 즉, 검색엔진이 HTML코드들로 해당 코드의 의미를 파악해야 해서 시맨틱 태그를 써야 한다.

<font size="6"><b>Hello</b></font> // A
<h1>Hello</h1> // B

A코드와 B코드는 눈에 보이는 결과물은 동일하지만,

  • A코드에 사용된 태그들은 의미론적 중요성을 가지고 있지 않다.
  • B코드는 h1 태그를 사용함으로써 제목 태그 중에서 상위 레벨 이라는 의미를 내포한다.
    • 즉, 검색 엔진은 해당 코드가 가장 중요한 제목 키워드라는 것을 알게 된다.

결론 : semantic tag란, 브라우저, 검색 엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.

웹 표준? 접근성?

웹 표준

브라우저마다 다르게 보이는 현상을 예방하기 위해 표준화된 언어를 사용하며 어떠한 브라우저를 사용하더라도 동일한 결과물을 보여주는 것을 웹 표준이라 한다.

즉, 어떤 운영체제나 브라우저에서든 동일한 콘텐츠를 볼수 있도록 웹페이지를 만들 때 지켜야 하는 규칙

웹 접근성

웹 접근성은 누구에네가 동등한 기회 제공을 위해 웹 사이트에서 제공하는 정보를 동일하게 이용할 수 있도록 보장하는 것

저작자표시 (새창열림)

'BoostCamp' 카테고리의 다른 글

[250304] CI/CD  (0) 2025.03.04
[250228] Git 전략과 협업 방법  (0) 2025.02.28
[250227] Git에 대해, 협업 시 버전 관리의 중요성 및 사용법  (0) 2025.02.27

티스토리툴바