HTML

김서현·2022년 5월 22일

html

프론트엔드 스터디

목록 보기

1/16

이 글은 boostcourse의 '웹 UI 개발'을 수강하고 적는 글입니다.

📌 1. HTML 이해하기

1) HTML 소개

HTML : Hyper Text Markup Language

웹 페이지를 만드는 언어

Hyper Text : 링크 (text 그 이상)

Markup Language : 프로그래밍 언어의 한 종류로 정보를 구조적으로 표현 가능한 언어

확장자가 html

2) HTML 문법 - 태그

태그(TAG) : 무언가를 표시하기 위한 꼬리표, 이름표 -> 브라우저가 인식해서 표현함

<h1> Hello, HTML </h1>

시작 태그 : <태그이름>

종료 태그 : </태그이름>

시작 태그와 종료 태그로 감싸진 부분이 브라우저에 표시되는 내용

요소 : 내용을 포함한 태그 전체

태그는 HTML뿐만 아니라 XML, SGML, XHTML 등 다양한 마크업 언어에서 모두 사용됨.

3) HTML 문법 - 속성

속성(ATTRIBUTE) : 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값. 이름과 값으로 이루어져 있음.

<h1 id="title"> Hello, HTML </h1>

태그 이름 뒤에 공백으로 구분하여 속성 이름과 속성값을 써줌.

속성이름="속성값" 또는 속성이름='속성값'

하나에 여러개의 속성을 넣을 수 있음. 속성 선언 순서는 중요하지 않음.
<h1 id="title" class="test"> Hello, HTML </h1>
어느 태그에나 사용할 수 있는 global한 속성도 있고, 특정 태그에서만 사용될 수 있는 속성도 있음. (대표적 global 속성 : id, class)

4) HTML 문법 - 태그 중첩

올바른 예
<h1>Hello, <i>HTML</i></h1>
잘못된 예
<h1>Hello, <i>HTML</h1></i>
안에 선언되는 태그는 반드시 부모 태그를 벗어나서는 안됨.

5) HTML 문법 - 빈 태그

빈 태그(EMPTY TAG) : 시작 태그만 존재하고 종료 태그는 존재하지 않음. 따라서 내용이 존재하지 않음.

<br>
<img src="">
<input type="">

텍스트가 아닌 이미지나 비디오와 같은 외부 리소스를 삽입하는 경우

브라우저가 내용을 대체한다고 하여 replacement tag라고 부르기도 함.

6) HTML 문법 - 공백

공백(SPACE) : 기본적으로 HTML은 두 칸 이상의 공백을 모두 무시함.

<h1>Hello, HTML</h1>
<h1>Hello,     HTML</h1>
<h1>
    Hello,
    HTML
</h1>
위 결과는 모두 동일하게 나옴.

7) HTML 문법 - 주석

주석(COMMENT TAGS) : 화면에 노출되지 않고 메모 용도로만 사용하는 것.

<!-- 내용 -->

8) 문서의 기본 구조

웹 문서를 작성할 때 반드시 들어가야 하는 기본적인 내용

단축키 : ! + Tab
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>Hello, HTML</h1>
    </body>
</html>
DTD(DOCTYPE) : 이 문서가 어떤 버전으로 작성되었는가. 문서 내 최상단에 위치해야 함.

html

lang : 이 문서가 어떤 언어로 작성되었는가. <html lang="ko"> -> 한국어로 작성됨.

head : 문서의 기본 설정이나 외부 스타일 시트 파일 및 js파일을 연결하는 등의 역할.

<meta charset="UTF-8"> : charset은 문자의 인코딩 방식을 지정

title : 문서의 제목. 탭 바에 노출되는 내용. 접근성이나 검색 엔진 최적화에 큰 역할.

body : 실제 브라우저 화면에 나타나는 내용

📌 2. HTML 태그

1) HTML 태그 소개

태그 reference site
https://www.advancedwebranking.com/html/#overview

2) 제목과 단락요소

제목(HEADING) : 문서 내에 제목을 표현할 때 사용하는 태그

<h1> ~ <h6> : 숫자가 낮을수록 더 큰 단위의 제목으로 사용

단락과 개행(PARAGRAPH, LINEBREAK)

<p> : 글의 단락을 나타낸다.

<br> : 글의 줄바꿈을 생성한다.

3) 텍스트를 꾸며주는 요소

텍스트 관련 태그들 : B, I, U, S

<b> : bold
<i> : italic
<u> : underline

<p>
    <b>Lorem</b> <i>ipsum</i> dolor sit amet<br>
    <u>Lorem</u> <s>ipsum</s> dolor sit amet
</p>

4) 앵커 요소

앵커(ANCHOR)

<a href="http://www.naver.com/" target="_blank">네이버</a>

