[4/1] TIL - HTML

Sangwon Jwa·2024년 4월 1일
데브코스

데브코스 TIL

목록 보기
6/54
post-thumbnail

📖 학습 주제

  1. HTML
  2. HTML 태그들

✏️ 주요 메모 사항 소개

HTML (Hypertext Markup Language)

웹 브라우저가 이해할 수 있는 언어, <> 태그를 이용하여 작성, 태그 안에는 속성(Attribute)과 값(Value)을 가짐.

HTML 기본 문서

<!DOCTYPE html>                             <!-- 문서 버전 -->
<html lang="ko">                            <!-- HTML 문서 시작 선언 및 문서 기본 언어 설정 -->
<head>                                      <!-- 문서에 필요한 정보가 기입되는 곳 <head> -->
    <meta charset="UTF-8">					
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서 제목</title>				    <!-- 문서의 제목 -->
  	<style>
    	body {
      		color: blue;
      	}
  	</style>
</head>
<body>                                      <!-- 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳 -->
    문서의 내용
</body>
</html>
  • 부모요소와 지삭요소로 구성되어 있다. 예를 들어 head는 html의 자식요소이다.
  • 사람 눈에 보이지 않는 "문서의 정보"가 담기는 영역

<가질 수 있는 정보의 종류>

1. 타이틀

<title>문서 제목</title>

2. 메타 데이터 (인코딩 정보, 문서 설명, 문서 작성자 ...)

<meta charset="UTF-8">

3. CSS, JavaScript

  • css 콘텐츠 방식
<style>
	body {
		color: blue;
    }
</style>
  • css 링크 방식
<link rel="stylesheet" href="style.css" />
  • script 콘텐츠 방식
<script>
	const hello = 'world';
	console.log(hello);
</script>
  • script 파일 방식
<script src="script.js"></script>

Body

사람 눈에 실제로 보이는 콘텐츠 영역. (block, inline, inline-block 요소로 구성)

  1. block 블록 레벨 요소
  • 레고 블록처럼 차곡차곡 쌓이고 화면 너비가 꽉 차는 요소
  • 블록의 크기와 내/외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타낸다.
  • 인라인 요소를 포함할 수 있으나, 인라인 요소에 포함될 수 없다.
  • EX) <div>, <article>, <section> ...
  1. inline 인라인 레벨 요소
  • 블록 요소 내에 포함되는 요소.
  • 주로 문장, 단어 같은 작은 부분에 사용되며 한 줄에 나열된다.
  • 좌/우에 여백을 넣는 것만 허용된다.
  • EX) <span>, <a>, <strong> ...
  1. inline-block
  • 글자처럼 취급되나, block 태그의 성질을 가지는 요소.
  • block 과 마찬가지로 크기와 내/외부 여백을 지정할 수 있다.
  • css로 성질을 바꾼 것이기 때문에 의미상 인라인 레벨 요소이다.

Layout

  • HTML5 부터 태그를 의미 있게 사용하기 위해 "Semeantic(시멘틱" 태그를 사용하여 문서 구조를 작성, 단순히 의미 구분자인 div를 남발하지 않고 적절한 태그를 사용하여 웹 문서가 담은 정보와 구조를 의미 있게 전달.
  • 시멘틱 하게 마크업을 함으로서 검색엔진의 검색 순위에 가산점을 얻거나 홈페이지의 로딩 속도를 높일 수 있다.

1. 콘텐츠 분할 요소

  • div : 가장 흔히 사용되는 레이아웃 태그로 단순히 구역을 나누기 위한 태그

2. 레이아웃 태그#1

  • header : 블로그 글 제목, 작성일 등의 주요 정보를 담는 태그
  • footer : 페이지의 바닥줄에 사용되며 저작권 정보, 연락처 등 부차적인 정보를 담는 태그
  • main : 페이지의 가장 큰 부분으로 사이트의 내용 즉, 주요 콘텐츠를 담는 태그, 한번만 사용

