html은 웹페이지를 구성하는 기본 뼈대와 같습니다. 기본적으로 작용하는 명령어들을 태그라고 부르고 있으며, 각 태그에는 그에 맞는 기능들이 내장되어 있습니다.
신기하게도 메모장에 태그를 작성해서 html 파일로 저장하면 만들어진 웹페이지를 볼 수 있습니다. 과거에는 이런 방법도 많이 사용했겠죠. 지금은 다양한 에디터를 이용하고 있습니다.
html 태그 종류 알아보기.
가장 기본 head태그와 body태그
집을 지을 때도 토목공사를 먼저 합니다. 가장 기본이 되는 것이니까요. 그리고 골격을 올리기 시작합니다. 웹페이지를 구성하는 것도 비슷한 방식이라 할 수 있습니다.
기본적으로 html형태를 갖추고 시작하게 됩니다. 여기서 큰 두가지 분류를 가지게 됩니다. <head></head>, <body></body>가 그것입니다.
웹페이지는 통신을 기반으로 이우러지죠. 클라이언트가 서버에 요청을 보내면, 서버는 클라이언트의 요청에 맞춰 페이지를 보이거나, 서비스 동작을 실행하게 됩니다. 이 과정에서 정형화된 형식이 필요할 수 있습니다. 물론, 더 자세한 내용은 공부하고 정리해보도록 할게요.
중요한 것은 <head>와 <body>입니다.
<head>태그에는 기본적으로 사이트의 정보와 필요로하는 파일의 연결등으로 이용되게 됩니다. 우리에게 가장 중요한 것은 검색엔진 봇이 잘 찾을 수 있도록 meta값을 잘 넣어줘야 합니다. 링크를 타고 들어온 봇이 해당 페이지 혹은 웹사이트의 정보를 확인할 수 있어야하니까요.
<body>태그는 사용자가 보게되는 페이지 부분에 해당됩니다. 블로그로 예를 들어 볼까요. 간단합니다. 여러분이 보게되는 웹브라우저의 모든 모습이 바로 이 <body>태그의 내용입니다.
- 페이지를 구성하는 부분도 헤더와 바디, 푸터로 나뉘게 됩니다. html 기본 골격에서의 head와는 차이를 보이죠. 단지 페이지에서의 사이트 이름, 네이베이션관 같은 내용을 담는 공간을 헤더라고 부르게 됩니다. 이 레이아웃을 꼭 지킬 필요는 없지만, 지키는 것이 다방면으로 좋습니다.
흔히 우리가 페이지를 수정하고, 추가하는 부분도 이 body 태그 영역에서 이루어진다고 할 수 있습니다. 블로그의 사이드바 위치, css 디자인등이 적용되는 부분이기도 합니다. 생각보다 역동적이고 재밌는 요소들이 많습니다. 여기에 javascript가 추가되면 더 역동적인 사이트가 완성됩니다.
그래서 생각보다 공부할게 많습니다. 어떤 디자인 요소를 구현하는 것은 찬찬히 뜯어보면 어렵진 않을 수 있지만, 복잡한 속성들을 활용해야 할 수 있기 때문입니다. 자세한 부분은 따로 정리해 볼게요.
태그의 분류와 종류
이제 본격적으로 태그에 대해서 알아봅시다. 당연히 <body></body>에 적용되는 태그입니다.
태그의 분류
- Block 태그
- 특징 : 새로운 줄(라인)에서 시작되는 태그이며, 해당 태그로 감싸진 내용은 새로운 줄에서 시작하게 됩니다. 즉, 화면을 가로로 구분하면, 하나의 영역을 차지하게 되는 것이죠.
- 대표적으로 <div>, <p>등이 해당됩니다.
- inline 태그
- block태그와 상반되는 느낌으로, 새로운 줄에서 시작하지 않는 태그들을 지칭합니다. 하나의 영역을 차지하는 것이 아니기에 영역에 관련된 css를 적용할 수 없다고 합니다. 큰 의미가 없는 태그라고 할 수 있겠죠.
- 대표적으로 <span>이 해당됩니다.
- 짝을 이루는 태그
- 태그들을 보다보면 /으로 닫아주는 경우를 볼 수 있습니다. 태그의 끝을 알려주는 신호이며, 항상 짝을 이루고 있습니다. 위에서 언급한 <body>내용내용</body>도 같은 모습입니다.
- body 태그가 적용되는 부분을 구분해줍니다. <p>, <div>, <a>등의 태그가 있습니다.
- 혼자 있는 태그
- 혼자로도 그 활용을 가능하게 하는 태그 입니다.
- 줄을 띄우는 <br>태그가 여기에 속하게 됩니다.
사실, 위 태그의 분류는 기본적인 규칙에 해당되는 내용이란 생각을 합니다. 크게 중요하지 않을 수 있지만, 규칙은 알아야 html을 구성할때 자잘한 오류를 방지할 수 있습니다. 가볍게 살펴보시고, 알아두는 정도면 충분하리 생각됩니다.
태그 종류
태그는 그 종류가 많이 있습니다. 그 중에서도 비슷한 효과를 가진 태그도 있습니다. 주로 사용하는 태그, 다시 말해 인기 있는 태그도 있습니다. 해당 부분은 지속적으로 업데이트를 진행할까 합니다.
- html태그
- 수시로 언급되지만, html 문서는 <html></html>로 형식을 알려주게 됩니다. 저 태그 안에 있어야 다른 태그들도 제 기능을 할 수 있습니다.
- head태그
- 앞에서 언급한 것 처럼, 페이지 혹은 사이트를 알리고, style, javascript, meta, 파비콘, 인코딩등의 기능과 내용을 담고 있습니다.
- meta태그
- 문서의 정보를 담습니다. 주로 검색엔진 봇에게 잘 알리는 용도라 생각합니다.
- title태그
- 타이틀 바에 입력되는 텍스트 내용을 담습니다.
- link태그
- 외부 css, 스타일 시트와 연결되는 용도로 사용됩니다.
- script태그
- 외부 자바스크립트파일(js파일)과 연결될 수 있도록 합니다.
- p태그
- body에서 문자열을 담는 부분으로, 단락으로 구성됩니다.
- 줄바꿈을 위해서는 별도의 태그를 이용해야 합니다.
- br태그
- 줄바꿈을 알리는 태그입니다.
- b태그
- 굵은 글씨를 표시해 줍니다.
- i태그
- 이텔릭체로 표시해 줍니다.
- h태그
- 본문의 제목을 알립니다.
- h1,h2,h3,h4,h5등 다양하게 활용할 수 있습니다.
- hr태그
- 구분선으로 활용할 수 있는 직선을 표시합니다.
- div태그
- 하나의 영역을 지정합니다.
- 페이지에서 사각형의 영역으로 사용될 수 있습니다.
- span태그
- 태그에서는 의미를 가지지 않습니다.
- css를 연결하여 일부 요소에 디자인을 입힐 때 주로 사용됩니다.
- img태그
- 페이지에 이미지를 표시합니다.
- input태그
- 페이지에서 입력창을 만들어 보여줄 수 있습니다.
- button태그
- 버튼을 생성하는 태그입니다.
- form태그
- 테이터 전송을 위해 사용되는 태그입니다.
- get, post 방식이 있습니다.
- a태그
- 앵커태그로 클릭하면 지정된 url로 이동하게 됩니다.
- ul태그
- 번호가 없는 리스트를 보여줍니다.
- ol태그
- 번호가 있는 리스트를 보여줍니다.
- li태그
- 위 리스트 태그의 내부에서 사용됩니다.
- 리스트의 각 항목을 감싸게 됩니다.
- select태그
- 선택할 수 있는 상자를 만들어 줍니다.
우선 여기까지의 태그 종류를 살펴볼게요. 이정도로도 상당히 많은 활용을 할 수 있으리라 생각됩니다. 특히 div를 이용해 레이아웃을 잡는 것은 html페이지 구성의 기본이니 알아두면 도움이 될 것이라 생각합니다.
'It 이야기 > html 이야기' 카테고리의 다른 글
| 인터넷 html 파일 열기, 크롬 개발자 도구 이용하는 방법. (0) | 2022.12.05 |
|---|
댓글