HTML 샘플 / 텍스트 태그 / 목록 태그 (li, ul, ol)

HTML - 내용 : 웹브라우저를 통해서 사용자에게 보이는 웹 문서를 작성

CSS - 디자인 : 기존 HTML파일에 다양한 모양을 추가,변경하여 디자인을 표현

Java Script - 기능 / 동적 제어 : 웹 문서에 움직임을 넣는 언어

HTML 샘플

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>		해당 문서는 html 문서라고 알려주는 부분
<html lang="ko">		lang : 언어코드 (en: 영어, ko: 한글) / 생략가능
<head>	주로 브라우저의 정보를 입력하는 곳
	<meta>	메타 데이터 입력, 주로 <meta charset="UTF-8">처럼 입력
	<title>	문서 제목 (탭에 뜨는 이름)
<body>	실제 화면에 출력되는 부분 (본문)

타이포그래피

제목 태그 (heading) h1~h6	<h1> 제목 내용 </h1> h1이 메인제목이기 때문에 페이지당 1번 사용하도록 한다.
문단 태그 (paragraph)	<p> 문단 내용 </p>
폰트 두껍게 하는 태그 (bold, strong)	<b> 내용 </b> / <strong> 내용 </strong>
기울임꼴(이태릭체) 태그 (italic, emphasis)	<i> 내용 </i> / <em> 내용 </em>
밑줄 태그 (under line)	<u> 내용 </u>
줄바꿈 태그 (break)	<br>
띄어쓰기 (non-breaking space)
카피라이터 (copywriter)	©

문단 태그

<br> : 개행(줄바꿈) : 시작 태그, 끝 태그가 없어서 <br> 또는 <br/>로 사용할 수 있다.

<p> : 문단을 나눌때 사용된다. 문단을 정렬할 때 자주 사용된다.

- 속성 align : 문단 정렬 속성 - left, right, center

<hr> : 문단과 문단을 나눌 때 수평선을 그려준다.

- 속성

width : 수평선의 길이(px이나 %)을 정한다.

align : 정렬방식(left, right, center)를 정한다.

color : 수평선의 색상값을 정한다.

size : 수평선의 굵기(px)를 정한다.

목록 (list) : <li> 태그 이용한다.

<ol> </ol>	순서가 있는 목록 (ordered list)
<ul> </ul>	순서가 없는 목록 (unordered list)

<ol>
  <li>1번 목록</li>
  <li>2번 목록</li>
</ol>

<ul>
   <li>첫번째</li>
   <li>두번째</li>
</ul>

위의 태그는 이렇게 구현된다.

<ol>	순서가 있는 목록 (ordered list)
	type=	"1"	숫자(기본값) 1, 2, 3, 4....
		"a"	영문 소문자 a, b, c, d.....
		"A"	영문 대문자 A, B, C, D....
		"I"	로마 숫자 대문자 (I, II ...)
		"i"	로마 숫자 소문자 (i, ii ...)
	start="5"	5부터 시작
<ul>	순서가 없는 목록 (unordered list)

 <ol start = "5" type="I">
        <li> 순번이 있는 목록 태그 항목 1 </li>
        <li> 순번이 있는 목록 태그 항목 2 </li>
        <li> 순번이 있는 목록 태그 항목 3 </li>
        <li> 순번이 있는 목록 태그 항목 4 </li>
        <li> 순번이 있는 목록 태그 항목 5 </li>

type = "I"로 로마자 순서가 표시되었다.

  <ul>
        <li>목록 태그 항목</li>
    <ul>
        <li>서브항목</li>
        <li>서브항목</li>
        <li>서브항목</li>
    </ul>
        <li>목록 태그 항목</li>
        <li>목록 태그 항목</li>
        <li>목록 태그 항목</li>
        <li>목록 태그 항목</li>
      </ul>

목록태그 안에 목록태그를 넣으면 서브 목록을 만들 수 있다.

서브항목안에 또 다시 목록 태그를 넣으면 서브의 서브목록을 만들 수 있다.

   <ol>
        <li>목록 태그 항목</li>
    <ol>
        <li>서브항목</li>
        <li>서브항목</li>
        <li>서브항목</li>
        <ol>
            <li>서브항목</li>
            <ol><li>서브-서브</li></ol>
        </ol>
        </ol>
      </ol>

ol으로 목록을 만들었다.

목록태그는 CSS에서 margin, padding 여백이 없으면 보이지 않는다.

'WEB > HTML' 카테고리의 다른 글

HTML input 태그 : form / input / label / select / textarea (1)	2022.05.27
HTML 표(Table) 만들기 - table, tr, th, td 태그 (1)	2022.05.26
하이퍼링크로 북마크 연결하기 (2)	2022.05.25
하이퍼링크 태그 a / 속성 href, target, title, download (1)	2022.05.25
절대경로, 상대경로 / 이미지, 비디오, 오디오 삽입 태그 (0)	2022.05.25

Develop Me