3. 레이아웃 태그#2

  • section : 콘텐츠의 구역을 나누는 태그로, 신문지에서 여러 기사가 각자의 구역에서 정보를 전달하는 의미와 비슷한 역할을 하는 태그

  • article : 블로그 포스트, 뉴스 기사와 같은 독립적인 문서를 전달하는 태그

  • aside : 문서의 주요 내용에 간접적인 정보를 전달하는 태그로, 쇼핑몰의 오른쪽에 따라다니는 "오늘 본 상품"같은 것으로 사용 가능

Contents

1. 제목 태그 (h1 ~ h6)

  • 문서 구획 제목을 나타내는 태그로 Heading (헤딩) 태그라고 부른다. h1 ~ h6 까지 사용 가능.
  • h1 태그는 페이지 내에 "한번만" 사용되어야 하고 "구획의 순서"는 지켜져야 한다.
<h1>제목 1</h1>
<h2>제목 2</h2>

2. 문단 태그 (p)

  • 문서에서 하나의 문단(Paragraph)을 나타내는 태그, 제목 태그와 함께 사용되거나 단독으로 사용된다.
<p> 안녕하세요, Hello World! </p>

3. 서식 태그 (b/strong, i/em, u, s/del)

  • <b>, <strong> : 글씨의 두꼐를 조절하는 태그. <b> 태그는 의미를 가지지 않고 단순히 굵은 글씨로 변경만 해준다. <strong> 태그는 굵은 글씨로 변경 후 "강조"의 의미를 부여한다.

  • <i>, <em> : 글씨의 기울기를 조절하는 태그. <i> 태그는 기울임과 동시에 텍스트가 문단의 내용과 구분되어야 하는 겅우 사용한다. 등장인물, 외국어 구절, 기술 용어와 같은 곳에 사용, <em> 태그는 기울임과 동시에 내용에 "강조"를 나타낸다.

  • <u> : 글씨에 밑줄을 넣고 주석을 가지는 단어임을 나타낼 수 있다. CSS로 스타일링 하여 빨간 밑줄을 넣는 것으로 "오타"를 나타내는 것 처럼 사용할 수 있다. 단, 단순하게 "밑줄"만 긋는 용도로는 사용하면 안된다.

  • <s>, <del> : 취소선을 추가하는 태그. <s> 태그는 단순히 시각적인 취소선만 추가되고 접근성 기기에 취소에 대한 안내는 하지 않는다. <del> 태그는 문서에서 제거된 텍스트를 나타낼 수 있다. <ins> 태그를 함께 사용하면 제거된 텍스트 옆에 추가된 텍스트를 표현할 수 있다.

4. 링크 이동 (a)

  • <a> : 클릭하면 페이지를 이동할 수 있는 링크 요소를 만들 수 있다. href 속성을 사용해서 이동하고자 하는 파일 혹은 URL을 작성한다. target 속성을 사용해서 이동해야 할 링크를 새창(_blank), 현재창(_self) 등 원하는 타겟을 지정할 수 있다.
<a href="https://programmers.co.kr">프로그래머스</a>

5. 멀티미디어

  • <img> : 문서 내에 이미지를 넣을 수 있는 태그, 가장 기본적인 이미지 넣는 방법. src 속성을 사용해 이미지의 경로를 넣으면 이미지가 출력됨. alt 속성을 사용해 이미지 로딩에 문제가 발생햇을 때 대체 텍스트를 띄울 수 있음

  • <figure>, <figcaption> : 하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있는 태그, <figcaption> 태그를 사용해 콘텐츠의 설명 혹은 범례를 추가할 수있고 제일 처음이나 제일 아래에 추가해서 사용할 수 있다. 보통 이미지를 넣는데 인용문, 비디오/오디오 등 문서의 흐름에 참조는 되지만 독립적으로 분리되어도 되는 내용을 담을 수 있다. <figcaption> 은 줄이 여러 개 있을 때 중간에 들어가면 안된다.

  • <video> : 문서 내에 영상을 첨부할 수 있는 태그, src 속성을 사용하여 문서 내에 비디오 첨부, poster 속성을 사용하면 비디오가 로드되기 전에 포스터를 보여줄 수 있다. <source> 태그를 사용하면 여러 타입의 비디오를 첨부 가능하다.

  • <audio> : 문서 내에 소리를 첨부할 수 있는 태그, src 속성을 사용하여 문서 내에 소리를 첨부, <source> 태그를 사용하면 여러 타입의 오디오 제공 가능, controls 속성을 사용하면 재생/정지 버튼 등이 있는 컨트롤러를 띄울 수 있다.

  • <svg> (Scalable Vector Graphics) : 그래픽으로 만들어진 이미지. 일반 이미지(래터스 이미지)와 다르게 수학 공식을 사용하여 그려지기 때문에 해상도의 영향을 받지 않아 확대/축소가 자유롭다. 주로 크기를 자주 바꾸어야 하는 작은 아이콘에서 많이 사용된다. <img> 태그 처럼 svg 파일을 불러올 수도 있고 태그를 그대로 사용할 수도 있다. 코드로 이루어져 있기 때문에 스타일을 변경하거나 자바스크립트를 이용해 간단한 기능을 추가할 수도 있다.

