2. HTML

HTML 입문

참고 링크 :
1. 생활코딩 - https://opentutorials.org/course/3084
2. Heropy - https://heropy.blog/2019/04/24/html-css-starter/
3. w3schools - https://www.w3schools.com/html/

들어가기 전에

HTML란?

HTML(Hyper Text Markup Language)은 페이지에 내용을 채우고, 그 내용이 어떤 구조와 의미를 띠는지 보여주는 언어입니다. 정보를 표현하기 위해 만들어졌으며, 웹의 구조를 만드는 역할이에요. HTML을 작성할 땐 화면을 이쁘게 하는 것보단 튼튼한 구조를 만드는 것에 집중해야 합니다. 화면을 이쁘게 만드는 것은 CSS에 맡기도록 하세요.

HTML 기본 개념

다음은 HTML 코드를 이해하기 위한 기본적인 개념입니다. 한번 짚고 넘어갑시다.

HTML은 대표적인 '마크업 언어'로 태그를 사용하여 문서의 구조를 표시한다.
※ 여기서 태그란 <tag></tag>과 같이 <>로 묶여있는 형태를 말합니다.
태그 사이에는 다른 태그를 넣을 수 있다. HTML은 이렇게 태그를 중첩해서 문서의 구조를 만든다.

<tag1>
  <tag2>중첩됩 태그</tag2>
</tag1>

HTML 기본 문법

참고)
- HTML에서는 태그를 '요소(element)'라고도 표현합니다.
- HTML는 대소문자를 구분하지 않습니다.(not Case Sensitive). 즉, <tag>는 <TAG>와 같아요.

기본 형태

태그는 기본적으로 한쌍으로 묶입니다. 이것을 닫혀있다고 표현해요.

빈 태그 (Empty)

태그 중에는 닫히는 개념이 없는 '빈 태그'도 있습니다.

<tag />

부모와 자식 요소

태그를 중첩했을 때 태그의 사이에 들어간 태그는 자식 요소라고 하고, 감싸는 태그는 부모 요소라고 합니다.

<부모tag>
  <자식tag></자식tag>
</부모tag>

주석

주석이란 코드에 영향을 미치지 않는 문장을 뜻하며, 주로 코드를 설명하는 등의 간단한 메모 용도로 사용합니다.

<!-- 이 사이에 작성 -->

요소(Element) / 속성(Attribute)과 속성값(Value)

문서를 작성하다 보면 태그만으로 어떤 속성을 표현하기는 부족합니다. 이런 경우 태그의 기능을 확장할 때 사용할 수 있는 '속성'이란 것이 있습니다.

속성(Attribute)은 태그(Element) 안에 들어가며, 값(Value)과 함께 쓰입니다.

쓰는 순서는 <요소 속성="값"> 순입니다.

<tag 속성="값"/> ... </tag>

번외)
html과 css는 거의 한 몸입니다.

원래 html에 들어있던 디자인 요소를 css로 따로 떼어낸 것이기 때문이죠.
원래 한 몸이었기 때문에 html에서 style이라는 속성을 이용하여 css를 적용할 수 있답니다. (이를 inline 스타일의 css라고 해요)

이때, style 속성은 속성값으로 CSS의 property(속성)과 value(값)을 가집니다.

<요소 속성="값">

ex) <p style="color: red">빨간색 글씨</p>

HTML 기본 구조

아래의 코드는 HTML의 기본 구조를 제일 간단하게 나타낸 코드입니다.

<!DOCTYPE html>		<!--html의 버전을 지정-->
<html>			<!--html 문서의 전체 범위를 지정-->
  <head>		<!--웹 페이지에 표시되진 않지만, 필요한 정보들이 들어가는 곳-->
     <title>Page Title</title>
  </head>
  <body>		<!--웹 페이지에 보여지는 내용들이 들어가는 곳-->
     <h1>My First Heading</h1>
     <p>My first paragraph.</p>
  </body>
</html>

여러 가지 태그가 있지만, 가장 큰 구조를 이루고 있는 아래의 4가지 태그를 먼저 살펴봅시다.

