티스토리 뷰

Web/HTML

HTML 기초 알아보기

HAN_PY 2021. 12. 7. 15:37
반응형

0. 들어가면서 

 HTML5를 우리가 배워야 하는 이유는 웹 애플리케이션 개발을 하기 위함이다. 이것을 통해 우리는 웹 개발뿐만 아니라 전반적인 SW 개발 방법 및 학습 과정을 익힐 수 있을 것이다. html을 배운 후에 CSS를 배우고, 추가적으로 Javascript를 배우면 될 것이다. 

 

[Web/JAVASCRIPT] - [DOM_1] DOM이란

[Web/JAVASCRIPT] - [DOM_2]자바스크립트 역사와 기초문법[web]

[Web/JAVASCRIPT] - [DOM_3]Javascript과 DOM 심화(Event)

[Web/Django] - 1. django 시작하기

[Web/Vue.js] - [Vue.js] 1. 시작하기

[인공지능(Artificial Intelligence)/머신러닝] - AI_머신러닝 기초 정리

[Web/JAVASCRIPT] - [nodejs/express] 프로젝트 시작 총정리

[Web/React] - [react web] 시작하기

 

 

개인적으로 HTML을 짧게 배우고 넘어가는 것을 추천한다. HTML 공부는 하루를 넘기지 말자. 초보자의 기준으로 결론적으로 boostrap이라는 곳에서 코드를 복사해서 사용하게 될 것이다. 그리고 HTML에서 힘을 빼고 공부해야 뒤에서 Javascript를 하면서 지치지 않는다. 그리고 HTML은 계속 구현하다 보면 나오게 될 것이다. 이론은 간단히 하자! 오케이 그러면 시작해 보자.

 

기본적으로 HTML은 Programming Language가 아닌 Markup Language임을 이해하자.

Programming Language : 기계가 어떻게 움직이는지 지시를 내린다.

Markup Language : 특정 형식과 문법대로 어떤 요소나 절차를 배치하는 것이다.

우선은 HTML을 시작하기 위한 개발환경을 구성해 보자.

 

1. 설치

우선 HTML을 공부하기 위해서 에디터로 visual Studio code를 사용할 것이다. 설치가 됐다고 가정하고 시작하겠다. 그리고 코드 효율성을 위해서 visual Studio code에는 extension을 설치하자. extension은 여러 좋은 기능들을 다운 받아서 쓸 수 있게 만들어 놓은 것이다.

open in browser를 기본적으로 설치하고(alt+b 단축키 누르면 자동으로 브라우져를 킬 수 있어 만드는 것을 화면으로 볼 수 있다.), html로 검색 후에 HTML CSS Support와 HTML snippets를 설치해주면 좋다.

그리고 자동으로 Tag를 열고 닫을 수 있는 auto rename Tag와 Auto Close Tag도 설치해 주자.

 

vscode에서 extension 에서 설치할 만한 것들은 아래와 같다.

 

- auto name tag

- bracket pair colorizer

- css navigation

- font awesome auto-complete & preview

- html tag wrapper

- live server

- material theme

- prettier - code formatter       :      자동 줄맞춤이다.

- vscode-icons

 

 

추가적으로 우리는 인터넷은 크롬을 사용한다. 왜냐하면 웹개발 환경에서 특정 요소를 제외하거나 추가하여 보는 게 가능한 크롬 개발자 도구이기 때문이다. 사용법으로는 아래와 같다.

  • 요소에 대한 소스코드를 알고 싶으면 드래그해서 우클릭 후에 검사를 누른다.
  • ctrl + shift + i
  • F12
  • 개발자 도구를 열고 스타일에서 아무꺼나 변경해도 임시로 변경이 된다.

 

 

아래의 싸이트는 해당 브라우저에서 사용 가능한지 안 한 지를 검색하여 찾을 수 있다. 들어가서 html5를 검색해보자.

caniuse.com/

 

Can I use... Support tables for HTML5, CSS3, etc

 

caniuse.com

 

 

