HTML

HTML <body>태그 살펴보기

IT Blue 2021. 4. 12. 16:49

 

body 태그 내부 코드 내용 살표보기

 

<body>
    내용
</body> 

 

블록(상자) 요소

 

<div>
    <h1>내용</h1>
    <p>내용</p>
    <img src="경로" alt="대체 텍스트" />
</div>

div 태그 (Division)

- 블록(상자) 요소

- 특별한 의미가 없는 구분을 위한 요소 

- 레이아웃을 작업할때 사용

 

<h1>내용</h1>

h 태그 (Heading)

- 제목을 의미하는 요소 (목차)

- h1~6까지 (숫자가 작을수록 더 중요한 제목을 의미)

 

<p>내용</p>

p 태그 (Paragraph)

- 문장을 의미하는 요소

 

<ul>
    <li>리스트1</li>
    <li>리스트2</li>
    <li>리스트3</li>
    <li>리스트4</li>
</ul>

ul 태그 (Unordered List) , li 태그 (List Item)

- <ul> 태그는 순서가 필요없는 목록의 집합을 의미 (주관적인 순서)

- <li> 태그는 목록 내 각 항목

- <ul> 태그 자식으로 <li> 태그가 반드시 1개 이상 존재해야 한다

- <li> 태그는 반드시 <ul> 태그로 감싸져야 한다

 

인라인(글자) 요소

 

<span>내용</span>

span 태그

- 특별한 의미가 없는 구분을 위한 요소

- 요소(텍스트)를 어떤 요소로 묶어주는(감싸는) 행위 래핑(Wrapping)이라고 부름

 

<img src="경로" alt="대체 텍스트">

img 태그 (Image)

- 이미지를 삽입하는 요소

- img(Image) src(Source)속성에는 이미지의 경로를 작성

- alt(Alternate) 속성은 이미지가 출력되지 못하는 경우 대신 출력할 텍스트, 대체 텍스트라고 부름

 

<a href="경로">표시되는 텍스트</a>
<a href="https://www.naver.com">NAVER</a>
<a href="https://www.google.com" target="_blank">Google</a>

a 태그 (Anchor)

- <a> 태그의 href(Hypertext Reference) 속성은 링크된 페이지의 URL을 명시

- 다른 페이지로 이동할 수 있는 참조가 되는 경로를 입력

- target 속성은 링크 URL의 표시(브라우저 탭) 위치를 의미

 

<br/>

br 태그 (Break)

- 줄바꿈 요소

 

<input type="text" />
<input type="text" value="미리 입력된 값(데이터)" />
<input type="text" placeholder="사용자가 입력할 값(데이터)의 힌트" />
<input type="text" disabled/>

input 태그

- 인라인(글자) 요소이면서 블록(상자)의 특성을 추가적으로 사용할 수 있다 (Inline-block 요소)

- 사용자가 데이터를 입력하는 요소

- type 속성에 입력받을 데이터의 타입을 명시

- value 속성에 미리 데이터를 입력할 수 있다

- placeholder 속성에 힌트를 입력할 수 있다

- disabled 속성은 입력 요소를 비활성화 시킨다

 

<label>
    <input type="checkbox" /> 내용
</label>
<label>
    <input type="checkbox" checked /> 내용2
</label>

label 태그

- <label> 태그는 라벨 가능 요소(input)의 제목

- type="checkbox" 는 사용자에게 체크 여부를 입력 받음

- checked 속성은 체크박스 입력 요소가 미리 체크된다

 

<label>
    <input type="radio" name="그룹명" /> 내용
</label>
<label>
    <input type="radio" name="그룹명" /> 내용2
</label>

- type="radio" 는 사용자에게 체크 여부를 그룹에서 1개만 입력 받음 (택1)

- name 이라는 속성을 통해서 동일한 그룹명이면 1개의 그룹으로 묶어낸다

 

테이블 요소
<table>
    <tr>
        <td>1</td><td>2</td>
    </tr>
    <tr>
        <td>3</td><td>4</td>
    </tr>
</table>

1 2
3 4

table 태그

- 표 요소, 행(Row)과 열(Column)의 집합

- 행을 의미하는 <tr> 태그(Table Row)를 먼저 작성

- 열을 의미하는 <td> 태그(Table Data)를 <tr> 태그 내부에 작성