<!DOCTYPE html>
<html>
<head>
<body>

1. DOCTYPE

DOCTYPE은 작성하는 html의 버전을 나타내는 선언문입니다.

DTD(Document type Definition)라고도 해요. 2021년 기준으로 HTML5 버전이 표준입니다.

<html>은 html 문서의 전체 범위를 지정합니다.

doctype을 제외한 모든 태그는 이 안에 들어가야 합니다. 아까 위의 기본구조를 보면 <html>과 </html> 사이에 모든 태그가 들어가 있는 것을 볼 수 있어요.

3. head

<head>는 페이지에 필요한 정보들이 들어갈 범위를 지정합니다.

이 안에 들어가는 내용들은 화면에는 표시되지 않습니다 (title, favicon 제외)

페이지의 이름을 지정하는 <title> 태그나, 여러 <meta> 태그들이 이곳에 들어갑니다.

4. body

화면에 표시될 내용들이 들어갈 범위를 지정합니다.

표시될 모든 내용들(헤더, 푸터, 내비게이션, 테이블, 이미지 등)이 여기에 들어갑니다.

자, 문서의 큰 구조를 구성하는 태그들을 살펴보았습니다.

그런데 위의 태그들 만으로 코드를 짜면 문서의 전체 구조는 만들었지만 들어가는 내용이 없을 거예요.

그럼 이제 내용을 넣을 때 사용하는 가장 기초적인 태그들을 한번 알아봅시다.

기본 태그들

구조를 만들었으니 그 안의 내용을 채울 태그들을 알아볼 건데요. <head>와 <body> 중 어디에 들어가는지에 따라 나눠서 살펴보도록 하겠습니다.

head

<head></head> 사이에 사용하는 태그들은 HTML 문서의 각 정보를 의미합니다.

<title>

: 웹 페이지의 제목

<title>문서 제목. 브라우저의 탭에 표시됨</title>

<meta>

: HTML 문서에 관한 정보(인코딩 방식, 문서 작성자, 내용, 키워드 등)를 검색엔진이나 브라우저에 제공한다.

사용 속성은 3개. charset(문자 인코딩 방식 정의), name(정보 이름), content(정보 값)

<!-- <정보 인코딩방법="utf-8"> -->
<meta charset="utf-8">

<!-- <정보 정보종류="화면크기" 정보값="넓이는 기기의 크기만큼, 처음 확대값은 1배"> -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<!-- <정보 정보종류="저자" 정보값="홍길동"> -->
<meta name="author" content="홍길동">

<link>

: 외부 문서를 연결할 때 사용한다. 주로 외부에서 작성된 CSS 문서를 불러와 연결하는 용도로 사용하며, 빈(Empty) 태그다.

사용 속성은 2개. rel(현재 문서 외 외부 문서의 관계), href(외부 문서 위치)

<!--<외부문서연결 관계="스타일시트" 문서경로="./css/main.css">-->
<link rel="stylesheet" href="./css/main.css">

<!--사이트 대표아이콘 지정-->
<link rel="icon" href="./favicon.png">

<style>

: HTML 문서 내부에 CSS를 작성할 때 사용한다. (이를 Internal 방식이라 합니다)

<!--style 안의 내용은 css 문법이 적용된다. css는 아직 몰라도 된다-->
<style>
  div{ color:red; }
</style>

<script>

: 외부에 작성한 Javascript 문서를 불러오거나 작성할 때 사용한다.

<!-- script 안의 내용은 js 문법이 적용된다. 아직 몰라도 된다. -->
<script>
  console.log('hello')
</script>

body

<body></body> 안에서 사용하는 태그들은 화면에 표시되며, 모든 요소들은 해당 요소가 브라우저에 어떻게 보이는지를 결정하는 'display' 속성을 기본적으로 가집니다.

display 속성은 크게 block과, inline 두 타입의 속성 값으로 나뉘는데, 화면을 구성할 때 항상 고려해야 할 매우 중요한 개념입니다. 따라서 여러 태그를 알아보기 전에 각 타입의 특징을 먼저 알아보겠습니다.