다른 문서로 이동할 수 있는 링크를 생성
href : 링크의 목적지가 되는 URL을 지정
<a href= "#id속성값"> : 내부 링크 - 페이지 내부의 특정 요소로 초점을 이동할 수 있음. 주로 페이지에 내용이 많아 스크롤이 길어질 경우 빠르게 이동하기 위해 사용.
<a href="#some-element-id">회사 소개로 이동하기</a>
... 중략.
<h1 id="some-element-id">회사 소개</h1>
target : 링크된 리소스를 어디에 표시할지 나타냄.

_self : 현재 같은프레임에 반응을 불러옴. 디폴트 값

_blank : 새로운 창을 불러옴

참고 링크 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

5) 의미가 없는 컨테이너 요소

CONTAINER : 의미없이 요소를 묶기 위한 태그

<div> : block-level - 기본적으로 한 줄을 생성해서 내용을 표현 ex) <p>

<span> : inline-level - 한 줄 안에서 표현되는 요소 ex) <b> <i> <u>

6) 리스트 요소

리스트 : ul, ol, dl

<li> : 부모 태그는 <ul>, <ol>만 가질 수 있고, 자식태그에 다양한 태그 올 수 있음.

<ul> : unordered list. 순서가 없는 리스트

<ul> 
    <li> 콩나물</li> 
    <li> 파</li> 
    <li> 국  간장</li> 
    ... 
</ul>

<ol> : ordered list. 순서가 있는 리스트. 자식 요소로 <li>태그만 올 수 있음.

<ol>
    <li>냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다.</li>
    <li>콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.</li>
    <li>뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.</li>
    ...
</ol>

<dl> : description list. 용어를 설명하는 리스트
<dt> : definition term. 용어
<dd> : definition description. 용어의 정의

<dl>
    <dt>리플리 증후군</dt>
    <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
    <dd>리플리 증후군에 대한 또 다른 설명입니다.</dd>
    <dt>피그말리온 효과</dt>
    <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
    <dt>언더독 효과</dt>
    <dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>

7) 이미지 요소

이미지(IMAGE) : 빈 태그

<img src="./images/pizza.png" alt="피자">

src : 이미지 경로 지정 (필수)

상대 경로 : 현재 웹문서의 페이지를 기준으로 경로를 나타냄
./ : 현재 폴더 (생략 가능)
../ : 상위 폴더
folder/

절대 경로 : 실제 위치한 전체 경로
c:/
http://

<img src="./images/pizza.png" alt="피자">

<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">
alt : 이미지의 대체 텍스트를 입력 (필수와 같음)

width/height : 이미지의 크기를 지정 (optional). 둘 중에 하나만 설정하면 원본 비율에 맞게 줄어듬.

이미지 확장자

GIF : 256색으로 제한적이지만 용량이 작고 애니메이션과 투명 이미지 가능

JPG : 높은 압축률과 자연스러운 색상 표현이 가능하여 사진이나 일반적인 그림에 사용. 투명은 지원하지 않음.

PNG : jpg와 비교했을 때, 이미지 손실이 없고 투명과 반투명 모두 지원

8) 테이블 요소

표(TABLE) : 데이터 표를 나타내는 태그

<td>, <th> : 데이터 셀(table-cell)

<tr> : 행(table-row)

<table> : 표

4x4 table 만들기

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

테이블 관련 속성

<colspan> : 셀을 가로방향으로 병합

<rowspan> : 셀을 세로방향으로 병합

테이블 구조 관련 태그

<caption> : 표의 제목

<thread> : 제목 행을 그룹. <td>가 아닌 <th>로 사용

<tbody> : 본문 행을 그룹

<tfoot> : 바닥 행을 그룹. 가장 아래 행에 나옴. <tbody> 뒤에 위치해야 함.

<!--table 만들기 실습-->
<table>
        <caption>Specification values</caption>
        <thread>
            <tr>
                <th rowspan="2">Grade.</th>
                <th rowspan="2">Point.</th>
                <th colspan="2">Strength.</th>
                <th rowspan="2">Percent.</th>
            </tr>
            <tr>
                <th>kg/mm</th>
                <th>lb/in</th>
            </tr>
        </thread>
        <tbody>
            read>
            <tr>
                <td>Hard</td>
                <td>0.45</td>
                <td>56.2</td>
                <td>80,000</td>
                <td>20</td>
            </tr>
            <tr>
                <td>Medium</td>
                <td>0.45</td>
                <td>42.2</td>
                <td>60,000</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Soft</td>
                <td>0.45</td>
                <td>42.2</td>
                <td>60,000</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>

추가로 공부할 것 : <colgroup>, <col>, scope, headers

9) 폼 요소

폼(FORM) : 서버에 데이터를 전달하기 위한 요소들

