HTML 기본 (TIL 6)

석형원·2024년 4월 1일

TIL

목록 보기

6/52

✏️ 오늘 학습한 내용

1. HTML 기본 문법
2. HTML Head
3. HTML Body
4. Layout
5. Contents
6. 멀티미디어
7. 리스트
8. 표
9. Iframe
10. Form
11. 설명과 입력
12. HTML 주의사항

환경 설정 (vscode)

- vscode extension

Material Icon Theme - 확장자에 따른 아이콘 표기

indent-rainbow - 들여쓰기 가시성 높임

Live Server - 작업의 결과를 live로 확인

🔎 HTML 기본 문법

태그
- 콘텐츠를 가지는 태그 :
  ex) <div> content <div/>
- 콘텐츠를 가지지 않는 태그 :
  ex) <br />
속성과 값
속성(Attribute)은 태그가 가지는 고유한 값(Value)과 모든 태그에 사용가능한 전역속성이 있다.
<tag attribute = value> content <tag/>
HTML 기본 문서

<!DOCTYPE html>: 문서 버전
<html lang="ko">: HTML 문서 시작 선언 및 문서 기본 언어 설정
<head>: 문서에 필요한 정보가 기입되는 곳
<title>문서 제목</title>: 문서 제목
<body> 내용 </body>: 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳

🔎 Head

Head란?

사람의 눈에 보이지는 않지만 문서의 정보를 담을 수 있는 영역.
Head에 담을 수 있는 정보의 종류
- <title>
- <meta>
  - 인코딩 정보: charset(character set)은 문서를 허용하는 문자의 집합이다. 선언된 문자 집합 규칙에 따라 문서에서 사용할 수 있는 문자가 제한된다.
    <meta charset="ISO-8859-1">
  - 문서 설명
    <meta name="description" content="문서 설명">
  - 문서 작성자

CSS, Script

style

<!-- 콘텐츠를 가지는 태그, css를 넣어서 사용 -->
<!-- 문서 글자색을 파란색으로 -->
<style>
  body {
    color: blue; 
  }
</style>

link

<!-- style의 길이가 길어질 경우 link로 대체 가능 -->
<!-- css도 별도의 파일로 관리 가능 -->
<link rel="stylesheet" href="style.css"/>

script

<!-- 콘텐츠를 담는 태그 -->
<!--콘텐츠 방식-->
<script>
  const hello = 'world';
  console.log(hello);
</script>
<!--링크 방식-->
<script src="script.js"></script>

🔎 Body

Body란?
- 사용자가 실제로 눈에 보이는 컨텐츠가 담기는 태그
Block
- 블록의 크기, 내/외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타냄
- 인라인 요소를 포함할 수 있으나 인라인의 요소에 포함됨
- <div>, <article>, <section>
Inline
- 블록 내에 포함되어 있는 요소
- 주로 문장, 단어같은 작은 부분에 제공되며 한 줄에 나열됨
- <span>, <a>, <strong>
Inline-block
- 글자처럼 취급되나 block 태그의 성질을 가지는 요소
- block과 마찬가지로 크기, 내/외부 여백을 지정 가능
- CSS로 성질을 바꾼 것이라 의미상 인라인레벨 요소에 해당됨

🔎 Layout

<div> </div>

콘텐츠 분할 요소
단순히 구역을 나누기 위한 태그

<header> </header>

글의 제목, 작성일 등의 주요정보를 담는 태그

<footer> </footer>

페이지의 바닥쪽에 사용되며 저작권 정보, 연락처 등 부차적인 정보를 담는 태그

<main> </main>

페이지의 가장 큰 부분으로 주요 콘텐츠를 담는 태그
한 페이지에 한번만 나온다.

<section> </section>

콘텐츠의 구역을 나누는 태그

<article> </article>

구역 안에서 작성된 독립적인 정보를 전달하는 태그

<aside> </aside>

문서의 내용의 부가적인 정보를 전달하는 태그

🔎 Contents

제목 태그 (h1 ~ h6)

문서 구획 제목을 나타내는 태그
h1태그는 페이지 내 한 번만 사용되어야 하고 구획의 순서는 지켜져야 한다.

문단 태그 (p)

문서에서 하나의 문단을 나타내는 태그
제목태그와 함께 사용되기도 하고 단독으로 사용되기도 한다.

서식 태그