2. HTML

 Hyper Text Markup Language

  • Hyper Text - 각 문서의 내부마다 다양한 문서로 연결되는 링크를 가진 형태
  • HTTP - Hyper Text의 주고받는 규칙
  • Markup - 사용자가 잘 볼 수 있게 문서의 구조를 잡아준다. Markup 언어는 연산이 안된다.

 

HTML은 웹용 콘텐츠의 구조를 지정하는 컴퓨터 언어이다. 웹 브라우저에 불려진 HTML은 웹 브라우저(크롬 등)에 의해 해석되어 내용이 화면에 보이게 된다. 컴퓨터에서는 (파일명).html이라고 작성해 주면 컴퓨터가 HTML로 인식한다.

 

 

 우리는 HTML에서 발전된 HTML5를 사용한다. HTML에서 HTML5로 발전되면서 실용적 설계가 가능해졌고, 웹 소켓과 같은 최신 웹 기술 수용이 가능해졌다. 이제부터 편의상 HTML5를 HTML이라고 부를 것이다.

 

 

 정리하면 HTML은 단순히 웹의 글자를 보여주게하는 것이다. 그리고 꾸미는 것을 CSS와 javascript를 통해 한다고 생각하면 된다. HTML을 좀 더 잘 이해하기 위해서 HTML 구조에 대해 알아보자.

 

 

 

3. HTML 구조

 HTML 구조를 이해하려면 객체 지향 모델로 구조화된 문서를 표현하는 문서 객체 모델(DOM; Document Object Model)에 대해 이해해야 한다. 잘 구조화된 문서는 아래와 같이 DOM을 사용하여 트리 구조를 얻어낼 수 있다.

document아래 root element가 있고 그 아래는 head와 body로 나눠지는 것을 알 수 있다. 

 

아래의 코드는 html의 기본 구조이다. 옆의 그림과 비교해서 보자.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
  <body>
  </body>
</html>

위의 코드를 작성했다면 html을 시작할 준비를 마쳤다고 할 수 있다. viual studio code에서는 .html로 끝나는 문서를 만든 후에! 를 친 후 tap을 누르면 자동으로 html 기본 코드가 작성될 것이다. 아래의 그림과 같이 하면 된다.

이제 시작 할 준비가 된 것이다. 이제 코드를 하나씩 뜯어보자. 기본적으로 HTML은 헤드와 바디로 나눠지고 <>(꺽쇠)로 둘러 쌓인 부분을 태그라고 한다. 그리고 태그들은 여는태그(ex_ <html>)와 닫는태그(ex_ </html>)를 통해 각각의 요소를 나타낸다. 위에 서 알 수 있듯 한 태그는 다른 태그들을 포함 할 수 있다.

 

태그 들은 실제화면에 나타나지 않는다. 태그가 아닌 태그 내부의 요소들이 화면에 표시된다는 것을 이해하자.

 

위의 사진을 보면 파란색 태그안에 하늘색의 글자가 적혀있는 것을 알 수 있다. 이러한 것들을 속성(Attribute)라고 하고 속성을 이용하여 태그에 다양한 속성을 적용가능하다.

 

 

DOCTYPE

// HTML의 문서 형식 선언으로 HTML 및 마크업 언어의 DTD 또는 버전을 명시한다.

// HTML은 여러 버전이 존재하므로 Doctype을 명시해야한다. 그리고 기존 Doctype은 매우 길고 복잡하게 명시해야 했지만, HTML5로 접어들면서 <! DOCTYPE html>로 짧아졌다.

 

 

html

// <html> 태그는 전체 페이지의 내용을 모두 감싼다. 그리고 root element라고 불려진다.

// lang='en'의 의미는 페이지가 영어를 기본으로 한다는 의미이다. 

// 크롬으로 lang='en'인 페이지를 들어가면, 한글로 변환할 것인지 물어본다.

// 한국어인 경우는 lang='ko'로 변경해 주면 된다.

// 시각장애인 분들이 웹페이지를 보는 경우 읽는 기능이 포함 되어야 하는데 이때 어떤언어를 읽을 것인지도 포함이 되게 된다.

