[HTML] 헷갈리는 부분 타파하기!

1. 빈 태그

보통은 시작태그와 종료태그가 1쌍으로 있지만 없는 경우를 빈 태그라고 한다. 빈 태그의 예시는 다음과 같다.

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

 

2. 공백

HTML은 두칸 이상의 공백을 모두 무시한다

ex) <h1>hi,    hello!</h1>  ==> 출력 : hi, hello

 

 

3. 웹사이트에는 어떤 태그들이 많이 쓰일까 통계

재밌어서 첨부!

https://www.advancedwebranking.com/seo/html-study/#overview

HTML Study

 

4. 텍스트를 꾸며주는 요소

• <u> : 글자 밑줄 
• <s> : 글자의 중간선 ex/ hello

 

5. <a> 태그의  target 속성

target 속성은 링크된 리소스를 어디에 표시할지를 나타내는 속성이다.

• _self는 현재 화면에 표시한다는 의미로, target 속성이 선언되지 않으면 기본적으로 self와 같이 동작
• _blank는 새로운 창에 표시한다는 의미로 외부 페이지가 나타나게끔 하는 속성
• _parent와 _top은 프레임이라는 특정 조건에서만 동작하는 속성으로, 최근에는 프레임을 잘 쓰지 않음

 

6. <a> 태그의 내부링크

<a>를 통해 페이지 내부의 특정 요소로 초점을 이동할 수도 있는데, 이를 내부 링크라고 함.

• 내부 링크를 사용할 때는 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적음
• 자주 접하는 '맨 위로 가기' 버튼이 내부 링크로 만들어짐

<a href="#some-element-id">회사 소개로 이동하기</a>

... 중략.

<h1 id="some-element-id">회사 소개</h1>

 

7. 인라인 태그 vs 블록 태그

<p> : 블록 레벨 태그

<b>, <i>, <u>, <s> : 인라인 레벨 태그

 

8. <dl>태그

용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조

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

• <dt> : 용어를 나타내는 태그
• <dd> : 용어에 대한 정의 또는 설명을 나타내는 태그

 

9. <img>태그의 width/height 속성

값의 단위는 필요하지 않으며, 값을 입력하면 자동으로 픽셀 단위로 계산

 

10. <input>태그의 여러 속성

<form action="./test.html">
    메시지: <input type="text" name="message"><br>
    <input type="submit">
    <input type="reset">
    <input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
    <input type="button" value="버튼">
</form>

• reset : form의 값을 초기화하는 버튼
• image : 이미지를 삽입할 수 있는 버튼 (submit과 동작이 동일함), 이미지 버튼은 이미지 관련 속성인 src, alt 속성이 반드시 필요하며 width/height 속성을 적용할 수 있음
• button : 아무 기능이 없는 버튼

 

11. <form>태그의 여러 속성

• <select> : 선택 목록 상자 또는 콤보박스, 몇 개의 선택지를 리스트 형태로 노출하고 그중 하나를 선택할 수 있게 하는 태그. (multiple 속성을 사용하면 다중 선택도 가능)

<select>
    <option>서울</option>
    <option>경기</option>
    <option selected>강원</option> /*선택된 것이라고 표기 가능*/
    ...
</select>

• <button> : 아래 코드 처럼 한꺼번에 속성 넣은 버튼 생성 가능

<button type="submit|reset|button">ㅇㅇㅇ</button>

 

 

12. <fieldset>, <legend>

form 요소를 구조화 하기 위해 필요한 태그

• <fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
• <legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성

<fieldset>은 보통 form의 성격에 따라 구분합니다.

<legend>는 <fieldset>의 자식으로 반드시 최상단에 위치해야 합니다.

<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>
			...
		</fieldset>
	</form>

 

13. <form>에는 대표적인 2가지 속성

• action: 데이터를 처리하기 위한 서버의 주소
• method: 데이터를 전송하는 방식을 지정

method 속성값에는 get/post 2가지 방식이 존재

• get : 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출
• post : 데이터가 전송될 때 데이터가 노출되지 않음.

 

14. 시멘틱 마크업

시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻으로 구조화를 잘 해줘야함

<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>

윗 코드처럼 화면 상에는 똑같이 표현되지만 컴퓨터가 이해할 때 전자는 아무런 의미가 없고 후자는 의미가 있는 표현임

 

15. 블록 & 인라인 

- 블록 레벨 요소

• 부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소
• 양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생김.
• 블록 레벨 요소는 일반적인 모든 요소(블록, 인라인 레벨 등)를 포함 가능
• ex) " div, h1~h6, p, ul, li, table ..."

 

- 인라인 레벨 요소

• 하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소
• 라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있음
• 인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없음
• 즉, 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없음
• ex) " span, i, img, em, strong, a ..." 
• 예외) <a>는 인라인 레벨 요소지만 자손으로 블록 레벨 요소를 가질 수 있음.