HTML

HEEYUN·2021년 1월 23일

HTML CSS JS

목록 보기

1/3

💡 HTML 문법

기본 형태

태그는 각자의 의미를 가지고 있으며 다음과 같은 형태를 가진다.

<TAG></TAG>
<TAG>CONTENT</TAG>

태그는 열리고 닫히는 태그 구조를 가지고 있으며 이는 한 쌍이다.
이 구조는 태그의 범위를 만들어 준다.
태그와 요소는 같지만 정확한 의미는 다르다.

⭐ 닫히는 태그는 태그 이름 앞에 /가 붙는다.

<!--- 대주제 --->
<h1></h1>

h1 ~ h6 : 주제
p : 문단

속성(Attributes)과 값(Value)

태그(요소)의 기능을 확장하기 위해 속성을 사용할 수 있다.

<TAG 속성="값"></TAG>

<img src="./my_photo.jpg" alt="내 프로필 사진" />
<div class="animal">cat</div>

src : 삽입할 이미지의 경로 지정 (source)
alt : 이미지를 출력하지 못하는 상황에 이미지 대신 보여질 텍스트 지정 (alternative)
class : 태그 별명

부모와 자식 요소

<PARENT>
	<CHILD></CHILD>
</PARENT>

자식의 자식 👉🏻 후손(자손, 하위) 요소
부모의 부모 👉🏻 조상(상위) 요소

부모와 자식 요소는 상대적인 개념이다.
요소가 가지고 있는 구조를 판단할 수 있다.
CSS를 HTML에 적용하는 상황에서 굉장히 중요한 개념으로써 사용한다.

빈 태그

닫히는 개념이 없는 태그이며, 범위가 존재하지 않는다.

<!--- `/`가 없는 빈 태그 --->
<TAG>
  
<!--- `/`가 있는 빈 태그 --->
<TAG/>
<TAG />

개발 환경에 따라 달라진다.
<TAG> : HTML 1,2,3,4
<TAG/>, <TAG /> : XHTML, 린트(Lint) 환경

태그가 가진 의미보다 그 의미를 확장해서 쓸 수 있는 속성="값"의 형태가 빈 태그에 포함된다.

⭐ **혼용해서 사용하면 안된다.**

💡 HTML 문서의 범위

<!DOCTYPE html>
<html>
  <head>
    문서의 정보
  </head>
  <body>
    문서의 구조
  </body>
</html>

HTML (전체 범위)

<html> 는 HTML 문서의 전체 범위를 지정한다. (시작, 끝)

웹 브라우저가 해석해야 할 HTML 문서가 어디에서 시작하며, 어디에서 끝나는지 알려주는 역할을 한다.

HEAD (정보 범위)

웹 브라우저가 해석해야 할 HTML 문서의 정보 범위를 지정한다.

정보

웹 페이지의 제목
문자 인코딩 방식
연결할 외부 파일의 위치
웹 페이지를 구조화하기 위한 기본 세팅 값

👉🏻 화면을 구성하기 위한 기본 설정

BODY (구조 범위)

웹 브라우저가 해석해야 할 HTML 문서의 구조 범위를 지정한다.

구조

로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 입력창, 팝업, 광고 등 보이는 모든 것들

👉🏻 사용자가 화면을 통해서 볼 수 있는 내용(콘텐츠)의 형태나 레이아웃 등을 의미한다.

👉🏻 BODY 범위 안에서만 생성한다.

DOCTYPE (DTD, 버전 지정)

마크업 언어에서 문서 형식을 정의한다.
버전 중 어느 버전을 사용하는지 명시한다.

HTML 버전

1, 2, 3, 4, X-, 5

현재의 표준 모드는 HTML5 이다.

<!--- HTML 5 --->
<!DOCTYPE html>

X-HTML 버전을 사용하는 사이트가 꽤 많다.

💡 HTML 문서의 정보(head 태그)

TITLE

HTML 문서의 제목을 정의한다.
웹 브라우저의 각 사이트 탭에서 이름으로 표시된다.

<head>
  <title>네이버</title>
</head>

구조화하기 보다 정보를 나타내는 태그이며 아이콘 표시는 별개이다.
웹 사이트의 제목이나 이름 그 자체이다.

속성	의미	값
charset	문자 인코딩 방식	UTF-8, EUC-KR 등..
name	검색엔진 등에 제공하기 위한 정보의 종류	author, description, keywords, viewport 등..
content	name 이나 http-equiv 속성의 값을 제공

LINK

외부 문서를 연결할 때 사용한다.

특히, HTML 외부에서 작성된 CSS (html, icon) 문서를 불러와 연결할 때 사용한다.
빈 태그이다.

<head>
  <link rel="stylesheet" href="./css/main.css">
  <link rel="icon" href="./favicon.png">
</head>

속성	의미	값
rel	(필수)현재 문서와 외부 문서와의 관계를 지정	stylesheet, icon 등..
href	외부 문서의 위치를 지정	경로

STYLE

CSS를 외부 문서에서 작성하여 연결하는 것이 아니고 HTML 문서 내부에 작성할 때 사용한다.

<style>
  img {
    width: 100px;
    height: 200px;
  }
  p {
    font-size: 20px;
    font-weight: bold;
  }
</style>

⭐ 반드시 style 태그 안에 작성해야 한다.

SCRIPT

JS 파일을 불러오거나 HTML 문서 안에서 작성할 수 있다.

<!-- 불러오기 -->
<script src="./js/main.js"></script>

<!-- 작성하기 -->
<script>
  function windowOnClickHandler(event) {
    console.log(event);
  }
  window.addEventListener('click', windowOnClickHandler);
</script>

💡 HTML 문서의 구조(body 태그)

DIV

'div'는 'division'의 약자로 '분할'을 뜻하고 문서의 부분이나 섹션을 정의한다.

명확한 의미를 가지지 않기 때문에 정말 많은 경우 단순히 특정 범위를 묶는(wrap) 용도로 사용한다.
모양을 만들어내는데 특화

묶인 부분

👉🏻 CSS를 통해서 예쁘게 꾸미거나 JS를 통해서 동작을 제어한다.

IMG

HTML에 이미지를 삽입할 때 사용한다.

<body>
  <img src="./kitty.png" alt="야옹이">
</body>

속성	의미	값
src	(필수)이미지의 URL	URL
alt	(필수)이미지의 대체 텍스트(alternate)를 지정

📚 참고

HEEYUN

파이팅

이전 포스트