[JSP] HTML 각 태그 설명 및 실제 사용법(mark,span,div,ul,ol,dl) part3

12. <mark> 태그 - 해당 태그로 묶인 부분은 형광펜으로 강조된것처럼 노란색으로 표현

사용법

특정부분은 <mark>강조하도록 노란색으로</mark> 표현해볼겠습니다.

적용

특정부분은 강조하도록 노란색으로 표현해볼겠습니다.

13. <span> <div> 태그 - 해당 태그는 추후 웹개발을 하시게 된다면 가장 많이 사용

두 태그의 차이점을 말씀드리면 css적으로 드러납니다. 

div 같은 경우 display:block;

span 같은 경우 display:inline;

display 속성에서 두 요소가 태그의 속성입니다.

사용법

<div>div태그 1111</div>

<div>div태그 2222</div>

<hr />

<span> span태그 1111</span>

<span> span태그 2222</span>

적용

div태그 1111

div태그 2222

---

span태그 1111 span태그 2222

적용된 예를 보시면 두 태그의 특성이 이해가 가시나요?

이 부분은 중요한 부분이라 웹개발을 지망하시는 부분이라면 

숙지하고 가시는것도 좋다고 생각합니다.

14. <ul><li> 태그  - 순서없는 목록을 만들때 사용됨

사용법

<ul>

<li>ul 태그 메뉴1입니다.</li>

<li>ul 태그 메뉴2입니다.</li>

<li>ul 태그 메뉴3입니다.</li>

</ul>

적용

• ul 태그 메뉴1입니다.
• ul 태그 메뉴2입니다.
• ul 태그 메뉴3입니다.

15. <ol><li> 태그 - 순서가 있는목록을 만들때 사용됨.

사용법

<ol>

<li>ol 태그 메뉴1입니다.</li>

<li>ol 태그 메뉴2입니다.</li>

<li>ol 태그 메뉴3입니다.</li>

</ol>

적용

1. ol 태그 메뉴1입니다.
2. ol 태그 메뉴2입니다.
3. ol 태그 메뉴3입니다.

16. <dl><dt><dd> 태그 - 제목과 설명을 필요로 할때 사용되는 태그

(하나의 dt에서는 여러개의 dd를 가질 수 있습니다.)

사용법

<dl>

<dt>dt 태그 제목입니다.</dt>

<dd>dt태그 첫번재 설명입니다.</dd>

<dd>dt태그 두번재 설명입니다.</dd>

<dd>dt태그 세번재 설명입니다.</dd>

</dl>

적용

dt 태그 제목입니다.

dt태그 첫번재 설명입니다.

dt태그 두번재 설명입니다.

dt태그 세번재 설명입니다.

지난 포스트가 궁금하시다면 

↓↓↓ 아래 링크를 클릭해주세요. ↓↓↓↓

[JSP] HTML 각 태그 설명 및 실제 사용법 part2

다음 포스트가 궁금하시다면 

↓↓↓ 아래 링크를 클릭해주세요. ↓↓↓↓

'공감'버튼 및 '좋아요'는 글쓴이에게 큰 힘이 됩니다!