반응형
HTML 구성
<!-- html버전을 웹브라우저에 알리는 역할, 가장 먼저 선언해야함 -->
<!DOCTYPE html>
<!-- 웹 접근성 속성으로 스크린리더기가 번역할 언어를 지정함 -->
<html lang="ko">
<head>
<!-- meta : 브라우저와 검색엔진로봇에게 메타정보를 제공하는 태그 -->
<!-- charset : 문서의 언어 인코딩 지정, 누락시 한글이 깨짐 -->
<meta charset="UTF-8">
<title>제목</title>
<!-- internal style sheet, 내부스타일정의 / header 영역에만 작성할 것 -->
<style>
p{
color: red;
}
</style>
</head>
<!-- 사용자에게 보여질 내용을 작성하는 영역 -->
<body>
<!-- javascript를 작성하는 영역태그/html영역안에서 자유롭게 여러개 작성가능 -->
<script>
alert("경고창");
</script>
<p>메인 페이지</p>
<script>
console.log("브라우저 우클릭> 검사(개발자모드)에서 디버깅에 많이 사용");
</script>
<!-- javascript작성 영역 중 가장 일반적으로 body 종료태그 위에 많이 작성함 -->
</body>
</html>
list
ul, ol, dl을 통해 리스트를 표현할 수 있다.
- ul 태그
: li 태그들이 모여 있는 리스트, 순서가 없는 특징을 가지고 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제목</title>
<style>
ul{
color: red;
}
</style>
</head>
<body>
<ul style="list-style: square;">
<li>순서없는 리스트 1</li>
<li>순서없는 리스트 2</li>
<li>순서없는 리스트 3</li>
</ul>
</body>
</html>
- ol 태그
: li 태그들이 모여 있는 리스트, 순서가 있는 특징을 가지고 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제목</title>
</head>
<body>
<ol style="list-style-type: hangul;">
<li>순서있는 리스트 1</li>
<li>순서있는 리스트 2</li>
<li>순서있는 리스트 3</li>
</ol>
</body>
</html>
- dl 태그
: dt 태그와 dl 태그들이 모여 있는 리스트, 순서가 없는 특징을 가지고 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제목</title>
</head>
<body>
<dl>
<dt>리스트제목1</dt>
<dd>리스트제목1</dd>
</dl>
</body>
</html>
반응형
'HTML | CSS | Javascript' 카테고리의 다른 글
| [HTML|CSS] 2장 기본 태그 (0) | 2024.02.08 |
|---|---|
| [HTML|CSS] 1장 하이퍼링크 (0) | 2024.02.08 |
| [HTML/CSS/Script] 12장 함수 (0) | 2024.02.01 |
| [HTML/CSS] 10.5장 Test (0) | 2024.01.29 |
| [HTML/CSS/Script] 9장 Script (0) | 2024.01.26 |