1. HTML 텍스트 표시
[1]. HTML을 사용하는 주요 목적은 텍스트에 의미를 부여하여 화면의 어느 위치에 노출할 것인가를 분명하게 하는 것이다.
각각의 요소를 통해 구조화 되지 않은 텍스트들은 모두 연결되어 하나의 긴 줄로 표시된다.
2. List.html 코드
<!-- html버전을 웹브라우저에 알리는 역활, 가장 먼저 선언해야 함 -->
<!DOCTYPE html>
<!-- 웝 접근성 속성으로 스크린리더기가 번역할 언어를 지정함 -->
<html lang="ko">
<head>
<!-- meta : 브라우저와 검색엔지로봇에게 메타정보를 제공하는 태그 -->
<!-- charset : 문서의 언어 인코딩 지정 , 누락시 한글이 꺠짐 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- internal style sheet, 내부 스타일정의 /header영역에만 작성할 것 -->
<style>
ul{
color : violet;
}
</style>
</head>
<!-- 사용자에게 보여질 내용을 작성하는 영역 -->
<body>
<!-- javaScript를 작성하는 영역태그 / html영역안에서 자유롭게 여러개 작성가능 -->
<script>
alert("경고장");
</script>
<ul style="list-style-type: decimal">
<li>순서없는리스트1</li>
<li>순서없는리스트2</li>
<li>순서없는리스트3</li>
</ul>
<ol style="list-style-type: hangul;">
<li>순서없는리스트1</li>
<li>순서없는리스트2</li>
<li>순서없는리스트3</li>
</ol>
<dl>
<dt>리스트 제목1</dt>
<dd>리스트 설명1</dd>
</dl>
<script>
console.log("브라우저 우클릭 > 검사(개발자모드)에서 디버깅에 많이 사용");
</script>
<!-- javaScript작성 영역 중 가장 일반적으로 body종료태그 위에 많이 작성함 -->
</body>
</html>결과값
3.기본태그.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color : rgb(149, 31, 149);
}
</style>
</head>
<body>
<!-- heading -->
<h1>개발자가 알아야 할 기본 태그 </h1>
<h6>가장 작은 크기의 제목 태그 </h6>
<h7>존재하지 않는 태그는 부라우저가 마음대로 해석</h7>
<!-- line break -->
<br>
<!-- heml특수문자 표현 : 꺽쇠는 태그로 인식되무로 특수문자표현식으로 문자 그대로 처리 -->
<br>이라는 태그는 줄넘김처리를 해줌
<!-- paragraph : 문단을 나타내는 태그 , 자동으로 줄이 바뀌며 줄사이 여백이 생김 -->
<p>문단</p>
<!-- preformatted: 미리 정의된 형식 , 여백과 줄바꿈도 -->
<pre>
여기는 내가 작 성하는
그대로 출 력됨
</pre>
<!-- horizontal: 수평선 생성 -->
<hr>
</body>
</html>결과값
4.하이퍼링크.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 클래스는. 아이디는 #으로 이용 */
.box{
border-style: solid;
height: 1000px;
}
</style>
</head>
<body>
<!-- target 기본값 _self , 생략가능 -->
<a href="//naver.com" target ="_blank">네이버로 이동</a>
<ol>
<li><a href="#d1">영역1로 가기 </a> </li>
<li><a href="#d2">영역2로 가기 </a></li>
<li><a href="#d3">영역3로 가기 </a></li>
<li><a href="#d4">영역4로 가기 </a></li>
</ol>
<!-- class는 공통사용가능 . id는 유일해야함 -->
<div class = "box" id = "d1">영역1</div>
<div class = "box" id = "d2">영역2</div>
<div class = "box" id = "d3">영역3</div>
<div class = "box" id = "d4">영역4</div>
</body>
</html>
<html>결과값
'HTML 웹프로그래밍 기초' 카테고리의 다른 글
| 24-01-19 HTML 프로그램 첫 교육 내용 (0) | 2024.01.19 |
|---|
