□ 리스트식으로 내용을 작성시 <ol> 또는 <ul>태그에 <li>태그를 사용함
□ <ol>태그는 1번~2번과 같이 목차를 표시해줌
□ <ul>태그는 ●와 같이 목차를 표시해줌
□ 각 <ol> 또는 <ul>태그에 <li>태그를 사용해줌
□ <img src='파일경로' alt ='이미지를 대체할 텍스트'> 형식으로 이미지를 가져옴
<!--(emmet 단축키) html:5 입력 후 tab 키를 치면 아래와 같은 기본 코드(기본 템플릿)가 자동생성됨-->
<!DOCTYPE html> <!--해당 문서가 HTML을 알리며 부라우저가 랜더링하지 않도록 하는 부분-->
<html lang="en"> <!--언어설정으로 한국어는 'ko'로 설정-->
<head> <!--헤더부분 : 문서를 대표하는 제목태그로 title과 meta 태그를 사용함-->
<!--meta태그 : 문서 전반에 걸친 정보 표시. name으로 description, keywords, author 등을 많이 사용함-->
<meta charset="UTF-8">
<meta name = "description" content= "첫 실습 코드"> <!--검색 키워드-->
<!--<meta name = "keywords" content= "html/css">-->
<!--<meta name = "author" content= "DH.KIM">-->
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <!--인터넷 익스플로러 IE 최신 표준 모드로 랜더링되는 태그. 호환성 이슈로 반드시 기재해야함-->
<!--viewport : 현재 화면에 보여지고 잇는 직사각형 영역으로 웹 브라우저 상에서는 현재 창에서 문서를 볼 수 있는 화면의미-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<!--CSS파일을 적용 및 연동하기위해 link 태그사용. 주로 css파일과 아이콘 파일을 가져오기 위해 사용-->
<link rel = "stylesheet" href = "C:/Publishing/src/test_style.css">
<!--css코드를 html문서에 작성할 때 사용. css 코드는 link로 가져오거나 style태그를 사용해 활용-->
<style>
table, tr, td {
background-color: black;
color:chartreuse;
border: solid;
}
</style>
<title>테스트입니다</title> <!--웹 헤더시트 명-->
</head>
<body> <!--바디부분-->
<!--h1~6까지 갈수록 폰트사이즈가 작아짐-->
<h1>Hello h1</h1>
<h2>Hello h2</h2>
<h3>Hello h3</h3>
<h4>Hello h4</h4>
<h5>Hello h5</h5>
<h6>Hello h6</h6>
<!--p태그 문단의미-->
<p>Hi 1</p>
<p>Hi 2 Hi 3</p>
<p>Hi 4 Hi 5 Hi 6</p>
<!--a태그를 활용해 링크를 검-->
<p>
<a href="https://dandora-90.tistory.com/" target="_self">내 블로그 주소1</a> <!--현재 탭에서 전환-->
</p>
<p>
<a href="https://dandora-90.tistory.com/" target="_blank">내 블로그 주소2</a> <!-- 새로운 탭에서 전환-->
</p>
<!--리스트 : ol / li태그 : 목차(번호)표시 , ul / li태그 : 목차(기호) 표시-->
<ol>
<li>ol+li태그1</li>
<li>ol+li태그2</li>
<li>ol+li태그3</li>
</ol>
<ul>
<li>ul+li태그1</li>
<li>ul+li태그2</li>
<li>ul+li태그3</li>
</ul>
<!--이미지 삽입 img 태그 : 웹접근성을 높이기 위해 alt를 사용. 구글 SEO 문서에서도 alt를 필수 권장함-->
<!--division 약자. html 특정부분을 지정하는 데 사용.-->
<img src = 'C:/Publishing/src/myBlog.png' alt = 'myBlogImg'>
</body>
</html>'HTML&CSS > HTML' 카테고리의 다른 글
| <form>,<input>태그 (0) | 2023.11.07 |
|---|---|
| <div>, <table>태그 (0) | 2023.11.05 |
| <p>태그, <a>태그 (0) | 2023.11.05 |
| <h>~</h>태그 (0) | 2023.11.05 |
