HTML

가장 많이 쓰는 HTML 태그 6가지

<div> 태그\, <p> 태그, <img/> 태그, <input/> 태그, <button> 태그, <a> 태그

강의에서 사용한 웹사이트는 repl.it 이라는 사이트다. 이 웹 사이트는 코딩을 할 수 있는 웹사이트, 즉 온라인 코딩 툴 이다. VsCode 등과 같은 IDE를 깔지 않아도 코딩을 할 수 있다. 회원가입 후 자동으로 로그인이 되며, Create Reple버튼을 눌러서 프로젝트를 만들기 시작할 수 있다. 언어로는 HTML, CSS, JS를 선택해주고, 프로젝트 제목을 지어준다.

그러면 새로운 창이 뜨게 되는데, 왼쪽 부분은 파일들이 나타나고, 중간 부분에는 코드를 작성할 수 있는 문서이고, 오른쪽 부분은 결과물을 바로 볼 수 있는 웹사이트라고 할 수 있다. 이 웹사이트는 이미 살아있는 도메인이라고 할 수 있으며, 주소창에 이 주소를 쳐도 웹사이트에 접속할 수 있다.

HTML에 대해 알아보자.

HTML은 태그들로 이루어진 문서이다. 크게는 head와 body로 이루어벼있다. head에는 문서에 대한 정보들을 넣어주고, body에는 웹사이트의 구조와 내용을 적어주게 된다.

repl에서 자동으로 만들어준 index.html 파일 내용 중 head 부분을 보면 아래와 같은 내용이 있다.

<link href="style.css" rel="stylesheet" type="text/css" />

이 부분은 같은 디렉토리 내에 있는 style.css 파일과 html 파일을 연결시켜주는 부분이므로, 이 부분이 없으면 style.css 파일에서 스타일을 바꿔도, 우리의 웹사이트에 적용되지 않게 된다.

body 부분에 웹 페이지에서 보고 싶은 내용을 작성하면 아래의 캡쳐화면과 같이 나오게 된다.

HTML은 워드나 한글오피스와 달리, 엔터로 구분을 해서 body에 내용을 입력해도, 실제 웹페이지에서는 한 줄에 다 들어가게 된다.

<div> 태그

워드나 한글의 엔터처럼 구분하고 싶을 때, <div> 태그를 사용할 수 있다.

  <div>내 이름은 ㅇㅇㅇ</div>
  나는 ** 살입니다.
  만나서 반갑습니다!

위와 같이 body를 수정해주면, 아래의 캡쳐본처럼 문장을 엔터처럼 구분할 수 있다.

즉, <div> 태그는 영역을 나눠주는 태그다. <div> 태그로 지정해주는 부분은 한 줄의 영역을 차지하게 되는 것이다.

<p> 태그

<div> 태그와 <p> 태그의 차이를 살펴보자. 우선 body는 아래와 같다.

  <div>내 이름은 ㅇㅇㅇ</div>
  <p>나는 ** 살입니다.</p>
  만나서 반갑습니다!

결과물을 먼저 살펴보자.

<div> 태그와 달리 <p> 태그는 각 줄의 간격이 더 넓어진 것을 확인할 수 있다. <p> 태그도 <div> 태그처럼 영역을 나눠주는 역할을 하는데, 간격이 <p> 태그가 더 넓다는 차이가 있다.

<img> 태그

웹사이트에 이미지를 가져오는 역할을 한다. 다른 태그들은 여는 태그(예: <div>)와 닫는 태그(예: </div>)가 쌍으로 있지만, <img> 태그는 <img/> 하나만 있다. 또, 속성값 src를 반드시 가진다. src는 source, 즉 어디서 이미지를 가지고 오는 지를 알려주는 부분으로, src에 이미지 주소를 넣어주면 된다. 기본적인 형태는 아래와 같다.

<img src="이미지 주소"/>

body에 <img> 태그를 추가하면 아래와 같이 웹사이트가 뜨게 된다.

이렇게 이미지가 바로 웹사이트에 추가된 것을 확인할 수 있다.

<input> 태그

<input> 태그는 <img> 태그와 비슷하게 생겼다. <input/> 처럼 작성해주면 된다. body에 <input> 태그를 넣어주면, 사용자가 입력할 수 있는 칸이 생기게 된다. <input> 태그에도 속성값을 넣어줄 수 있다. 속성값으로는 type을 넣어줄 수 있는데, type 값에 따라 받을 수 있는 데이터의 종류가 달라진다.

<input type="어떤 종류의 데이터를 받을 것인지"/>

"" 안에 text라고 적으면 텍스트를 입력할 수 있고, number라고 적으면 숫자만 입력할 수 있다.

위의 캡쳐화면을 통해 실제 웹페이지에서 어떻게 구현되는 지 확인 가능하다. type으로는 password 등이 있는데, 제일 많이 쓰는 속성값은 text다.

<button> 태그

말 그대로 버튼을 만들어주는 태그다. 여는 태그와 닫는 태그 쌍으로 이루어지며, 그 사이에 버튼에 쓰일 글자를 작성할 수 있다. body를 아래와 같이 구성해보자.

  <input type="text"/>
  <input type="password"/>

  <button>로그인</button>

위의 캡쳐를 통해 우리가 일반적으로 알고 있는 로그인처럼 구현할 수 있음을 확인할 수 있다.

<a> 태그

여는 태그와 닫는 태그로 구성돼있으며, 그 사이에 값을 작성하면 된다. <a> 태그는 하이퍼링크라고 이해하면 된다. <img> 태그가 항상 src 속성을 가져야 하듯이, <a> 태그도 항상 href 속성(하이퍼링크의 줄임말)이 있어야 한다. 아래와 같이 body에 <a> 태그를 추가해보자.

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

위의 캡쳐에서 goto google...를 클릭하면 href에 적어준 링크로 이동할 수 있다.