-
HTML <body>태그 살펴보기HTML 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 4table 태그
- 표 요소, 행(Row)과 열(Column)의 집합
- 행을 의미하는 <tr> 태그(Table Row)를 먼저 작성
- 열을 의미하는 <td> 태그(Table Data)를 <tr> 태그 내부에 작성
'HTML' 카테고리의 다른 글
HTML 글자(인라인)와 상자(블록)의 개념 (0) 2021.04.18 HTML 빈 태그 (0) 2021.04.17 HTML 요소와 관계 (0) 2021.04.17 HTML <head>태그 살펴보기 (0) 2021.04.11 HTML 알아보기 (0) 2021.04.11