HTML 핵심 요소 정리, 주석, 전역 속성

웹 페이지는 줄바꿈 처리를 인식하지 않습니다.

블록(상자) 요소

---

<div> ~ </div> : 특별한 의미가 없는 구분을 의한 요소 (Division)

<h1> ~ </h1~> : 제목을 의미하는 요소 (Heading)

- 1~ 6 번까지 있으며 숫자가 커질수록 글자의 크기가 작아짐 / 숫자가 작을수록 더 중요한 제목을 정의

<p> : 문장을 의미하는 요소 (Paragraph)

<ul> ~ </ul> : 순서가 필요없는 목록의 집합 (Unordered List)

<ol> ~ </ol> : 순서가 필요한 목록의 집한 (Ordered List)

<li> ~ </li> : 목록 내 각 항목 (List Item)

※ <ul> 태그와 <li>태그는 하나의 쌍으로 작성, 단독 사용 불가!

 

# ul>li*(추가할 li태그의 개수) & tab => 그만큼 생성함

<ul>
  <li>사과</li>
  <li>딸기</li>
  <li>수박</li>
  <li>오렌지</li>
</ul>

 

인라인(글자) 요소

---

<img> ~ </img> : 이미지를 삽입하는 요소

<img src="이미지의 경로" alt="이미지의 이름(개발자의품격 로고, real programmers, share your knowledge) ">
src ="삽입할 이미지의 경로"
alt = "삽입할 이미지의 이름"
=> 만약, src의 이미지를 가리키는 주소가 잘못되거나 오류가 발생할 시,
사진은 아래처럼 나타나게 됨! => src 와 alt 모두 필수 속성!

<a> ~ </a> : 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 (anchor)

<a href="연결할 링크 주소" target="새창 or 기본창에서 열릴지 결정">텍스트 or 이미지</a>

target=”_blank” : 새로운 페이지에서 링크 주소가 열림

target=”_self” : 현재 페이지에서 링크 주소가 열림

 

<span> ~ </span> : 특별한 의미가 없는 구분을 위한 요소

<br /> : 줄바꿈 요소(Break) - 일종의 Enter 역할

 

<input type="입력받을 데이터 타입" />  : 사용자가 데이터를 입력하는 요소 {인라인 요소 & 글자 요소}

따라서, 가로 및 세로 /  외부 및 내부 여백을 지정할 수 있음

value = “미리 입력된 값(데이터)” → 화면에 미리 입력되어 사용자가 글자를 삭제하거나 뒤에 추가할 수 있음 & 클릭하면 자동으로 사라지지 x

placeholder = “사용자가 입력할 값(데이터)” : 사용자가 입력할 값(데이터)의 힌트 / 사용자가 글자를 입력하면 기존에 나와있는 “이름을 입력하세요” 부분은 사라지게 됨!

 

readonly : 입력하지는 못하고 읽게만 하는 읽기 전용 필드

<input type=텍스트-입력-필드 readonly>

required : 필수 입력 필드를 지정

<input type="text" id="user-name" autofocus required>
-> required로 지정한 필드를 사용자가 입력하지 않았을 경우 알림
메시지를 사용자에게 보여줍니다.

disabled : 입력 요소를 비활성화

<input type =”text” disabled/>

 

checked : 체크박스 입력 요소 체크됨

<input type =”checkbox” checked />

 

radio : 사용자에게 체크 여부를 그룹에서 1개만 선택 가능(택1)

<label>
	<input type = “radio” name =”fruits” />RadioButton1
</label>
<label>
	<input type = “radio” name =”fruits” />RadioButton2
</label>

사용자에게 체크 여부를 그룹에서 1개만 입력 받음 / fruits 란 이름의 그룹

이때, name 속성에서 동일 이름으로 그룹화되어 있지 않으면 라디오 버튼 여러 개가 클릭 가능, 반드시 그룹화 할 것!

<input type(데이터의 타입) =”text(입력한 데이터 값)” value="HEROPY!"/>

