HTML 핵심 요소 정리, 블록(상자)요소, 인라인(글자)요소, 인라인(글자)요소 + 블록(상자)요소 = inline-block, 테이블 요소

블록(상자) 요소

가로 넓이를 최대한 많이 사용하려고 하는 요소임

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

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

<h1> ~ <h6> : 숫자가 작을수록 더 중요한 제목을 정의. (h1이 제일 크게 강조되고 h6이 제일 작음)

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

<ol></ol> : 순서가 필요한 목록 (ordered list)

<ul></ul> : 순서가 필요없는 목록의 집합을 의미 (unordered list)

<li></li> : 목록 내 각 항목 (list item)

ex) 순서가 객관적으로 중요도가 필요하지 않으면 필요 없는 것임

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

href = "" 링크 url

target = "_blank" 링크 url의 표시(브라우저 탭) 위치하는데 예를들어 _blank 를 명시하면 새 탭에 구글 페이지가 열리게 된다. 

 

ul>li*4 를 하면

<ul>

    <li></li>

     <li></li>

     <li></li>

     <li></li>

 

 

</ul>

 

인라인(글자)요소

가로 넓이를 최소한으로 사용함

<img /> : 이미지를 삽입하는 요소(image)

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

<br /> : 줄바꿈 태그 (break)

<label></label> : 라벨 가능 요소(input)의 제목

 

인라인(글자)요소 + 블록(상자)요소 = inline-block

<input /> : 사용자가 데이터를 입력하는 요소

<input type="text, checkbox, radio(택1) " value(미리 입력된 값(데이터))="" placeholder(사용자가 입력할 값(데이터)의 힌트="" disabled(입력 요소 비활성화, input 창이 보이는데 입력을 할 수 없도록 되어있음)="" />

<input type="radio" name="fruits" />Apple</input> => 그룹을 지을 수 있어야함! (name), 상호작용, 최소 2개 이상을 사용하기

 

테이블 요소(일단 블록(상자)요소이나.. )

<table></table> : 표 요소, 행(row)과 열(column)의 집합

<tr></tr> : 행을 의미함 (table-row)

<td></td> : 열을 의미함(table-data) - 하나의 셀

 

colspan (column span의 약어) : 열을 몇 칸 확장할 것인지를 의미, 실제 엑셀이나 구글 시트 같은 '표'가 필요한 경우가 아니라면 오른쪽 화면에 보이는 레이아웃을 table(표) 요소로 만들려고 시도하지 않기! 대표적으로 그리드 같은 다른 css 기능으로 레이아웃을 작업해야함

(실제 표를 제작하는 것이 아니면... 사용할 일이 없음)

 

 

wrappint(래핑) : 요소(텍스트)를 어떤 요소로 묶어주는(감싸는) 행위

 

cmd + /

주석 : 수정사항이나 설명등을 작성, 브라우저는 이 태그를 해석하지 않기 때문에 화면에 내용이 표시되지 않음

 

전역속성

전체의 영역에서 사용할 수 있는 속성으로 html의 body 부분에 사용하는 태그에 다 사용할 수 있다

 

<태그 title=""></태그>

title="네이버로 이동" : 요소의 정보나 설명을 지정, 마우스를 해당 엘리먼트 위에 올려놓았을 때 툴팁(tooltip)이 표시되고 웹 접근성 향상을 위해서도 많이 사용

<태그 style="스타일"></태그>

class="" : 요소를 지칭하는 중복 가능한 이름, 정확하게 집어서 사용하기 위해

<태그 class="이름 이름 이름"></태그>

id="" : 요소를 지칭하는 고유한 이름, 중복 불가, 중요한 부분엔 id를 부여함

<태그 id="이름"></태그>

<태그 data-이름="데이터"></태그> : 요소에 데이터를 지정, 특정 데이터, js에서 사용함