리액트 퍼블리셔 가이드 2편

들어가는 글

안녕하세요. 이 글은 퍼블리셔 초심자 분들을 위한 가이드입니다.
해당 글이 도움이 되길 바랍니다.
이번 글은 HTML을 주제로 HTML에 대한 내용만 집중적으로 이야기하려고 합니다.
더불어 이전 내용을 읽어보지 않은 초심자라면
리액트 퍼블리셔 가이드 이전 편을 먼저 읽어보시고 오길 권장드립니다.

1. HTML 소개

1-1 HTML이란?

HTML은 웹에서 처음 배우는 언어인만큼 가장 기본적인 언어입니다.
웹사이트의 기본구조는 HTML로 되어있습니다.
디자인을 담당하는 CSS나 동적 요소를 담당하는 JavaScript를 배우기 위해선
기본 구조를 담당하는 HTML을 먼저 배울 필요가 있습니다.

HTML 단어 뜻

HTML은 HyperText Markup Language 의 약자입니다.
HyperText란 우리가 문서작성을 할 때 가끔 보이는 링크를 생각하시면 쉽습니다.
링크를 누르면 해당 페이지로 넘어가게 되는데,
이렇게 문서와 문서를 연결시켜서 넘어갈 수 있게 하는 것이 HyperText입니다.

(HyperText 예시)

Markup Language는 문서의 구조를 표현하는 언어 중 하나입니다.
이 문서의 구조를 표현 할 때 사용하는 것이 태그<> 인데요,
태그는 원래 문서의 주석이나 교정부호를 표현하기 위한 것이었습니다.
하지만 점차 용도가 확장되어 문서의 구조를 표현하는 역할을 하게 되었습니다.

HTM은 데이터를 기술하는 정도의 언어이기 때문에 프로그래밍 언어와는 구별됩니다.

(HTML 예시)

정리해보면, HTML은 링크로 연결된 웹 문서들을 구조화하기 위한 언어 입니다.

참고

1-2 HTML 공부 방식

태그 타이핑(단순 암기X)

HTML의 태그들이 어떤것들이 있는지 한번씩 보고
타이핑해보는 것이 공부방법입니다.

처음 공부하시는 분들이라면, 모든 태그들을 암기하려고 하실 수 있습니다.
하지만 코딩은 항상 오픈북이기 때문에, 영어 단어 외우듯 달달 외우는 것은 절대 비추천합니다.
어떤 태그가 있는지 한 두번 정도 타이핑 해보고
이런 태그가 있구나 숙지하고 빠르게 넘어가는 것이 좋습니다.

처음 타이핑을 할 때는 꺽쇠(부등호 기호)나 괄호, 따옴표 등의 기호를
키보드로 입력하는 것이 어색할 것입니다.

일반적인 타이핑에선 쓰지 않는 기호들을 입력해보면서,
타이핑을 익숙하게 만드는 것도 중요합니다.

태그를 한번씩 타이핑하다보면
태그 종류가 무엇이 있는지 공부도 되고
타이핑 연습도 자연스럽게 됩니다.

1-3 HTML 공부환경 만들기 (IDE 설치)

통합개발환경 IDE

타이핑을 하다보면 자연스럽게 생각나는 것이 있습니다.
“이거 일일이 다 쳐야되나?”

의문이 드는 게 당연합니다.
우리가 보고 있는 이 코드들은 키보드로 하나하나 치기엔 너무 귀찮거든요.

그런 불편함을 해소하기 위해 바로 IDE라는 친구가 있습니다.
쉽게 코딩 프로그램 정도로 생각하시면 됩니다.

코딩에서 정말 중요한 코드 자동완성 기능과
코드에 오류가 없는지 검토 기능,
자주 사용하는 터미널이나 깃 연동 기타 등등 여러 기능이 있습니다.
코딩하기 편하도록 모아놓은 프로그램이
IDE라고 보시면 됩니다.