<input> 태그의 type 속성 
 text : 한 줄 짜리 텍스트를 입력할 수 있는 텍스트 박스
 password : 비밀번호를 입력할 수 있는 필드
 search : 검색할 때 입력하는 필드
 url : url 주소를 입력하는 필드
 email : 이메일 주소를 입력하는 필드
 tel : 전화번호를 입력하는 필드
 checkbox : 주어진 여러 항목에서 2개 이상 선택가능한 체크 박스
 radio : 주어진 여러 항목에서 1개만 선택가능한 라디오 버튼
 number : 숫자 조절가능한 스핀 박스
 range : 숫자 조절가능한 슬라이드 막
 date : 사용자 지역 기준 날짜(연,월,일)
 month : 사용자 지역 기준 날짜(연,월)
 week : 사용자 지역 기준 날짜(연,주)
 time : 사용자 지역 기준 시간(시,분,초,분할 초)
datetime : 국제표준시(UTC)로 설정된 날짜와 시간(연,월,일,시,분,초,분할 초)
submit : 전송 버튼
reset : 리셋 버튼
image : submit 버튼 대신 사용할 이미지
button : 일반 버튼
file : 파일을 첨부할 수 있는 버튼
hidden : 사용자에게 보이지 않지만 서버로 넘겨주는 값이 있는 필

<input type="text" value="HEROPY" placeholder="이름을 입력하세요!" />

이렇게 작성하게 되면 처음에 HEROPY 글자가 나오게 되고 HEROPY 글자를 전부 지우게 되면
그때, 이름을 입력하세요! 라는 문구가 나오게 됩니다.

 

<table> : 표 요소, 행과 열의 집합 - 행 다음 열을 지정 [반드시 행이 먼저 그 후 열이 작성됨]

   <tr> ~ </tr> : 행을 지정하는 요소 (Table Row)

   <td> ~ </td> : 열을 지정하는 요소 (Table Data)

   <th> ~ </th> : 텍스트를 진하게 표시 & 셀 중앙에 배치

<table>
	<tr>
		<td>A</td><td>B</td>
	</tr>
	<tr>
		<td>C</td><td>D</td>
	</tr>
</table>

 

⇒ A B

    C D

 

Wrapping : 요소(텍스트)를 어떤 요소로 묶어주는(감싸는) 행위 -> 주로 span or div 태그에서 사용

---

주석 - 수정사항이나 설명 등을 작성

ctrl + /  or <!--Comment-->  으로 표시함! {화면에 출력이 되지 않음}

---

 

{전역 속성} - 전체 영역에서 모두 사용 가능

 

<태그 title = “설명”></태그> : html 문서의 제목을 지정(웹 브라우저 탭에 표시) / 요소의 정보나 설명을 지정

<title> : html 문서의 제목을 지정(웹 브라우저 탭에 표시), 요소의 정보나 설명을 지정{전역 속성}

• 마우스 포인터를 텍스트 위에 올려놓았을 때 정보를 표시하려면 title =”표시할 정보 내용” 작성하면 됨

    <title>Document</title>

 

<태그 style =”스타일“></태그> : 요소에 적용할 스타일(css) 지정

 

<태그 class = “이름”></태그> : 요소를 지칭하는 중복 가능한 이름

클래스를 입력할 때 .클래스 명 {} 으로 작성

 

<태그 id = “이름”></태그> : 요소를 지칭하는 고유한 이름(중복 사용x) / 중요한 요소에 작성

#아이디 이름 {} 으로 작성

 

<태그 data-이름="데이터"></태그> : 요소에 데이터를 지정

HTML
<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>

JAVASRCIPT
const els = document.querySelectorAll('div')
els.forEach(el => {
   console.log(el.dataset.fruitName)
})

 

이때, HTML 문서에 JAVASCRIPT 문서를 연결하려면 헤더 부분에

<script defer src="./main.js"></script> 형식으로 작성해서 연결시켜야 동작합니다.

 

SCRIPT 요소에 defer 속성은, HTML 구조가 준비된 후(문서 분석 이후)에 JavaScript를 해석하겠다는 의미가 있습니다.