<!-- <b>, <strong> : 글씨의 두께를 조절 -->
<b> : 태그의 의미를 가지지 않고 글씨만 굵게 변경
<strong> : 굵은 글씨로 변경 후 강조의 의미를 부여

<!-- i, em : 글씨의 기울기를 조절 -->
<i> : 기울임과 동시에 텍스트가 문단의 내용과 구분되어야 하는 경우 사용 가능
<em> : 기울임과 내용의 강조를 나타냄


<u> 
글씨에 밑줄을 넣고 주석을 가지는 단어임을 나타낼 수 있음
단순 밑줄로 사용해선 안됨

<!-- <s>, <del> : 글씨에 취소선 추가 -->
<s> : 시각적인 취소선만 추가되고 접근성 기기에 취소에 대한 안내를 하지 않음
<del> : 문서에서 제거된 텍스트를 나타냄, ins 태그와 함께 사용시 제거된 텍스트 옆에 추가된 텍스트 표현이 가능하다

<a>
클릭하면 페이지를 이동할 수 있는 링크 요소
<a href> : 이동하고자 하는 파일
<a target> : 이동해야 할 링크

🔎 멀티미디어

<img> </img>
문서 내 이미지를 넣을 수 있는 태그
src : 이미지의 경로
alt : 이미지 로딩에 문제가 발생했을 때 대체 텍스트를 띄움

----------------------------
<figure>
  <img src="/logo.png" alt="로고">
  <figcaption> 핫도그 이미지 </figcation>
</figure>
----------------------------
<figure> </figure>
하나의 독립적인 콘텐츠로 분리하는 태그
<figcaption> </figcation>
figure에 대한 설명을 넣을 수 있는 태그

<video> </video>
문서 내에서 영상을 첨부할 수 있는 태그
src : 비디오를 문서 내에 첨부
poster : 비디오가 로드되기 전에 포스터를 보여줌
source : 여러 타입의 비디오 제공 가능

<audio> </audio>
문서 내에서 소리을 첨부할 수 있는 태그
src : 소리를 문서 내에 첨부
source : 여러 타입의 오디오 제공 가능
controls : 재생/정지 버튼 등이 있는 컨트롤러 제공

SVG(Scalable Vector Graphic)

그래픽으로 만들어진 이미지
일반 이미지와 달리 수학 공식을 사용해서 만들어 해상도 영향을 받지 않아 확대/축소가 자유로움
크기를 자주 바꾸어야 하는 작은 아이콘 등에 많이 사용
img처럼 svg파일을 불러오거나 태그를 그대로 사용할 수 있음
코드로 이루어져 있어 스타일 변경, 자바스크립트로 간단한 기능 추가가 가능함

🔎 리스트

<!-- 정렬되지 않은 목록 태그 <ul> -->
<ul>
	<li> </li>
</ul>

<!-- 정렬된 목록 태그 <ol> -->
<ol>
	<li> </li>
</ol>

<ul>,<ol> 태그의 자식으로는 <li> 태그만 가능

<!-- 설명 목록 태그 <dl> -->
<dl>
  <dt>Chrome</dt>
  <dd>구글 웹브라우저</dd>
</dl>

<dl> : 설명 목록 태그
<dt> : Content
<dd> : <dt> 태그에 사용된 단어 혹은 내용의 설명을 <dd> 태그에 작성

주로 용어사전이나 키-값이 있는 쌍의 목록을 나타낼 때 사용
<dt> 태그를 여러개 작성하고 하나의 <dd> 태그를 작성하는 것으로 여러 개의 용어를 설명 가능

반대로 <dt> 태그 하나에 여러개의 <dd> 태그를 가질 수 있음

🔎 표

<table>
  <thead>
    <tr>
      <th>열 제목</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> 행1 열1 </td>
      <td> 행1 열2 </td>
    </tr>
  </tbody>
</table>

table

표를 만드는 태그
tr : 행 구분
td : 열 생성

열의 제목을 가지며 bold체로 나옴

thead

제목 그룹 태그
테이블 내 한 번만 나와야 함
thead 태그 안에 열 제목의 행을 넣음으로써 그룹을 제거 가능

tbody

표 본문 요소 태그
테이블 내 한 번만 나와야 함
tbody 태그 안에 열 제목의 행을 넣음으로써 그룹을 제거 가능

tfoot