// 결과적으로 lang 속성은 접근성(Accessibility)를 위해 작성되어 진다고 생각해도 된다.

// 아래의 내용처럼 html 안에는 head태그와 body태그로 이루어 진다.

 

<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

 

내부에 들어가는 태그는 들여쓰기(띄어쓰기)를 해서 작성한다. 왜냐하면, 코드가 길어질 경우 구조를 파악하기 굉장히 어려워지기 때문이다. 즉, 컴퓨터는 들여쓰기가 없어서 읽는데 지장이 없지만, 우리 개발자들의 가독성을 위해 필요하다.

 

head

// 보여지는 내용이 아닌, 검색 결과에 표시할 키워드 및 페이지 설명, css 등을 선언한다.

// head에는 title(타이틀), UTF-8(문자인코딩), 메타데이터, 외부 파일 연결(script) 등을 들어간다.

 

mata

// matadata로 문서 또는 파일에 관한 정보를 제공하는 내부 데이터이다.

 

<meta charset="utf-8">

// 문자를 UTF-8로 설정한다.

컴퓨터는  ...0101110100000100011010101101010010... 이런 식으로 숫자로 형성되어 있다. 그리고 이러한 숫자를 문자로 변경하여 Hello world와 같은 단어를 만들게 된다. 이러한 변환을 ENCODING이라고 한다.

초반에는 이러한 encoding으로는 ASCII(아스키)를 사용했다. 그러나 ASCII는 영문 알파벳 밖에 사용이 불가능하다. 그래서 각 나라에서는 각 언어를 사용하는 방식이 생겨났다. 우리나라는 한글을 담기 위해 euc-kr을 사용한다. euc-kr은 알파벳에 한글을 더하는 방식이다. 예전에는 이걸로 왠만한 한국사이트들을 돌아다니기 가능했다. 그러나 최근에는 한국어와 영어뿐만 아니라 다른 언어들도 표시가 되어야 한다. 그래서 이러한 문제를 해결하기 위해 전세계 문자를 담은 Unicode라는 표가 만들어 졌다. 이떄 주의할 점은 Unicode는 인코딩 형식이 아닌 일종의 표이다. 그리고 Unicode를 활용해서 어떠한 문자든 표시할 수 있는 것이 UTF-8이다.

 

정리하면 오늘날 html의 형식으로 html5를 사용하듯, meta 태그의 charset에는 항상 UTF-8을 사용한다고 생각하면 된다.

 

 

<meta name="viewport" content="width=device-width, initial-scale=1.0>

모바일 시대가 열리면서 웹에서 아주 중요해진 태그이다. 컴퓨터로 보는 화면 모바일에서 변화없이 보는 것은 굉장히 불편하다. 따라서 나온 것이 반응형 웹과 적응형 웹이다.

  • 반응형 웹 : 웹의 크기에 따라 최적화하여 변화하는 웹
  • 적응형 웹 : PC 환경과 모바일 환경을 따로 만들어 사용하는 웹

즉, 위의 코드를 적지 않고 모바일 환경으로 보면 페이지 크기를 자동 조정되지 않는다. 문단으로 적힌 글이 있다면, 모바일에서는 좌우로 움직여가며 글을 읽어야 할 상황이 생긴다고 생각하면 된다.(좌우 부분이 짤려서 나옴)

 

initial-scale=1.0 속성은 처음들어왔을 떄 화면을 몇배줌으로 할지 정하는 부분이다. 크롬에서는 잘 적용되지 않고 모바일 환경에서 적용이 잘된다. 그런데 확대 축소가 오히러 혼란을 주는 경우가 생기기도 한다. 이때는 속성으로 user-scalable=no를 추가하여 확대 축소를 방지할 수 있다.

 

 

<meta http-eguiv="X-UA-Compatible" content="ie=edge">