6. 리스트

  • <ul>, <li> : 정렬되지 않은 목록 태그. 기본 불릿(bullet) 형식으로 목록을 그린다. <li> 태그를 사용하여 목록을 구성할 수 있고 다양한 태그를 포함할 수 있다. <ul> 태그의 자식 요소로는 <li> 태그만 들어와야 한다. 하위 리스트를 만드려면 <li> 태그 안에 <ul> , <ol> 태그를 사용하면 된다.
<ol>
  <li> 리스트1 </li>
  <li> 리스트2 </li>
  <li>
    리스트3    
    <ul>
      <li>하위 리스트1</li>
      <li>하위 리스트2</li>
    </ul>
  </li>
</ol>
  • <dl>, <dt>, <dd> : 설명 목록 태그, <dt> 태그에 사용된 단어 혹은 내용의 설명을 <dd> 태그에 작성할 수 있다. 주료 용어사전이나 "키-값"이 있는 쌍의 목록을 나타낼 때 사용한다. <dt> 태그를 여러개 작성하고 하나의 <dd> 태그를 작성하는 것으로 여러개의 용어를 설명할 수 있다. 위와 반대로, <dt> 태그 하나에 여러개의 <dd> 태그를 가질 수 있다.
<dl>
  <dt>Chrome</dt>
  <dd>구글에서 만든 웹 브라우저입니다.</dd>  
  <dt>프로그래머스</dt>
  <dd>개발자를 위한 교육, 평가, 채용 서비스를 통해 개발자 성장의 나침반이 되어 확실ㄹ한 길을 제시합니다.</dd>
</dl>

7. 표 (table)

  • <table> : 표를 만드는 태그, <tr> 태그로 행(row)을 구분하고 <td>태그로 열(cell)을 생성할 수 있다.
  • <thead> : 제목 그룹 태그, <thead> 태그 안에 "열(cell) 제목의 행"을 넣음으로써 그룹을 지을 수 있다.
  • <tbody> : 표 본문 요소 태그, 한번만 사용
  • <tfoot> : 표 바닥글 요소 태그, html5부터는 head, body, foot 순으로 배치되어야 한다.
  • <caption> : 표 설명 태그, 표가 가진 데이터에 대한설명을 넣을 수 있다.
  • <th> : 열(cell)의 제목 태그
<table>
  <caption>샘플 표</caption>
  <thead>
    <tr>
      <th>열1 제목</th>
      <th>열2 제목</th>
    </tr>
  </thead>
  <tbody>
  	<tr>
      <td>행2 열1</td>
      <td>행2 열2</td>
  	</tr>
  <tbody>
</table>

8. 외부 콘텐츠 (iframe)

  • <iframe> : 현재 문서 안에 다른 HTML 페이지를 삽입할 수 있는 태그. src 속성에 원하는 HTML 문서 또는 URL을 넣을 수 있다. name 속성을 지정하면, <a> 태그의 target 속성을 사용해 iframe에서 문서 또는 URL이 열리게 할 수 있다.
  • 외부 페이지를 불러올 수 있기 때문에 불러온 외부 페이지의 영향을 받을 수 있기 때문에 보안적인 측면이나 오류가 발생할 수 있는 부분은 조심해야 한다. 
<iframe src="/sample.html" frameborder="0"></iframe>
<iframe src="https://example.com" frameborder="0"></iframe>

