나는 어릴 적 철권 태그 게임을 했었다.
레슬링에서 터치를 하면 선수를 바꿀 수 있는 것처럼 철권 태그도 그랬다.
HTML에도 무수히 많은 태그들이 있다.(억지..)
우리는 HTML에서의 태그들에 대해 배워보도록 할 것이다.
HTML의 기본 구성
HTML이란?
"Hyper Text Markup Language"의 약자로 하이퍼 기능을 하는 언어이다.
웹 문서나 사이트를 이루는 가장 기본적인 언어라고 볼 수 있다.
하이퍼기능은 링크라고도 하는데 거미줄처럼 연결되어 텍스트가 텍스트 사이의 이동을 하는 것이다.
마크업은 문서를 편집 또는 구성하기위해 특정 표시를 하는 것을 말한다.
태그란?
HTML에서 태그는 HTML문서를 구성하는 명령어이다.
<> 이렇게 꺽쇠 안에 명령어를 넣는다.
보통은 <a></a>이런식으로 시작과 종료를 슬래쉬로 알린다.
하지만 단일 태그는 <br/>이렇게 하나의 태그로 종료하며 슬래쉬가 뒤에 있다.
자 그럼 HTML의 기본 구성을 살펴 볼까?
<!doctype html>
<html lang = "ko">
<head>
<meta charset = "utf-8">
<title>HTML의 기본구조</title>
</head>
<body>
asdasd
</body>
</html>먼저 doctype은 문서 형태를 말하고 우리는 html이라 html을 써준다.
다음, html태그와 한국어로 구성되어있음을 뜻하는 속성 lang이다.
크게 헤드와 바디로 구성되어있다.
헤드에는 인코딩 유형을 정하는 meta태그의 charset속성을 적는다.
또 창을 띄울 때 맨 위에 나타나는 제목 태그인 title태그.
바디에는 드디어 내용이 들어간다.
이때까지 말한 내용 중 알 수 있는 정보가 있다!!!
그것은 바로!!! 태그에는 명령어와 속성을 집어넣을 수 있다는 것이다.
명령어가 본체라면 속성은 그것이 할 수 있는 기능(?)이라고 생각하면 쉽다.
속성을 통해 할 수 있는 것이 많으니 잊지 말자!
제목 태그
위의 제목 태그라는 글자에도 제목 태그가 붙여졌다.
tistory에는 블로그를 html 소스로 작성할 수 있는 기능이 있는데 확인해 보면 아래와 같다.
찾으셨나요?
바로 h3이다.
제목 태그는 h1부터 h6까지 있다.
제목입니다.(h1)
제목입니다.(h2)
제목입니다.(h3)
제목입니다.(h4)
제목입니다.(h5)
제목입니다.(h6)
우리가 어떤 것을 만들던지 제목을 넣기 위함이라면 h1-h6의 태그를 넣어줌이 좋다.
제목 태그가 곧 웹 사이트의 아우트라인이 되기 때문이다.
뭔 말이냐면 사용자가 검색을 하거나 그 사이트를 찾아올 때의 검색어가 될 수 있다.
또한 사이트 내에서 찾아들어갈 때 제목을 보고 찾아들어간다.
그래서~~ 제목이 너무 많으면 찾아가기 복잡하고 골치 아프다.
잘 만든 사이트는 직관적이어야 한다.(꼭 필요한 아웃라인만을 사용하는 것이 좋다.)
※카더라통신
지금까지 한 내용은 메모장으로도 충분히 할 수 있다.(이건 진짜)
메모장을 말 한 이유 : 어떤 회사에서는 면접이나 테스트를 할 때 에디터 툴을 사용하지 않고
메모장만으로 보는 경우도 있다고 한다. 여러분도 기본구조 정도는 에디터 없이 적을 수 있다면
혹시나 에디터도 없고 인터넷도 잘 안 터져서 다운받지도 못하는 상황에서 HTML 문서를 작성할 수 있지 않을까?
내일은 리스트 태그와 앵커 태그 속성인 id를 알아볼 것이다.
공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요)
그럼~ 앙 제바
'IT아카데미 > HTML' 카테고리의 다른 글
| 홈페이지 만들기 - HTML[5] (0) | 2020.05.01 |
|---|---|
| 홈페이지 만들기 - HTML[4] (0) | 2020.04.28 |
| 홈페이지 만들기 - HTML[3] (0) | 2020.04.28 |
| 홈페이지 만들기 - HTML[2] (0) | 2020.04.23 |
| 홈페이지 만들기 - HTML[0] (0) | 2020.04.21 |