중급과정/HTML5 CSS
[HTML/CSS] 231121_1일차
whalerice
2023. 11. 22. 09:01
· <br> : 단일 줄 바꿈을 정의(line break)
· <p> : 단락(Paragraphs)을 정의
- 단락의 전후에 빈 줄이 추가된다.
· <pre> : 미리 서식이 지정된 텍스트를 정의
- previously formatted text의 약자
· <h1>~<h6> : 제목을 정의 (heading) 1~6으로 갈수록 글씨크기가 작아짐.
- 웹 페이지의 머리기사(headline)
| <b>…</b> | 굵은 텍스트(볼드 체)를 정의 |
| <i>…</i> | 기울어진 텍스트(이탤릭 체)를 정의 |
| <strong>…</strong> | 볼드 체로 표시하고, 음성 읽기 도구에서 볼륨이나 톤 등을 변경해 강조해서 읽어 줌. (웹 접근성에 기여) |
| <em>…</em> | 이탤릭 체로 표시하고, 음성 읽기 도구에서 볼륨이나 톤 등을 변경해 강조해서 읽어 줌. (웹 접근성에 기여) |
| <mark>…</mark> | 강조할 텍스트에 하이라이트(배경 색상)를 표시하여 정의 |
| <code>…</code> | 컴퓨터 코드로 표기 시 정의 (현재 사용중지) |
| <sup>…</sup> | 위 첨자(superscript) |
| <sub>…</sub> | 아래첨자(subscript) |
· 참고사항
1) HTML5 스펙에 따르면 <b>와 <i> 태그는 다른 모든 태그가 적절하지 않는 경우에만 사용되어야 함
2) 강조해야 하는 텍스트는 <em>을 사용하는 편이 좋음
3) 중요한 텍스트는 <strong> 태그를 사용
4) 하이라이트 된 텍스트는 <mark> 태그를 사용
5) 모든 텍스트 스타일은 CSS를 이용하는 것이 원칙
6) 볼드 텍스트를 만들려면 CSS의 font-weight 속성을 사용
| 화면에 표시되는 모양 | HTML입력 기호 | 화면에 표시되는 모양 | HTML 입력 기호 |
| 공백 | | & | & |
| < | < | ( | ( |
| > | > | ) | ) |
| " | " | - | - |
| ´ | ´ | \ | \ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- heading -->
<h1>개발자가 알아야 할 기본 태그</h1>
<!-- horizontal -->
<hr>
<!-- line break -->
<!-- html특수문자 표현: 꺽쇠는 태그로 인식하므로 문자처리를 위해 사용 -->
<br>태그를 사용하여 <br> 줄 넘김 처리를 합시다
<!-- 지정된 서식대로 보여짐/block레벨 요소 -->
<pre>
작성한 그대로 보여져요
줄넘겨서 다시 써 봄
</pre>
<!-- <code>태그는 사용중지 상태 -->
<!-- paragraph, 앞 뒤에 라인 추가 -->
<p>
이것은 문단 <br>
앞 뒤 라인 추가
</p>
<!-- unordered list -->
<ul style="list-style: korean-hangul-formal;"> <!-- default: disc, square, circle -->
<li>순서없는 리스트1</li>
<li>순서없는 리스트1</li>
<li>순서없는 리스트1</li>
<li>순서없는 리스트1</li>
</ul>
<!-- ordered list -->
<ol style="list-style: disc;">
<li>순서있는 리스트11</li>
<li>순서있는 리스트11</li>
<li>순서있는 리스트11</li>
<li>순서있는 리스트11</li>
</ol>
<!-- definition list -->
<dl>
<!-- definition term -->
<dt>정의리스트 제목</dt>
<!-- definition description -->
<dd>정의리스트 내용1</dd>
<dt>정의리스트 제목2</dt>
<dd>정의리스트 내용2</dd>
<dt>정의리스트 제목3</dt>
<dd>정의리스트 내용3</dd>
<dt>정의리스트 제목4</dt>
<dd>정의리스트 내용4</dd>
</dl>
</body>
</html>
<!-- html태그 정의전 가장 먼저 선언해야 하는 html버전을 브라우저에 알리는 역할 -->
<!DOCTYPE html>
<!-- html문서 시작 태그 /웹 접근성과 관련된 속성으로 스크린리더기를 통해 번역될 언어 설정 -->
<html lang="ko">
<head>
<!-- meta: 브라우저와 검색엔진 로봇에게 메타정보를 제공하는 태그 -->
<!-- charset: 문서의 언어 인코딩 지정. 이 부분이 없으면 한글 깨짐 -->
<meta charset="UTF-8">
<!-- 접근 기기별 화면 배율을 100%로 맞춰 보여주는 반응형 속성 지정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서의 제목</title>
<!-- CSS internal style sheet: 내부스타일 정의, head영역에만 작성해야 함 -->
<style>
h2 {
color: lightblue;
background-color: navy;
}
</style>
<script>
alert("메롱33");
</script>
</head>
<body>
<script>
alert("메롱22");
</script>
<!-- inline style sheet형식: 요소(tag)내부에 스타일 작성/미권장 -->
<h1 style="color:gold;">h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<!-- 정의되지 않은 태그는 브라우저 마음대로 해석하며 오류발생 원인도 제공하지 않음 -->
<h7>h7는 정의되지 않은 태그</h7>
<script>
alert("보통 많이 사용되는 위치");
</script>
</body>
<!-- script태그는 문서 안에 몇번이든 정의 가능/ 보통 body 종료태그 위에 사용됨 -->
<script>
alert("메롱55");
</script>
</html>