이 메타 태그는 익스플로어 떄문에 만들어 진거다. 이 코드는 수많은 익스플로어 버전 중에 최신버전으로 읽으라는 코드이다. 익스플로어는 크롬이나 다른 브라우저에 비해 호환이 안좋기 때문에 익스플로어가 존재하는 한 이러한 코드를 추가해 주면 된다.

 

 

 

title

// 페이지를 책갈피나 즐겨찾기 할 때 페이지를 설명한다. 화면에서는 브라우저 탭에 표시가 된다.

 

body

// 표시하려는 모든 내용이 포함된다.

 

 

4. head

 head부분은 실제로 보여지는 부분은 담고 있지 않고 head는 문서 제목, 문자 인코딩 등의 문서 정보(metadata)를 담고 있다. 그리고 meta부분은 메타 데이터를 통해 웹 문서에 대한 추가 정보를 선언할 수 있다.  css나 javascript를 html 파일로 불러올 수 있다

 

추가적으로 head 부분에서 알면 좋은 것은 Open Graph Protocol이다. 사실 메타 데이터에는 규약이 없다. 그러나 메타 데이터를 표현하는 새로운 규약으로 Open Graph Protocol을 페이스북에서 메타 태그 프로토콜로 만들었다. 링크 삽입시 해당사이트의 메타태그를 긁어와서 사이트 정보를 미리 보여준다.

쉽게 말하면 카톡에 url을 보내면 url관련된 정보가 아래에 같이 뜨는 경우가 있다. 이러한 것이 Open Graph Protocol이라고 할 수 있다. 참고할 url은 아래와 같다.

ogp.me/

 

Open Graph protocol

The Open Graph protocol enables any web page to become a rich object in a social graph.

ogp.me

4.1 <meta charset="utf-8">

 이것은 특정 언어가 깨지지 않게 핸들링 할 수 있게 한다. 유니코드인 UTF-8로 지정하면 된다.

 

 

4.2 HTML에 CSS와 JavaScript 적용하기

<link rel="stylesheet" href="my-css-file.css">

head안에 위의 코드를 적으면 css를 불러 올 수 있다. rel은 문서의 스타일 시트를 나타내고 href는 스타일시트의 파일의 경로를 포함한다.

 

<script src="my-js-file.js"></script>

 

위의 코드를 head 안에 적으면 javascript 파일을 불러온다.

 

 

4.3 <html lang="en-US">

 이 부분은 페이지의 언어를 나타낸다 en-US라는 것은 영어라는 것을 의미하고, 크롬으로 이러한 페이지에 들어가면 우측 상단에 번역할 것인지에 대한 알림이 뜨게 된다. 우리는 <html lang="ko">라고 적어주면 한국어로 인식된다.

 

 

4.4 메타데이터(metadata)

 메타데이터랑 파일에 관한 정보를 가지고 있는 데이터를 의미한다. 예를 들면 사진을 찍을 때는 사진 자체가 아닌 촬영 날짜, 카메라 모델명, 노출 등이 메타데이터라고 한다. MP3 음원에서는 음악 자체가 아니라 메타데이터는 연주자, 앨범 정보 등을 나타낸다. HTML에서는 문자 인코딩, 설명, 키워드, 연락처 등을 나타낸다.

 

 메타데이터를 상세하게 적어주면 구글 등의 유명 검색 로봇에 의해 수집되기 때문에 웹 검색에 유리하다고 할 수 있다. 아래의 예를 참고해보자.

<meta name="description" content="HTML5와 Javascript 학습콘텐츠"> 
<meta name="keywords" content="HTML5, CSS, JavaScript"> 
<meta name="author" content="Lee HaeBum"> 
<meta name=”copyright” content=”©2012 Lee HaeBum”> 
<meta name=”reply-to” content=gomtomi@imacca.com> 
<meta name=”date” content=”2012-05-30T12:35:20+09:00”>
  • description : HTML 파일의 간략한 설명 기술 
  • keywords : HTML 파일의 간략한 설명 기술 
  • author : HTML 파일 작성자 
  • copyright : 저작권 정보 
  • reply-to : 연락처 메일 입력 
  • date : HTML 파일의 작성일

 

 

 