( 출처 : https://djangostars.com/blog/python-ide/ )

IDE또한 여러가지가 있습니다.
이 글에서는 Visual Studio Code 를 쓰려고 합니다.

VS Code(Visual Studio Code)

VS Code를 쓰는 이유는 간단합니다.
기능 무난하고 디자인 괜찮고, 무엇보다 무료입니다.
다른 무료 IDE도 있지만, 첫 시작을 하시는 분이라면 VS Code를 많이 추천드립니다.
다른 툴을 사용하셔도 무방합니다.

(Visual Studio 홈페이지 - https://code.visualstudio.com/ )

다운로드는 간단하게 홈페이지에서 다운로드를 실행하시면 됩니다.

설치가 되었으면
우측 메뉴에서 Extension(확장)을 클릭 후 Live Server 를 검색해줍니다.

눌러서 들어가줍니다.

인스톨을 눌러주시면 됩니다. ( 이미 설치되어 있으면 Uninstall이라고 뜹니다.)

Live Server를 설치하는 이유는
여러분들이 작업하게될 HTML 코드를 실시간으로 보기 위해서입니다.
내가 작업한 내용이 잘 되었는지, 계속 확인해봐야되는데
그럴 때마다 귀찮게 새로고침을 누르지 않아도 됩니다.

여기까지 하셨다면, 기본적인 IDE 세팅은 완료되었습니다.

모든 설치가 완료되었으면 실행을 시켜봅니다.

먼저 폴더 창에서 html 파일을 하나 만들어보겠습니다.
저는 practice.html 이란 파일을 하나 만들었습니다.

파일을 하나 만들면 빈 파일이 생성될 것입니다.

! 를 쓰고 tab키를 눌러보세요 (enter도 됩니다)
기본적인 html 구조가 만들어집니다.
(해당 기본 구조에 대한 내용은 이후 설명드리겠습니다. 지금은 IDE가 잘 작동하는지 확인)

이후 body 태그에 내용을 입력하고
화면을 우클릭해 ‘Open with Live Server’ 를 클릭합니다.

웹 브라우저가 열린텐데
body 안에 입력한 내용이 뜨면 성공!
모든 준비가 완료되었습니다.

이후 2번째 목차부터 HTML 태그에 대해 설명하겠습니다.

2. HTML 태그

2-0 태그 소개

태그란? HTML의 기본 요소 입니다.
부등호(꺽쇠: <>)로 문자를 감싸고 있는 게 바로 태그입니다.
이 태그 안에 내용을 입력할수 있습니다.
어떤 태그를 썼느냐에 따라 내용의 용도가 달라집니다.
(예시 : <div> )
(div 태그는 문단을 나누는 용도의 매우 보편적인 태그입니다.)

태그는 시작 태그와 종료 태그가 있습니다.
시작 태그는 부등호만 감싸면 됩니다.
종료 태그는 문자 앞에 슬래쉬(/)를 추가로 써주시면 됩니다.
(예시: <div> </div>)

태그의 안에 내용을 넣고 싶을 때는 그냥 넣어주시면 됩니다.
(예시 : <div> 안녕하세요 </div> )

태그의 안에 내용이 없고 종료 태그를 따로 쓰기 번거로울 때는
시작태그 뒤에 슬래쉬(/)를 쓰면 종료태그 역할도 합니다.
(예시 : <div/> )

어떤 태그는 종료 태그가 없는 단일태그도 있습니다.
(예시: <br>)

태그는 가장 기초적인 내용입니다.
내가 쓰려는 태그에 양옆으로 감싸주기만 하면 되어서 크게 어려울 것은 없는 내용입니다.

2-1 기본구조

아래의 사진이 HTML 기본 구조입니다.

설명에 앞서 태그의 속성에 대해 알아보겠습니다.
태그는 태그 내부(시작태그와 종료태그 사이)에 내용(Content)을 넣기도 하지만,
태그 자체(시작태그)에 속성(Property)를 넣을 수도 있습니다.
구조는 <태그 속성=’값'> 의 형태를 띄고 있습니다.

<!DOCTYPE html>
DOCTYPE은 문서의 타입을 의미하며, 속성으로 html이 쓰였습니다.
문서의 타입으로 html을 쓰겠다는 의미입니다.
종료 태그가 따로 필요 없는 단일태그입니다.

<html></html>
html태그 안에 html을 작성할 수 있습니다.

<head></head>
head 태그는 해당 사이트의 메타데이터들을 모아놓는 곳이라고 보면 됩니다.
(화면에 렌더링 되지 않는 부분)

<meta charset=’utf-8’></meta>
meta 태그는 문서의 색인정보를 담고 있는 태그입니다.
우리가 보는 화면의 언어는 한글이나 영어입니다.
하지만 컴퓨터가 보기엔 무수히 많은 0과 1로 이루어져 있습니다.
이는 컴퓨터에서 0과 1을 조합해 우리가 보는 한글이나 영어로 번역해주기 때문인데요.
이 때 번역하는 방식이 여러가지가 있습니다.
그 번역 방식중 우린 utf-8이란 번역 방식을 쓸 것이기 때문에
charset=’utf-8’이란 속성을 넣은것입니다.
그래서 meta 태그를 빼먹으면, 글자가 깨질 수도 있습니다.
그리고 문서가 렌더링 되기 전에 형식을 정해야 되기 때문에 head 태그 안에 넣습니다.

<title></title>
title 태그는 웹 브라우저 상단의 사이트 제목을 나타내줍니다. (사진 참고)
역시 화면 렌더링과 별개이므로 head 태그 안에 넣습니다.

그 외에 head 태그 안에 들어가는 태그로
style 태그, link 태그가 있습니다.
style 태그는 css 넣는 태그라고 보시면 됩니다.
link 태그는 외부 문서나 파일을 불러오는 태그입니다.

<body></body>
body태그는 웹브라우저에서 표시되는 화면 영역입니다.
화면렌더링 되는 부분은 모두 body 태그 안에다 작성합니다.

2-2 시멘틱 태그

시멘틱(Semantic)이란?
의미의, 의미론적인 이란 뜻을 가지고 있습니다. 시멘틱 태그는 의미를 가지는 태그란 뜻인데요.
사실 의미만 있을 뿐 기능은 없습니다. 그래서 시멘틱 태그가 없이도 html을 작성할 수 있습니다.
그럼 시멘틱 태그는 왜 필요한걸까요?

예를 들어 여러분들이 나무조각을 가지고 있다고 가정해봅시다.
이 나무조각의 이름은 모두 ‘나무조각'으로 같습니다.
근데 이게 처음 한 두개면 어느정도 구분이 되지만
백개 천개가 되면 구분이 잘 안되고 정리가 필요합니다.

그 정리하는 과정에서
종류에 따라 이름(의미)을 붙입니다.
A 나무조각 / B 나무조각 / C 나무조각
이런식으로 말이죠.

태그에도 이러한 정리가 필요합니다.
반복되는 태그가 많다보니, 정리하기 위한 태그가 필요했고
태그의 위치와 역할별로 이름(의미)이 부여된 것입니다.

왼쪽 사진과 같이 모든 태그를 이름(의미) 구분없이 쓴다면 머리가 아프겠죠?
시멘틱 태그는 오른쪽 사진같이 화면에서 하는 역할과 위치에 따라 나뉘어졌습니다.
해당 태그를 하나씩 살펴보며 설명하겠습니다.

<header></header>
header 태그는 화면의 상단에 위치합니다.
주로 로고나 검색창 등이 이곳에 위치합니다.

<nav></nav>
nav태그는 navigation의 약자로 화면의 메뉴를 주로 나타냅니다.
화면 좌측에 주로 위치하지만 header 태그와 함께, 화면 상단에 메뉴가 있는 경우도 있습니다.

<section></section>
<article></article>
section 태그는 화면의 내용을 담는 역할을 합니다.
그 안에 article 태그를 담아 내용을 구분합니다.

<aside></aside>
aside 태그는 화면 사이드쪽에 위치합니다.
사이드 배너 역할을 합니다.

<footer></footer>
footer태그는 화면 하단에 위치합니다.
주로 주소나, 저작권, 패밀리사이트 주소 등이 있습니다.

2-3 자주 사용하는 태그

블럭요소 / 인라인요소

이제부터 실질적으로 화면에 렌더링되는 태그들을 알아보려고 합니다.
(body 태그 안에 쓰이는 태그들)
div, p, span, h1, a, 등 자주 쓰이는 태그들인데요.
해당 태그들은 블럭요소냐 인라인요소냐에 따라 크게 사용방법이 달라집니다.

먼저 블럭요소입니다.
블럭요소는 화면에서 한줄 전체를 차지하는 요소를 의미합니다.
그래서 블럭요소 태그를 여러개 쓰면 여러줄로 표시됩니다.

다음은 인라인 요소입니다.
인라인요소는 콘텐츠 크기만큼만 너비를 차지하기 때문에, 다음줄로 넘어가지 않고
한줄에 여러개의 요소가 들어갈 수 있습니다.

어떤 요소를 사용하냐에 따라서
화면에 배치하는 방식이 달라집니다.
그래서 블럭요소와 인라인요소에 대한 개념이 필요합니다.
각 태그마다 기본으로 정해진 요소가 있으니 알아두면 좋습니다.

h1~h6 태그 (블럭요소)
h1, h2, h3, h4, h5, h6 태그는 heading의 약자로 제목을 의미하는 태그입니다.
기능은 글자 크기가 커져 제목에 적합해집니다.
h1은 1번째로 큰 제목이라는 뜻입니다.
반대로 h6은 6번째이니 가장 작은 제목입니다.

p 태그 (블럭요소)
p태그는 paragraph의 약자로 문장을 의미합니다.
div 태그와 같이 블럭요소이지만,
글이나 장문의 내용이 들어가는 경우 주로 사용합니다.

br 태그 (인라인요소)
br 태그는 break의 약자로 줄바꿈을 의미합니다.
주로 문장을 쓰다가 줄을 바꿔야될 때 사용합니다.
종료태그를 안써도 되는 단일태그입니다.

ul, li 태그 (블록요소)
ul은 unordered list의 약자입니다.
li는 list Item 의 약자입니다.
li 태그는 리스트 하나 하나를 의미하고,
ul 태그는 여러개의 li 태그를 감싸는 태그라고 보시면 됩니다.

화면과 같이 작성시 리스트가 나타납니다.

img 태그 (인라인요소)
img는 image의 약자로 이미지가 들어가는 태그입니다.
img태그도 종료 태그를 붙이지 않아도 되는 단일태그입니다.

img태그의 속성에는 src와 alt 가 있습니다.
src는 이미지의 경로를 넣으시면 됩니다.
alt는 이미지에 마우스를 올렸을 때 뜨는 설명입니다.

button 태그 (인라인요소)
button 태그는 말그대로 버튼 기능을 하는 태그입니다.

화면과 같이 입력시 버튼이 나타납니다.

input 태그 (인라인요소)
input태그는 사용자가 무언가 입력할수 있도록 만든 태그입니다.
input 태그는 type 속성에 따라 종류가 굉장히 많습니다.

type=”password”입니다.
입력창에 글을 입력하면 비밀번호처럼 보이지 않게 입력됩니다.

type=”text”입니다.
입력창에 글을 입력하면 내용이 입력됩니다.

type=”checkbox”입니다.
영역을 선택하면 체크가 됩니다. 여러 개 있을 때 중복 체크가 됩니다.

type=”radio”입니다.
영역을 선택하면 체크가 됩니다. 여러 개 있을 때 중복 체크가 안됩니다.

type=”date”입니다.
클릭시 달력이 뜨며 날짜를 선택할 수 있습니다.

이 외에 여러 속성이 있는데
한번씩 태그를 작성해보고 확인해보시기 바랍니다.

label 태그 (인라인요소)
label 태그는 input 클릭을 대신해주는 태그입니다.

화면과 같이 label태그로 두개를 감싸면
label 태그 내에 있는 요소를 클릭시 input이 클릭됩니다.
즉 글자를 클릭해도 input이 클릭 됩니다.

label 태그는 input 태그의 클릭을 편하게 하기위해 주로 사용합니다.
(주로 약관 동의에 체크박스에 많이 쓰입니다.)

근데 사진과 같은 경우는 요소들이 서로 가까이 붙어있어서 가능합니다.
반대로 클릭하는 대상이 멀리 떨어져 있는 경우는 어떻게 해야될까요?
그럴 땐 label 태그의 for 속성을 사용해줍니다.

label 태그에 for 속성을 추가하고 선택 대상이 되는 input의 id값을 입력합니다.
(당연히 input의 id값도 똑같이 입력해줍니다.)
그럼 위와 같이 label 태그를 클릭 시 input이 클릭됩니다.

label 태그를 통해서 input의 클릭을 편하게 만들어보세요.

table 태그 (블럭요소)

table 태그는 표를 만들 때 사용하는 태그입니다.

table 태그는 글로 읽는거보다 직접 태그를 작성해서 경험해보는 것이 이해가 빠릅니다.
직접 코드를 사용해보시고 익히시기 바랍니다.

<table></table>
전체 표를 감싸는 태그

<thead></thead>
표의 제목 부분

<tbody></tbody>
표의 내용 부분

<tfoot></tfoot>
표의 요약이나 정리 부분

<tr></tr>
표의 행 : 해당 행의 모든 셀을 감쌈
<th></th>
제목 셀

<td></td>
내용 셀

<colgroup></colgroup>
<col></col>
col은 표의 열
colgroup은 col태그를 전부 감싸는 태그
주로 열의 스타일을 입힐 때 사용
(css 배울 때 배움)

td, th의 속성
rowspan=’숫자’
세로로 숫자만큼 합침
colspan=’숫자'
가로로 숫자만큼 합침
(예시 : <td rowspan=’2’> )

여기까지 자주쓰이는 태그들을 살펴보았습니다.
태그는 외울 필요 없습니다. 나중에 보기 싫어도 계속 보는게 태그인지라 자연스럽게 외워집니다.
태그를 한번씩 작성해보시고 타이핑감도 같이 익히시는 것을 추천드립니다.

2-4 기타

  공백

html에선 공백 표현이 한번밖에 안됩니다.
코드상으론 여러번 공백을 주어도 화면엔 1번밖에 표현이 안됩니다.(사진 참조)
그래서 우리는 따로 공백을 표현할수 있는 태그를 사용하여야합니다.

이때 사용하는 코드가   입니다.
non-breaking space의 약자로
줄바꿈 없이 공백을 준다는 뜻입니다.
사용시 아래와 같이 나옵니다.

< > 부등호(태그 기호)

또한 우리가 쓰는 태그의 기호가 <>같은 부등호이기 때문에
실제로 부등호가 필요할 때는 부등호 기호를 그대로 사용할 수 없습니다.
그래서 부등호에 해당하는 코드를 입력해주어야됩니다.

위와 같이 부등호를 사용하면
해당 내용이 내용으로 인식되지 않고 태그로 인식되어
화면 렌더링 상에서는 나타나지 않습니다.

반면에 부등호 되신 <와 > 라는 코드를 쓰면 됩니다.

기타 태그

<strong></strong>
중요한 텍스트 굵게 표시

<b></b>
중요하지 않지만 굵게 표시

<em></em>
중요한 텍스트 기울게 표시

<i></i>
중요하지 않지만 기울게 표시

<sup></sup>
위 첨자

<sub></sub>
아래 첨자

<hr></hr>
구분선

<video></video>
비디오 파일

<audio></audio>
오디오 파일

video, audio의 속성
src = 파일경로
controls = 컨트롤바 표시
autoplay = 자동실행
loop = 반복 재생
muted = 음소거

끝

여기까지 HTML에 대한 이야기를 마치겠습니다.
긴글 읽어주셔서 감사합니다.

PAEDDI