9. 양식 태그 (form)

  • <form> : 정보를 제출하기 위한 태그, 정보를 입력하고 선택할 수 있는 input, selectbox, textarea 등을 가질 수 있다. 정보를 제출하기 위한 button을 가진다. action 속성으로 정보가 제출되었을 때 페이지를 이동시킬 수 있다. method 속성으로 정보가 제출될 때 처리 방식을 결정할 수 있다.
<form action="./submit.html" method="get">
  <label for="name">이름</label>
  <input id="name" type="text" name="name"> 
  <button type="submit">전송</button>
</form>
  • <label> : input, textarea, selectbox의 설명을 작성할 수 있는 태그, for 속성을 사용하여 연결하고자 하는 태그에 id 속성을 지정하면 label 을 클릭하면 연결된 태그가 선택된다. label 태그 안에 input을 넣으면 자동으로 for -> id 연결과 같은 처리를 해준다. 단, id 속성은 중복되면 안된다.
  • <input> : 사용자에게 데이터를 입력 받을 수 있는 대화형 태그, type 속성의 값에 따라 받을 수 있는 input의 유형이 달라진다(text,password...) value 속성을 사용해 기본 내용을 입력해 두고, name 속성을 사용해 input의 이름을 지정할 수 있다. 
<label for ="userid">아이디</label>
<input id="userid" type="text" name="userid">
<label>
	비밀번호
	<input name="password" type="password">
</label>
  • <select> : 옵션 메뉴를 제공하는 태그, <option> 태그를 사용해 옵션을 정의할 수 있다. 첫번째 option은 이름이 된다. value 속성을 선언하지 않은 경우 <option> 태그의 콘텐츠가 기본값이 된다. 첫번째 옵션이 버튼명이기 때문에 placeholder속성을 사용할 수 없다.
<select name="selectbox">
  <option>선택하세요.</option>
  <option value="옵션1">옵션1</option>
  <option value="옵션2">옵션2</option>
  <option>옵션3</option>
</select>
  • <textarea> : 여러 줄을 입력할 수 있는 대화형 태그, 콘텐츠를 넣으면 사용자가 입력되지 않아도 표시되는 기본값이 된다. cols, rows 속성으로 기본 너비와 높이를 지정 가능. 너비와 높이는 글자 크기 기준으로 정의된다.
<textarea name="content" cols="20" rows="5">
  내용을 입력하세요.
</textarea>
  • <button> : 클릭 가능한 버튼을 태그로 <form> 태그 내에 어디서든 사용할 수 있다. type을 "reset"으로 지정하면 버튼이 눌리면 입력한 양식이 모두 초기화된다. type을 "submit"으로 지정하면 form 양식을 제출할 수 있다. form 태그 내 button 태그의 기본 type은 submit이다. <button> 태그 내 콘텐츠에 "태그"의 입력이 간으하나, 블록 레벨 태그는 사용하면 안된다.
<button type="reset">양식 초기화</button>
<button type="submit">제출</button>
  • 알아두면 좋은 속성
  1. readonly : 사용자가 수정할 수 없는 "읽기 전용"으로 만든다.
  2. required : form이 제출될 때 "필수 입력 사항"으로 만든다. 입력에 대한 반응은 브라우저가 자동으로 처리
  3. placeholder : 부가 설명을 입력해둘 수 있다. (<select> 태그에선 사용 불가)
  4. disabled : 요소가 비활성화 되며 정보 제출 시 값이 제출되지 않는다.

HTML 주의사항

  1. 대소문자 구분하기
  2. 닫는 태그 제대로 작성하기
  3. 태그 중첩 조심하기

💦 공부하며 어려웠던 내용

오랜만에 HTML 기본 공부를 했는데 옛날에 배웠던 내용이 생각나기도 하고 어려운 개념은 아니라 별로 어려운 것은 없었다.

profile
Sangwon Jwa
이전 포스트

[3/29] TIL - 알고리즘 문제 연습 (Heap, Dynamic Programming, DFS/BFS), 특강 : 코딩테스트와 면접

다음 포스트

[4/2] TIL - HTTP, Python requests 라이브러리, 웹 스크래핑/크롤링

0개의 댓글