5. body

5.1 요소(element)

 Element는 HTML의 마크업 명령어로 content와 함께 사용된다. 그리고 대소문자는 구분하지 않는다는 것을 기억해 두자. 엘리먼트(element)는 <body> 부분에 들어간다. 엘리먼트에는 여는 태그와 닫는 태그가 반드시 포함되어야 한다. 아래의 elment 예제들을 보자.

<p>My cat is very cuty</p>

위의 전체가 Element라고 할 수 있다.

 

<p class="hanpy">My cat is very cuty</p>

위의 Element에서 class="hanpy" 부분이 Attribute라고 할 수 있다. Attribute의 특성은 아래와 같다.

  • 하나 이상의 속성이 올 경우 공백을 넣어서 구분한다
  • 속성 이름 뒤에 등호(=)를 붙여준다.
  • 등호 기준 오른쪽에 ""(따옴표)가 필요하다

 

Element에도 다른 특징이 존재한다.

5.1.1 Nesting elements(중첩 요소)

<p>My cat is <strong>very</strong> cuty</p>

위의 예와 같이 요소 안에 다른 요소를 넣는 것을 중첩 요소라고 한다.

 

 

5.1.2 Empty elements(빈 요소)

> 빈요소 태그란, <></> 이런 형태가 아닌, < /> 이런 형태를 의미한다.

<img src="images/hanpy.png" alt="My image">

위와 같이 내용을 포함하지 않는 요소로 닫는 태그(</>)가 없다.

 

 

5.1.3 Images(이미지)

<img src="images/hanpy.png" alt="My image">
  • src - 불러와야 할 image file의 위치를 적어준다.
  • alt - 텍스트를 설명하는 부분이다. alt는 사실 꼭 안 적어도 큰 문제는 없으나, 시각장애인을 위한 프로그램을 만들거나 오류로 인해 이미지 표시가 안될 경우 무슨 내용인지 알게 해 준다.

 

 

 

아래는 h1, img a 태그를 넣은 코드이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
  <body>
    <h1>Hanpy</h1>
    <img src="url"/>
    <a href=""></a>
  </body>
</html>

 a tag에서 알 수 있듯이 공백은 있으면 안 된다. 그리고 " "나 ' ' 중에 아무거나 적어도 된다.

 

 

<a href="https://www.naver.com" target="_blank" title="새창으로 네이버 이동">네이버</a>
  • 네이버라는 단어를 누르면 네이버 웹사이트로 이동을 하는 코드이다.
  • target="_blank" 는 현재 웹이 아닌 새로운 웹을 열어서 이동하게 한다.
  • 접근성 고려 ) title은 해당 링크를 클릭했을 때 어떤 일이 발생하는지 적어준다. 시각장애자를 좀 더 편하게 웹을 사용할 수 있도록 만들 수 있다.

 

 

5.1.4 video(영상)

<video src="img/hanpy.mp4" controls muted autoplay loop></video>
  • controls : 이 값을 넣어줘야 사진이 아니라 영상으로 보여진다. (이거 하나만 적어도 작동한다.)
  • muted :  음향의 디폴트를 무음으로 만들어 준다.
  • autoplay : 접속 시 바로 시작하게 한다.
  • loop : 영상을 다보면 자동으로 다시 재생한다.

 

<video src="img/hanpy.mp4" controls muted loop poster="img/rose.jpg"></video>
  • 위와 poster를 넣으면 영상 시작전에 img 를 넣어서 썸네일을 넣을 수 있다. 시작 전에는 jpg 파일이 뜨고 재생을 누르면 mp4가 실행된다.

 

5.1.5 audio(오디오)

<audio src="img/sori.mp3" controls autoplay loop muted></audio>

설정은 위의 video와 같다. 위를 참고 해서 설정 값들을 넣어보자

 

 

5.2 시맨틱 태그

 시맨틱 태그란 의미를 담긴 태그로 구조화를 하는 것이라 생각해도 된다. 옛날에는 의미 없이 div 태그를 많이 사용했다. 시맨틱 태그를 쓰나 div 태그를 쓰나 보이는 것은 같지만, 내부적으로는 다르다는 것을 이해하자.

 

