HuSpIn

HTML 요소 본문

HTML/Section_1

HTML 요소

E_Dev 2024. 4. 8. 17:38

HTML의 기본 요소들

HTML은 크게 두 가지 요소로 나눌 수 있다. 

1) 블럭 요소
2) 인라인 요소

먼저 블록 요소의 성질을 가지고 있는 요소들을 알아보자.


[ 단락 요소 ]

<p></p> : 

=> HTML 요소중 p태그는 단락을 나타낸다. 단락은 블럭 수준의 요소이며, 특히 닫는 태그 전에 다른 블럭 수준 요소가 구문 분석되면
자동으로 닫힌다.

 [ 제목 요소 ]

<h1></h1> ~ <h6></h6> :

=> h 태그는 제목을 나타내는 요소이며, h태그 자체를 글자 크기를 조절하는데에 사용하면 안되고, 크기를 변경하는건 CSS에서 변경을
한다.
태그는 한 페이지 당 한 개만 존재해야 한다. 그리고 항상 최상위 제목이어야 한다.

 

[ 목록 요소 ]

<ol></ol> :

=> 순서가 지정된 항목 목록을 나타내는 요소.
일반적으로 번호가 매겨진 목록으로 랜더링이 된다.

출처 : developer.mozilla.org

<li></li> :

=> 목록의 항목을 나타낸다.
순서가 지정된 목록( <ol> ), 순서가 없는 목록( <ul> ) 또는 메뉴 ( ) 등의 상위 요소에 포함되어 있어야 한다.
즉, 자식 요소로써 존재한다.
중첩 목록을 만들고 싶으면 목록 안에 목록을 만들면 된다.

출처 : developer.mozilla.org

<ul></ul> :

=> 순서가 없는 목록 요소.
순서가 지정되지 않은 항목 목록을 나타내며 일반적으로 글머리 기호 목록으로 렌더링된다.

출처 : developer.mozilla.org

 

지금 나오는 HTML 요소들은 인라인 성질을 가지고 있는 요소들이다.

<i> : 
=> 이텔릭체, 오른쪽으로 조금 기울어진 글체를 나타내는 요소
<b> :
=> 볼드체, 굵은 글체를 나타내는 요소

[ 앵커 태그 ]
하이퍼 링크를 만드는데 쓰이는 앵커 요소, 즉 <a> 태그

<a> :

=> href *속성*을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그외 다른 URL로 연결할 수 있는
하이퍼 링크를 만든다.
<a> 안의 컨텐츠는 링크 목적지의 설명을 나타내야 한다.

출처 : developer.mozilla.org

* 참고 : HTML에서 속성이란? 
태그에 부여할 수 있는 작은 정보를 의미한다.

[ 이미지 태그 ]

<img> : 

=> 1. 열고 닫는 태그가 없다. 왜냐하면 텍스트가 따로 없고 url 주소만 있으면 되기 때문이다.
2. 문서에 이미지를 삽입하는 속성.
2-1) src : src 속성은 필수이며, 포함하려는 이미지의 경로를 나타낸다.
2-2) alt : alt 속성은 이미지에 대한 텍스트를 대체하며 이미지가 나오지 않을시 alt 에 작성된 텍스트가 나온다.
마찬가지로 필수이며 접근성에 유용하다.
2-3) width : width 속성은 이미지의 크기를 변경할 때 사용하는 속성이나, HTML 보단 CSS 에서 사용하는게 낫다.

출처 : developer.mozilla.org