🙆‍♀️HTML 기본 요소

은비·2023년 5월 1일

HTML&CSS

목록 보기

2/2

📌 HTML 텍스트 입력 시 주의할 점

HTML 코드에서 Enter키를 눌러 줄을 바꾸었다 해도 웹 브라우저에 표시된
내용의 줄은 바뀌지 않는 모습을 볼 수 있다.

📌 텍스트 표시, 서식 종류

1. <br> : 단일 줄 바꿈을 정의(line break)
2. <p> : 단락(Paragraphs)을 정의
  - 단락의 전후에 빈 줄이 추가된다. 
3. <pre> : 미리 서식이 지정된 텍스트를 정의
-  고정 너비 글꼴로 표시되며 공백과 줄 바꿈을 모두 유지한다.
4. <h1>~<h6> : 제목을 정의 (heading)
5. <!-- --> : 주석(comment), 코드를 설명하는 글

📌 특수문자

공백 : &nbsp;
< : &lt;
> : &gt;
" &quot;
' : &acute;
& : &amp;

HTML은 여러 개의 공백이 이웃해 있더라도 하나의 공백으로 간주한다. 따라서 불가피하게 여러 개의 공백을 나타내고자 할 때는 를 여러 개 사용해야 한다. (non-breaking space의 약자)

📌 목록 표시

리스트 : 항목들을 나열하는데 사용
<ul> : 순서가 없이 정렬되지 않은 목록 정의(unordered list)
  - li 태그에 type 속성으로 리스트 표시 모양을 설정할 수 있음.
   (disc, circle,square)
<ol> : 순서가 지정된 목록 정의(ordered list)
  - type 속성으로 리스트 번호를 설정할 수 있음.
<dl> : 설명 목록 정의(definition list)
dt : definition term
dd : definition description
<li>, <dt>, <dd> : 리스트의 항목 정의
리스트 항목 안에도 텍스트, 이미지, 링크, 다른 리스트를 넣을 수 있다.

Ex) <ul>
    <li>……</li>
    <li>……</li>
    <li>……</li>
    </ul>

📌 하이퍼링크(링크)

하이퍼링크 : 현재 문서에서 다른 문서로 연결해 이동하는 것
<a> : 텍스트나 이미지에 링크를 걸고, 클릭하면 연결된 다른 문서로 이동
  - 밑줄, 글자 색 등의 스타일이 자동 지정 됨
  - 마우스 커서를 링크 위에 올리면 손 모양 커서로 변경 됨
<a href="http://www.google.com" target="_blank">구글로 이동</a>
  * href 속성 : 링크의 목적지 지정
  * target 속성 : 연결되는 새로운 페이지가 어느 위치에서 열리는지 지정
  1. _self : 기본값, 현재 창/탭에서 문서를 표시한다.
  2. _blank : 새로운 창/탭에서 문서를 표시한다. 
  3. _parent : 상위(부모) 프레임에서 문서를 표시한다.
  4. _top : 현재 창/탭의 본문에서 문서를 표시하며, 
     본문 이하 모든 프레임은 사라진다.
     
📃 관련예제 : <!DOCTYPE html>
<html>
<body>
    <a href="http://www.google.com" target="_self">구글 가기</a>
    <p>target 속성이 "_self"이므로 , 링크는 현재 탭에서 열립니다. </p>
    
    <a href="http://www.naver.com" target="_blank">네이버 가기</a>
    <p>target 속성이 "_blank"이므로 , 링크는 새로운 탭에서 열립니다. </p>
</body>
</html>

📌 수평선 표현

<hr> : 수평선을 통해 콘텐츠 주제 변경을 정의

📌 지정된 id영역으로 이동

id 속성 : 고유한 값을 지정하고 공백을 포함할 수 없다.

📌 이미지 표현

<img> : 문서에 이미지 정의
  - src : 이미지 경로 지정
  - width : 이미지 가로 크기
  - height : 이미지 세로 크기
  - alt : 어떤 이유로 이미지를 표시하지 못 할 경우 지정하는 대체 텍스트
    (alternate text), 웹 접근성에 기여
예시 : img src=“국화.jpg＂ width=＂300＂ height=＂230“ alt =“붉은국화”>

📌 테이블

<table> : 표 형태의 데이터를 표시하는데 사용됨
<tr> 태그 : 하나의 행 표현 (<tr> … </tr>) 
<td> 태그 : table data, 하나의 데이터 표현 (<td> … </td>)
<th> 태그 : table header, 각 열의 헤더(열의 제목)이 있는 경우 <tr>…</tr>로 행을 만들고 그 안에 <th> … </th>를 사용하여 생성

border가 "1"이면 경계선이 있는 것이고 “0"이면 경계선이 없다는 것을 의미한다.

📌 테이블 병합

- 행 병합(row span) : 행이 병합되는 것 rowspan
rowspan=‘2’ 지정 시 현재 셀 위치에서 2개의 행을 병합하겠다는 의미

- 열 병합(column span) : 열이 병합되는 것 colspan
Colspan=‘3’ 지정 시 현재 셀 위치에서 3개의 열을 병합하겠다는 의미
- 테이블 캡션 : <caption>테이블 제목 </caption>

📌 <\iframe>

 - <iframe> : Inline Frame, 내부 프레임
- 현재 문서 내에 다른 문서를 포함시키고자 할 때 사용
- 익스플로러의 독자적인 요소였으나 w3c에서 HTML 4.01부터 정식 도입하여 현재는 거의 모든 브라우저가 iframe을 지원
- iframe에서 지정된 name속성을 참조하여 링크의 타겟 프레임으로 사용할 수 있음
- title 속성과 함께 사용하여 웹 접근성에 기여

📌 div와 span

HTML 요소는 <div>와 <span>을 이용해 묶을 수 있음

1. <div> : divide의 약자, 페이지를 논리적인 섹션으로 분리하는데 사용되는 태그
-자체적으로 특별한 의미가 없으며 블록 수준(Block-level)의 요소로서
-모든 HTML 요소를 묶는데 사용한다.
-블록 수준의 요소는 하나의 줄을 전부 차지한다.
-주로 웹 페이지의 레이아웃을 작성하는데 사용한다.

2. <span>
-자체적으로 특별한 의미가 없으며 인라인 수준(inline-level)의 요소로서 텍스트를 묶어 스타일을 적용할 때 사용한다.
-인라인 수준의 요소는 자신이 필요한 크기만 차지한다.
-인라인 요소는 크기를 지정할 수 없다(width, height가 적용되지 않는다)

📌 Block-Inline 요소

1. Block-level 요소
-사용 가능한 최대 가로 너비를 사용
-크기 지정 가능(너비, 높이)
-margin, padding 속성의 상하좌우 여백을 온전하게 사용 가능
-레이아웃을 위한 용도로 사용
-<div>, <ul>, <ol>, <dl>, <dt>, <h1>~<h6>, <hr>, <li>, <p>, <table> 등
  
2. Inline-level 요소
-필요한 만큼의 너비만 사용
-크기 지정 불가
-margin, padding 속성의 좌우 여백만 사용 가능
-텍스트를 다루는 용도로 사용
- <span>, <a>, <br>, <b>, <code>, <em>, <strong>, <img> 등