특징을 보면 단순히 구역을 나누는 것뿐만 아니라 의미를 가지는 태그들이다. Non semantic 요소는 div, span 등이 있고, h1이나 table 태그들도 시맨틱 태그라고 할 수 있다. 검색엔진 최적화(SEO)를 위해서는 메타태그, 시맨틱 태그 등을 통해 마크업을 효과적으로 할 필요가 있다.

 

 

HTML5에서는 의미론적 요소(element)를 가진 태그가 등장했다. 이러한 태그들의 종류는 아래와 같다.

  • header : <header> 상단의 큰 줄로 페이지 내에서 이동시 동일하게 유지한다.
  • navigation bar : <nav> 메뉴 버튼으로 헤더와 마찬가지로 상단에 유지된다.
  • sidebar : <aside> 사이드에 위치한 공간으로 메인 콘텐츠와 관련성이 적은 콘텐츠
  • main content : <section>, <article> 문서의 일반적인 구분하고 콘텐츠의 그룹을 표현한다. 페이지의 고유한 콘텐츠가 포함된 영역
  • footer : <footer> 문서 전체나 섹션의 푸터를 의미한다. seo(검색엔진 최적화)로 사용되기도 한다.

 

 

 

 

5.3 그룹 컨텐츠

요약

  • <p> - 단순한 문장을 나누는 태그이다.
  • <hr> - 수평선으로 닫는 기호는 없다.
  • <ol>, <ul> - 리스트를 나타낸다.
  • <pre> - 글자로 그림을 그리면 모양 그대로 출력한다.
  • <blockquote> - 인용을 넣는 곳으로  cite="인용 출처인 URL을 넣어주는 곳이다."
  • <figure> - 독립적인 콘텐츠로 figcation을 통해 추가 설명이 가능하다.
  • <div> - 의미 없는 그룹 콘텐츠이다. 연관된 태그를 묶어주는 역할을 한다.

Paragraphs(단락)

 <p> 요소는 텍스트 단락을 나타낸다. 일반 텍스트 콘텐츠를 표시할 때는 자주 사용한다.

 

 

Lists(리스트)

 리스트는 적어도 2개 이상의 요소로 구성된다.

  • <ul> - Unordered Lists
  • <ol> - ordered List

아래와 같이 <ul>과 <ol> 내부에는 <il> element가 들어간다.

<ul>
  <li>사과</li>
  <li>딸기</li>
</ul>

 

 

 

 

 

5.4 텍스트 관련 요소

요약

  • <a> - 하이퍼 링크 태그이다.
  • <b> - 볼드체 / <strong> - 강조의 의미    <b>, <strong>은 보이는 것은 같지만, <b>는 쓰지 말자.
  • <i> - 이 테릭체 / <em> - 강조의 의미      <i>, <em>은 보이는 것은 같지만, <i>는 쓰지 말자.
  • <img> - img를 나타나게 해야 한다.
  • <br> - enter와 같이 줄을 바꿔준다. 닫는 기호는 없다.
  • <span> - 의미 없는 텍스트 요소이다.

 

Links(<a> tag)

링크를 달 때는 a 태그를 주로 사용한다. <a>는 "anchor"의 줄임말이다.

<a href="https://www.google.com/">구글</a>

이때 핵심은 https://를 꼭 적어줘야 한다. href 안에 이동할 주소를 적어준다.

 

 

<a href="https://www.google.com/" title="구글 단어를 누르면 Google로 이동합니다.">구글</a>

title에 적은 글에 마우스를 가져다 대면 정보가 뜬다.

 

 

 

 

5.5 table(표)