input 요소 : 빈 태그. 대표적인 폼 요소로, 다양한 type 속성으로 여러 종류의 입력 양식으로 나타남. <input type="...">
단순한 텍스트 입력
<input type="text" placeholder="ㅇㅇㅇ">
암호와 같이 공개할 수 없는 내용 입력
<input type="password">
중복 선택이 불가능하며 하나의 항목만을 선택 가능.
<input type="radio" name="gender" checked> 남자
<input type="radio" name="gender"> 여자
체크박스. 중복 선택이 가능함.
<input type="checkbox" name="hobby"> 등산
<input type="checkbox" name="hobby"> 독서
<input type="checkbox" name="hobby"> 운동
📝 radio와 checkbox 타입은 name 속성을 이용해 같은 항목임을 알려야 함. boolean 타입의 checked 속성은 속성값이 없이 선언만 해주면 됨. 사용자가 체크하기 전에 체크된 상태로 나옴.

파일을 서버에 올릴 때 사용
<input type="file">

클릭 가능한 버튼을 만듦.

submit : form의 값을 전송

reset : form의 값을 초기화

image : 이미지를 삽입할 수 있는 버튼 (submit과 동작이 동일)

button : 아무 기능이 없는 버튼
<form action="./test.html">
    메시지: <input type="text" name="message"><br>
    <input type="submit" value="전송">
    <input type="reset" value="취소">
    <input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
    <input type="button" value="버튼">
</form>
value 속성을 이용해 버튼 이름 정의 가능

SELCET 요소 : 선택 목록상자. 몇 개의 선택지를 리스트 형태로 노출하고 그 중 하나를 선택할 수 있게 하는 태그. (multiple 속성을 사용하여 다중 선택 가능. selected 속성이 radio type의 checked 속성과 유사하게 작동)
<select>
    <option>서울</option>
    <option>경기</option>
    <option>강원</option>
    ...
</select>

textarea 요소 : 여러줄의 텍스트를 입력할 때 사용.
<textarea rows="5" cols="30">
    ...
</textarea>

button 요소 : <input type="submit|reset|button>"과 같은 기능을 하나, 빈 태그가 아니며 내용을 안에 직접 넣을 수 있음.
<button type="submit|reset|button">ㅇㅇㅇ</button>

label 요소 : form 요소의 이름과 form 요소를 명시적으로 연결 시켜주기 위함으로 웹 접근성 향상에 도움이 된다.(필수적)

form 요소의 id속성값과 <label>의 for속성값을 같게 해주어야 함.

연결 후에는 form 요소의 이름을 클릭했을 경우 해당 form 요소를 클릭한 것처럼 동작.
<label for="name">이름</label>: <input type="text" id="name"><br>
<label for="nickname">이름</label>: <input type="text" id="nickname"><br>
<label for="address">이름</label>: <input type="text" id="address"><br>

fieldset, legend 요소

<fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용

<legend> : 폼 요소의 제목으로 <fieldset> 요소 내부에 작성.
<fieldset>
    <legend>기본 정보</legend>
    ... 폼 요소들 ...
</fieldset>
<fieldset>
    <legend>부가 정보</legend>
    ... 폼 요소들 ...
</fieldset>

form 요소

action : 폼 데이터를 처리하기 위한 서버의 주소

method : 데이터를 전송하는 방식을 지정

get - 주소창에 파라미터 형태로 붙어 데이터 노출됨

post - 데이터 전송시 데이터 노출 X)
<form action="" method="">
    <fieldset>
        <legend>기본 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
    <fieldset>
        <legend>부가 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
</form>

전체적 실습 코드

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>form</title>
</head>
<body>
	<form action="">
		<h1>Form 관련 요소</h1>
		<fieldset>
			<legend>기본 정보</legend>
			<label for="userid">아이디 : </label> <input type="text" placeholder="영문으로만 써주세요" id="userid"><br>
			<label for="userpw">비밀번호 : </label> <input type="password" id="userpw"><br>
			성별 : <label for="male">남자</label> <input type="radio" name="gender" id="male" checked>, <label for="female">여자</label> <input type="radio" name="gender" id="female"><br>
		</fieldset>
		<fieldset>
			<legend>부가 정보</legend>
			취미 : 영화 감상 <input type="checkbox" name="hobby" checked>, 음악 감상 <input type="checkbox" name="hobby">, 독서 <input type="checkbox" name="hobby"><br>
			프로필 사진 업로드 : <input type="file"><br>
			사는 지역 : <select>
				<option>서울</option>
				<option>경기</option>
				<option>강원</option>
				<option selected>제주</option>
			</select><br>
			자기소개 : <textarea cols="30" rows="5" placeholder="자기소개는 짧게 해주세요."></textarea><br>
			<button type="submit">전송</button>
			<button type="reset">취소</button>
		</fieldset>
	</form>
</body>
</html>

김서현

다음 포스트