인라인(inline) vs 블록(block)

인라인과 블록 요소의 가장 큰 차이점은 블록 요소는 새로운 라인을 만들며 라인 전체 너비를 차지하지만, 인라인 요소는 새로운 라인을 만들지 않으며 자기 자신의 내용만큼의 너비만을 가진다는 것입니다.

헷갈려도 괜찮습니다. 예시를 보면 좀 더 명확해질 거예요.

아래의 예시는 차례로 HTML 코드와 해당 화면입니다. (span은 인라인 요소, div는 블록 요소)

인라인요소는 <span style="background-color:gold">이런식으로</span> 줄 안에 들어갈 수 있다.

블록요소는 <div style="background-color:gold">이런식으로</div> 한 줄만큼을 항상 차지한다.

인라인 요소는 이런 식으로 줄 안에 들어갈 수 있다.

블록 요소는
이런 식으로
한 줄만큼을 항상 차지한다.

위에서 보이듯이 인라인은 필요한 만큼의 너비를, 블록은 라인 전체만큼의 너비를 가집니다.

HTML 입문 파트에서 인라인과 블록 개념은 여기까지만 알아도 충분할 거예요. 자세한 내용은 CSS 파트에서 다루도록 할게요.

이제 <body> 안에 들어가는 가장 기본적인 태그들을 알아보겠습니다.

<div>

: 블록 요소. 아무런 의미를 가지지 않는다. 블록 요소이면서 특별한 의미가 없기 때문에 레이아웃을 잡을 때 주로 사용한다.

<span>

: 인라인 요소. 아무런 의미를 가지지 않는다. CSS로 문장 사이의 특정 부분을 꾸밀 때, 적용할 범위를 감싸기 위해 많이 사용한다.

<h1 ~ h6>

: 블록 요소. heading의 의미로 한 구획의 대제목을 의미한다. 굵은 글씨체가 적용된다.

h1이 글씨 크기가 제일 크며, h6로 갈수록 작아진다.

<p>

: 블록요소. paragraph의 의미로 문장을 의미하는 태그.

<ol>, <ul> 그리고 <li>

: 블록요소. 리스트를 의미하는 태그. <ol>은 'Ordered List', <ul>은 'Unordered List'로 각각 순서가 있는 목록과 순서가 없는 목록을 뜻한다.

<li>는 리스트 내용을 뜻하며, 보통 <ol>과 <ul>의 자식 요소로 들어간다. 이때 <ol> 안에서는 앞에 번호가 붙고, <ul> 안에서는 동그라미가 붙는다.

<!-- 순서 있는 리스트 -->
<ol>
  <li>첫번째 리스트</li>
  <li>두번째 리스트</li>
  <li>세번째 리스트</li>
</ol>

<!-- 순서 없는 리스트 -->
<ul>
  <li>첫번째 리스트</li>
  <li>두번째 리스트</li>
  <li>세번째 리스트</li>
</ul>

첫 번째 리스트

두 번째 리스트

세 번째 리스트

첫 번째 리스트

두 번째 리스트

세 번째 리스트

<a>

: 인라인 요소. anchor의 의미로 링크를 연결할 때 사용하는 태그.

속성으로 링크 주소를 넣을 href를 가진다. 파란색 글씨와 밑줄이 적용된다.

<a href="https://google.com">외부링크</a>

외부링크

<img />

: 인라인 요소. 이미지를 넣을 때 사용하는 태그. 속성으로 이미지 경로를 넣는 src와 대체 택스트를 넣는 alt를 가진다. 빈 태그로 닫히지 않는다.

<img src="이미지파일위치" alt="이미지없을시대체택스트" />

총 정리

위에서 알아본 <body> 안의 태그들을 사용하여 간단한 HTML 문서를 작성해보았습니다.

<div style="background-color:#e7e7e7">
  <h1>오늘의 일기</h1>
  <p>오늘은 친구 <span style="color:orange">철수</span>와 놀았다.</p>
  <img src="이미지경로" alt="철수 사진" />
  <p>철수가 블로그를 만들었다고 한다. <a href="주소">철수블로그 링크</a></p>
  <h2>내일 할 일</h2>
  <ol>
    <li>일찍 일어나기</li>
    <li>공부 열심히 하기</li>
  </ol>