table 부분은 그렇게 중요한 것은 아니니 확인만 하자.

  • <tr> : 행 table row
  • <td> : 각각의 칸 table data
  • <th>
  • colspan : 열을 합친다.(가로로 합치기)
  • rowspan : 행을 합친다.(세로 합치기)
  • <thead> : columns 라는 것을 아타내기 위해 thead 내부에 tr과 td 를 넣어준다. 이때 td 부분을 th로 변경해준다. th는 table header라는 뜻이다. 그러면 굵어지고 가운데 정렬로 변경된다.
  • <tbody> : thead에 대한 data 부분을 나타내 준다.
  • <tfoot>
  • <caption> : table 제목이 생성된다.
  • 셀 병합 속성: colspan, rowspan
  • scope 속성
  • <col>, <colgroup>

 

<table border="1" width="500">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>
    </table>
  • border는 테두리를 의미하고 width는 너비를 의미한다. 결과값은 아래와 같다.

 

 

<table border="1" width="500">
        <tr>
            <td colspan="2">1, 2</td>
            <td>3</td>
            <td rowspan="3">4, 8, 12</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
        </tr>
        <tr>
            <td>9</td>
            <td>10</td>
            <td>11</td>
        </tr>
    </table>
  • colspan, rowspan 으로 각각의 테이블을 합해 준다. 합할 숫자를 적어주고, 기존에 합쳐질 칸들은 지워주면 된다.

 

 

 

 

 

개발 시 가장 많이 만드는 것이 게시판이다. table에서 tr를 제목인지, 데이터 줄인지 thead와 tbody에 넣어준다. 나누어 주자. 

<table border="1" width="600">
        <caption>우리들의 게시판</caption>
        <thead>
            <tr>
                <th>id</th>
                <th>제목</th>
                <th>작성자</th>
                <th>날짜</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>1번게시물</td>
                <td>king</td>
                <td>2022-01-13</td>
            </tr>
            <tr>
                <td>2</td>
                <td>게시물 투</td>
                <td>hanpy</td>
                <td>2022-01-15</td>
            </tr>
        </tbody>
    </table>

  • <thead> : columns 라는 것을 아타내기 위해 thead 내부에 tr과 td 를 넣어준다. 이때 td 부분을 th로 변경해준다. th는 table header라는 뜻이다. 그러면 굵어지고 가운데 정렬로 변경된다.
  • <tbody> : thead에 대한 data 부분을 나타내 준다.
  • <caption> : table 제목이 생성된다.

 

 

5.6 form

> 사용자로 부터 정보를 받기 위한 태그이다.

 <form>은 서버에서 처리될 데이터를 제공하는 역할을 한다. from의 기본 속성으로는 action과 method가 있다. 아래의 그림은 네이버 로그인 창에서 form을 찾은 것이다.

form에는 action과 method이 포함되어 있는 것을 확인할 수 있다.

 

 

 

 

 

5.6.1 action

 데이터를 보내는 주소(URL)를 적는 부분이라고 생각하면 된다. 보통 백엔드 개발자가 어디로 전송해 줄지 적어주는 곳이다.

  • action="/"으로 지정하면 현재 페이지로 값을 주겠다는 말이다. 만약 get 방식으로 값을 보내면, name 속성으로 넣은 값이 key, 그 input의 데이터가 value로 들어가서 /?user=hanpy&pw=1234 이런식으로 페이지 이동을 한다.

 

 

5.6.2 method

 양식을 제출할 때 사용할 HTTP 메서드이다. 보통 HTTP 메서드의 종류로는 GET방식과 POST방식으로 보내기가 가능하다.

  • GET : url 주소 뒤에 있는? 뒷부분에 정보가 위치하여 데이터를 보낸다.
  • POST : 데이터를 본문에 담아서 보낸다.

 

 

