html

HTML 중요 태그 정리

youngseokim_kr 2021. 9. 28. 17:04

인라인요소 -글자요소 블록요소-범위

인라인요소는 여백을 가로는 가능하나 세로는 불가능, 수평으로 쌓인다

블록요소는 둘다 가능, 한 칸씩 쌓인다.

<div>태그 -특별한 의미가 없는 구분을 위한 요소 (division의 약자)  [블록요소]

<h1>태그 - 제목을 의미하는 요소 h1~h6까지 존재 작으면 작을수록 더 중요한 제목을 정의 (heading) [블록요소]

<p>태그 - 문장을 의미하는 요소 (paragraph) [블록요소]

<img>태그 - 이미지를 삽입하는 요소 (image) [인라인요소]

<img>속성 - [src="경로"] 삽입할 이미지의 경로, [alt="이름"] 삽입할 이미지 이름 필수속성 이미지 업로드 실패시 나옴

<ul>태그 - 순서가 필요없는 목록의 집합을 의미 (unordered List) [블록요소]

<li>태그 - ul태그 안에 목록 내 각 항목 (List item) [블록요소]

<a>태그 - 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 (anchor) [인라인요소]

<a>속성 - [href="https://www.naver.com"] 이동하는 주소 [target="_blank"] 새로운 탭으로 실행

<span>태그 - 특별한 의미가 없는 구분을 위한 요소 [인라인요소]

<span>속성 - 오늘도 난 <span>오징어</span> 오징어를 강조하거나 색을 변경할 때 사용

<br/> -  줄바꿈 요소 (break) [인라인요소]

<input    /> - 사용자가 데이터를 입력하는 요소 [인라인요소][블록요소] -가로세로여백가능, 수평으로 쌓인다.

<input>속성 [type="text,button,password, checkbox, radio.."] 어떠한 타입으로 입력 받을지 정한다.

[value="hi"]미리 입력된 값 [disabled] 비활성화  [checked] 사용자가 체크를 안해도 미리 체크

[placeholder=",,,"] 사용자가 입력할 값의 힌트 옅은 글씨로 입력되어 있고 마우스 커서를 클릭하면 써 있는 글씨가 사라짐

radio 버튼은 여러개 중에 하나만 선택가능

<table>태그 - 표 요소 행 과 열의 집합 [테이블요소]

<tr> 태그 행을 의미

<td> 열을 의미

<table>
    <tr>
        <td>a</td><td>b</td>
    </tr>
    <tr>
        <td>c</td><td>d</td>
    </tr>
</table>

a b

c d 를 의미

'html' 카테고리의 다른 글

표기법 [html, js, css 단어 표기법]  (0) 2021.10.06
태그 전역 속성  (0) 2021.09.28
브라우저 css 초기화하기  (0) 2021.09.26
프론트엔드 코드테스트 [codepen.io]  (0) 2021.09.26
html 태그 기초[DOCTYPE, html, head, body]  (0) 2021.09.26