표 바닥글 요소 태그
HTML4에서는 tbody보다 앞에 들어가야 했으니
HTML5 버전부터는 제일 마지막에 배치되면 된다.
( thead -> tbody -> tfoot )

caption

표 설명 태그
<caption>를 사용하여 표가 가진 데이터에 대한 설명을 넣을 수 있다.

🔎 Iframe(외부 콘텐츠)

<iframe src="https://example.com" frameborder="0"></iframe>

다른 HTML 페이지를 삽입하는 태그
src : HTML문서 혹은 URL을 연결 가능
name속성을 지정하면, <a target>을 이용해 iframe에서 URL이 열리게 할 수 있다.

다만 외부 사이트이기 때문에 보안 이슈가 생길 수도 있고 외부 페이지에서 오류가 발생할 경우 이를 호출한 페이지에서도 영향을 받을 수 있다.

🔎 Form

<form action="./submit.html" method="get">
  <label for="name">이름</label>
  <input id="name" type="text" name="name">
  <button type="submit">전송</button>
</form>

정보를 제출하기 위한 태그
정보를 입력 및 선택하기 위한 <input>, <selectbox>, <textarea>가 있음.
button : 정보를 제출하기 위한 태그.
action : 정보가 제출된 후에 페이지 이동.
method : 정보가 제출될 때 처리 방식 결정.

🔎 설명과 입력

label

input, selectbox, textarea의 설명을 작성할 수 있는 태그
for : 연결하고자 하는 태그에 id 속성을 지정하면 label을 클릭하면 연결된 태그가 선택됨
label 태그 안에 input을 넣으면 자동으로 for -> id 연결과 같은 처리를 해준다.
id 속성은 값이 절대로 중복되면 안된다.

input

<form action="/link.php" method="get">
    이름 : <input type="text" name="st_name"><br>
    학번 : <input type="text" name="st_id"><br>
    학과 : <input type="text" name="department"><br>
    <input type="submit">
</form>

사용자에게 데이터를 입력 받을 수 있는 대화형 태그
type : 받을 수 있는 input의 유형을 결정
value : 기본 내용을 입력해 둘 수 있음
name : input의 이름 지정

자주 사용되는 input 타입

checkbox : input을 체크박스 형태로 만든다.

radio : 라디오 버튼으로 만든다.

file : 파일을 첨부할 수 있게 만든다.

button : value 속성에 입력된 값을 이름으로 갖는 버튼을 만든다.

hidden : input을 시각적으로 숨겨준다. 정보 제출 시 value 속성에 입력된 값은 전송된다.

select

<select name="selectbox">
  <option> 선택하세요 </option>
</select>

옵션 메뉴를 제공하는 태그
option 태그를 사용해 옵션을 정의
첫번째 option이 이름이 된다.
value 속성을 선언하지 않은 경우 option 태그의 콘텐츠가 기본값이 됨
첫번째 옵션이 버튼명이기 때문에 placeholder 속성을 사용불가

textarea

여러 줄을 입력할 수 있는 대화형 태그
콘텐츠를 넣으면 사용자가 입력하지 않아도 표시되는 기본값이 된다.
cols/rows 속성으로 기본 너비와 높이를 지정할 수 있다. 너비와 높이는 글자 크기 기준으로 정의된다.

input에 사용하면 좋은 속성

readonly : 사용자가 수정할 수 없는 읽기전용으로 만든다.

reqiured : form이 제출될 때 필수 입력 사항으로 만든다.

placeholder : input, textarea에 부가 설명을 입력해 둘 수 있다.

disabled : 요소가 비활성화 되며 정보 제출 시 값이 제출되지 않는다.

🔎 HTML 주의사항

1. 대소문자 주의
	- 태그는 가능한 소문자로 작성할 것
2. 닫는 태그 생략 주의
	- 콘텐츠를 가지는 태그는 닫는 태그가 필수
3. 한글 사용
	- 개발은 영어로 할 것
4. ID의 중복
	- ID는 한 문서, 한 페이지 내에 "한 번만" 나와야하는 "고유 아이디"
5. 계층 구조 유지
	- 코드가 예뻐야함, 계층(depth)를 잘 지킬 것
    - depth가 잘 맞아야 코드가 복잡했을 때 유지 보수 용이
6. 동알한 의미의 태그 중첩 금지
	- ex) b, strong
    - 링크 이동하는 a 태그, 클릭할 수 있는 button 태그의 중첩 등등