5.6.3 예제

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action = "#" accept-charset="utf-8" name = "person_info" method = "get">
    <fieldset style = "width:150">
        <legend>개인 정보 입력</legend>
           이름 : <input type = "text" name = "name" required/><br><br>
           주민번호 : <input type = "text" name = "security_number" 
                      pattern = "\d{6}\-\d{7}" 
                      title = "123456-1234567 형식으로 입력해주세요"/><br><br>

           아이디 : <input type = "text" name = "id"/><br><br>
           패스워드 : <input type = "password" name = "password"/><br><br>

           성별 : 남<input type = "radio" name = "gender" />
                  여<input type = "radio" name = "gender" /><br><br>

           관심사 : 연예<input type = "checkbox" name = "checkbox1" />
                    스포츠<input type = "checkbox" name = "checkbox2" />
                    IT<input type = "checkbox" name = "checkbox3" /><br><br>

           <input type = "submit" value = "submit"/>
           <input type = "reset" value = "reset"/><br><br>
    </fieldset> 
</form>
</body>
</html>

이에 대한 결과는 아래와 같다.

 

코드를 왜울 필요 없다. 이렇게 구현되는 구나 생각하고 바로 CSS로 넘어가면 된다.

 

- input에 name을 가급적이면 같이 넣어서 만들어 주자. 데이터 전송 시 labeling 하여 전송하는 것이 가능하다.

 

5.6.4 input type 정리

  • password : 적는 부분이 암호화 되어 표시된다.
  • submit : 설정에 맞게 data를 보낸다
  • reset : 적혀있는 값들이 빈칸으로 변경된다.
  • checkbox : input의 id와 label의 for의 값을 같게 해서 연결한다. 그러면 label을 클릭해도 input값이 눌러진다. name 속성에 같은 값을 넣을 시에도 아래와 같이 여러개를 만들면 복수 선택이 가능하다. 모양은 네모 체크박스이다.
  • radio : input의 id와 label의 for의 값을 같게 해서 연결한다. 위의 checkbox와의 차이점은 name 속성에 같은 값을 넣을 시에 여러개 중에 하나만 선택가능하게 만드는 것이다. 모양은 동그라미 체크박스이다. ex_성별과 같다.
  • select-option : input의 id와 label의 for의 값을 같게 해서 연결한다. 이것도 여러개 중 하나를 선택할 수 있다.
  • color : 색지정이 가능하다
  • date : 날짜를 선택 지정이 가능하다.
  • email : email을 형식으로 안 적으면, 제출을 못 누른다.
  • range : 특정 범위 지정이 가능하다.
  • textarea tag : 여러 줄을 입력 시 사용하는 태그이다. <textarea>

관련 코드는 아래와 같다.

 

<form action="/" method="post">
        <!-- 텍스트 -->
        <input type="text">
        <!-- 패스워트 -->
        <input type="password">

        <!-- 복수 선택 폼 -->
        <label for="soccer">축구</label>
        <input type="checkbox" name="hobby" id="soccer">
        <label for="music">음악</label>
        <input type="checkbox" name="hobby" id="music">
        <label for="game">게임</label>
        <input type="checkbox" name="hobby" id="game">

        <!-- 단일 요소 선택 -->
        <label for="female">여성</label>
        <input type="radio" name="gender" id="female">
        
        <label for="male">남성</label>
        <input type="radio" name="gender" id="male">
        
        <!-- 단일 요소만 선택가능한 폼 -->
        <label for="edu">최종학력</label>
        <select name="education" id="edu">
            <option value="elementary">초</option>
            <option value="middle">중</option>
            <option value="high school">고</option>
        </select>

        <br>

        <input type="color"> <br>
        <input type="date"> <br>
        <input type="datetime"> <br>
        <input type="datetime-local"> <br>
        <input type="email"> <br>
        <input type="range"> <br>
        <textarea name="comments" id="comments" cols="30" rows="10"></textarea>
        <input type="reset"> <br>
        <input type="submit"> <br>
    </form>

 

한번 위 코드로 만들어 보고 get, post 방식에 대한 고찰을 해보자.

 

 

반응형

'Web > HTML' 카테고리의 다른 글

[html] 비디오(mp4) 영상 태크  (0) 2021.12.19
[html] 이미지 태그 기초  (0) 2021.12.16
HTML5 섹션 요소+ text 요소  (0) 2020.06.29
Marking up text(텍스트 마크업)  (0) 2020.06.29
HTML basic  (0) 2020.06.29
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함