Study/HTML5&CSS

part02_HTML요소

슬기로운 개발자 2022. 5. 13. 02:25
728x90

1. HTML 요소

요소(Element, 엘리먼트) 보기
요소 => <시작태그>내용</종료태그> a요소 => <a>적고싶은내용이나 이미지<a>

2. 기본적인 요소

요소 내용 사용법
hn요소 제목을 표현함(h1~h6) <h1>제목입니다</h1>
p요소 문단을 표현함 <p>문단입니다</p>
a요소 이동할 페이지 지정(=Link, 링크) <a>링크입니다</a>
button요소 버튼을 만들어 줍니다. <button>버튼입니다</button>

@실습예제.

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 기본요소</title>
</head>
<body>
    <h1>문서의 제목입니다</h1>
    <p>
    문단입니다. 
    제목을 설명하는 문맥이 위치합니다.
    </p>
    <a>클릭하면 네이버 페이지로 이동합니다!</a>
    <!-- 주석 : 이동하려면 속성이 필요합니다. -->
    <button>버튼</button>
</body>
</html>

결과화면

참고.

- HTML은 줄바꿈이나 여러칸의 띄워쓰기가 적용되지 않습니다.

- 오로지 1칸의 띄워쓰기만 자동 적용됩니다.

- 줄바꿈에는을 사용하고 띄워쓰기에는 &nbsp;를 사용합니다.

- 주석은 실행되지 않습니다. 설명글입니다.

 

3. HTML 요소의 속성

1) 모든 요소는 속성을 가질 수 있습니다. 또한 필요한 개수만큼 사용할 수 있습니다.

형식 <시작태그 속성="속성값">내용</종료태그>
<시작태그 속성1="속성값" 속성2="속성값">내용</종료태그>

2) 특정 요소에만 사용할 수 있는 개별 속성이 있고, 모든 요소에 사용할 수 있는 전역 속성이 있습니다.

개별 속성 전역 속성
<a href="URL">클릭하면 네이버로</a>
<button type="button">클릭</button>		 <a id="test1" class="test1" href="#">클릭하면 네이버로</a>
<button id="test2" class="test1" type="button">클릭</button>

 - URL(Uniform Resource Locator, 유니폼 리소스 로케이터)을 경로라고 합니다. 인터넷경로, 로컬경로가 있습니다.
 - 속성은 순서와 무관하며, 개별 속성이라도 다른 요소에서 동일한 이름을 갖는 것들이 있습니다.
 - 주의 사항1 - 전역 속성인 id는 같은 속성값을 사용할 수 없습니다. class는 같은 속성값을 사용할 수 있습니다.
 - 주의 사항2 - 영어와 숫자, 특수기호(-, _)의 조합을 사용합니다. 속성값은 영어로 시작합니다.

 

3) a요소의 속성 적용 => a요소를 사용하여 페이지를 이동할 수 있습니다.

<a href="https://www.naver.com">네이버로 이동</a>

- 화면에서 해당 내용을 클릭하면 페이지가 이동됩니다. 
- 이동할 페이지가 없다면 # (샵, sharp) 기호를 표기합니다. 보기. <a href="#">

 

4) img요소의 속성 적용 => img요소를 사용하여 이미지를 출력할 수 있습니다.

<img src="URL" alt="이미지 대체 문구" width="폭" height="높이">
경로설정방법 부모폴더 동일폴더 자식폴더
../파일명 파일명 폴더명/파일명

- 인터넷경로는 인터넷주소를 기재합니다.

 

4. 요소의 구분

태그 작성방법 결과화면
일반요소 / 빈 요소 블랙레벨요소/ 인라인요소

1) 일반요소 / 빈 요소

구분 형식 보기 내용
일반 요소 <시작태그>내용</종료태그> <a>내용</a> 페이지 이동
빈 요소 <시작태그> <img> 이미지를 출력함

- 빈 요소는 <img>, <br>, <hr> 등이 있습니다.

 

2) 블록레벨 요소 / 인라인 요소

구분 보기 내용
블록레벨 요소 <p>문단입니다.</p> 요소의 실제 영역이 결과화면의 가로1줄을 모두 차지합니다.
그러므로 시작전후로 줄바꿈이 있습니다. 레이아웃에 사용됩니다.
인라인 요소 <a>페이지이동</a> 특정 텍스트나 이미지에 해당하는 영역만 차지하며 주로 텍스트 스타일에 사용됨.

-  블록레벨 요소 : hn, p, ul, li, table, div, header, main ... 등이 있습니다.
- 인라인 요소 : a, img, span, em, strong ... 등이 있습니다.

 

@일반요소 / 빈 요소

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>일반요소 / 빈요소</title>
</head>
<body>
    <meta charset="utf-8">
    <title>일반요소 / 빈요소</title>
    </head>
    <body>
    <h1>일반요소 / 빈요소 구분</h1>
    <em>일반요소</em>
    <br>
    <img src="drinks." alt="음료이미지">
</body>
</html>

결과화면

@블록레벨 요소 / 인라인 요소

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>블록레벨 요소 / 인라인 요소</title>
</head>
<body>
    <h1>블록레벨요소 / 인라인요소</h1>
    확인용 텍스트! 
    <div>블록레벨요소</div>
    확인용 텍스트!
    <br>
    확인용 텍스트!
    <span>인라인요소</span>
    확인용 텍스트!
</body>
</html>

결과화면

 

5. 요소의 중첩

- 요소의 내용에 요소가 사용된 구조를 요소의 중첩이라고 합니다.

- 형식 => <요소1> <요소2> 내용 </요소2> </요소1>

보기1 <p> 은행 계좌 개설시 <b>신분증</b> 필요합니다. </p>
보기2 <a href="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png">
 <img src="" alt="Daum 로고 이미지">
</a>

- 주의 사항 - 인라인요소 내부에는 블록레벨요소를 사용할 수 없습니다.

 

6. 중첩관계의 요소의 호칭

중첩관계 요소

7. 목록 만들기

목록 만들기

@실습예제.

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>블록레벨 요소 / 인라인 요소</title>
</head>
<body>
    <h1>메뉴</h1>
    <h2>한식</h2>
    <ul>
    <li>현미밥</li>
    <li>소고기무국</li>
    <li>밑반찬4종류</li>
    </ul>
    <h2>양식</h2>
    <ul>
    <li>모닝빵</li>
    <li>쨈&버터</li>
    <li>에그스크램블</li>
    <li>커피</li>
    </ul>
</body>
</html>

결과예제

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>블록레벨 요소 / 인라인 요소</title>
</head>
<body>
    <h1>중첩 비순서목록</h1>
    <ul>
    <li>상위메뉴1
    <ul>
    <li>하위메뉴1</li>
    <li>하위메뉴2</li>
    <li>하위메뉴3</li>
    </ul>
    </li>
    <li>상위메뉴2
    <ul>
    <li>하위메뉴1</li>
    <li>하위메뉴2</li>
    <li>하위메뉴3</li>
    </ul>
    </li>
    </ul>
</body>
</html>

결과예제

8. 입력양식 드롭다운메뉴(Dropdown Menu) 만들기 (= 펼침메뉴 만들기)

요소 내용 사용법
select 요소 드롭다운을 만들기 위한 최상위 요소 <select>
   <option>메뉴1</option>
   <option>메뉴2</option>
   <option>메뉴3</option>
</select>
option 요소 하위 메뉴를 만들기 위한 요소

@실습예제.

 

728x90