</div>

오늘의 일기

오늘은 친구 철수와 놀았다.

철수가 블로그를 만들었다고 한다. 철수 블로그 링크

내일 할 일

일찍 일어나기

공부 열심히 하기

태그는 이 정도만 알아놔도 충분할 거예요. 이 이상의 태그들은 앞으로 웹 개발을 하면서 필요할 때마다 조금씩 익혀가는 것이 좋습니다.

마무리

이번 글에서는 HTML의 가장 기본적인 개념들과 태그들을 다뤄보았습니다. 마무리로 여태까지 알아본 HTML 문서의 전체 모습을 한번 봅시다.

<!DOCTYPE html>
<!--전체 html 문서의 모습-->
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="author" content="bellmir" />
    <title>전체 모습</title>
    <link rel="stylesheet" href="외부css경로">
  </head>

  <body>
    <div>
      <h1>오늘의 일기</h1>
      <p>오늘은 친구 <span style="color:green">철수</span>와 놀았다.</p>
      <img src="이미지경로" alt="철수 사진" />
      <p>철수가 블로그를 만들었다고 한다. <a href="주소">철수블로그 링크</a></p>
    </div>
    <div>
      <h1>내일 계획</h1>
      <p>내일은 재원이랑 놀아야지.</p>
    </div>
  </body>
</html>

자 이제 우리는 HTML을 작성하여 웹페이지를 만들 수 있게 되었습니다.

그런데 위에 처럼 HTML만으로 코드를 작성하면 굉장히 딱딱하고 멋없는 모습의 페이지가 생성될 거에요. 이건 우리가 바라는 것과 조금 거리가 먼 모습입니다. 우리는 딱딱한 모습의 페이지 말고 이쁜 모양으로 꾸며진 페이지를 만들고 싶은데 말이에요.

그래서 다음 포스팅으로는 HTML에 멋진 스타일을 넣기 위해 사용하는 CSS의 기초를 다뤄보도록 하겠습니다.

https://bellmir.tistory.com/22?category=520496

CSS 입문

CSS 입문 참고 링크 : 1. 생활코딩 - https://opentutorials.org/course/3086/18318 2. CSS 개요- https://heropy.blog/2019/04/24/html-css-starter/ 3. CSS 속성 - https://happy-noether-c87ffa.netlify.app/p..

bellmir.tistory.com

이해가 안 되는 부분이 있다면 댓글을 남겨주세요 :)

'웹 기본' 카테고리의 다른 글

5. HTML - 중급 (Semantic Tag) (0)	2022.07.17
4. CSS - 중급 (Inline vs Block) (0)	2022.07.17
3. CSS - 입문 (0)	2022.07.17
1. Web이란? (0)	2022.07.17
0. 웹 공부 로드맵 (0)	2021.11.24

개발자로 한걸음

2. HTML - 입문

HTML 입문

들어가기 전에

HTML란?

HTML 기본 개념

HTML 기본 문법

기본 형태

빈 태그 (Empty)

부모와 자식 요소

주석

요소(Element) / 속성(Attribute)과 속성값(Value)

HTML 기본 구조

1. DOCTYPE

2. html

3. head

4. body

기본 태그들

head

body

인라인(inline) vs 블록(block)

오늘의 일기

내일 할 일

마무리

'웹 기본' 카테고리의 다른 글

댓글

티스토리툴바

2. HTML - 입문

HTML 입문

들어가기 전에

HTML란?

HTML 기본 개념

HTML 기본 문법

기본 형태

빈 태그 (Empty)

부모와 자식 요소

주석

요소(Element) / 속성(Attribute)과 속성값(Value)

HTML 기본 구조

1. DOCTYPE

2. html

3. head

4. body

기본 태그들

head

body

인라인(inline) vs 블록(block)

오늘의 일기

내일 할 일

마무리

'웹 기본' 카테고리의 다른 글

관련글

댓글

티스토리툴바