프론트 엔드 1일차 HTML(글자 꾸미기 태그)
2024. 1. 10. 09:44ㆍ프론트엔드
인터넷
- 전 세계의 컴퓨터들이 네트워크를 통해 연결되어 정보를 공유하는데 목적을 두며 프로토콜을 이용하여 통신
- 초기에는 군사용과 민간용으로 구분되었고 민간용이 지금의 인터넷이 됨
웹(WEB)
- 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간 인터넷의 통신망 위에서 작동하는 서비스
웹 표준
모든 브라우저에서 웹 서비스가 정상적으로 보여질 수 있도록 하는 것
- 각기 다르게 보여지면 사용자만 피해봄
- 표준안으로 HTML5를 웹 표준으로 권고
- MS는 잘 안 따르는 반면 타사는 적극적으로 받아들임
- MS 신 버전은 웹 표준 받아들임
HTML5 구성요소
<p align = 'center'> HTML/CSS </p> : <시작태그 속성 = 속성값> 내부문자 <종료태그>
주의사항
- 태그는 대 · 소문자를 구분하지 않으나 소문자를 권장함
- 시작태그로 시작하면 반드시 종료태그로 종료 - 파일 확장자는 반드시 html 또는 htm으로 설정
- 문자의 공백은 몇 개를 입력하든 한 개만 인식하므로
공백을 추가하기 위해서 특수기호 를 이용해야 함
기본 구조
<!DOCTYPE html> -> 문서 우형
<html lang="en">
<head>
문서의 각종 정보와 문서 자체에 대한 설명 내용
<title>, <meta>, <link>, <style>, <script> 등 사용
</head>
<body>
화면에 출력해서 보여주는 모든 정보/내용
head에 들어가는 태그를 제외하고 모든 태그 사용
</body>
</html>
html 주석
<!-- -->
<!-- HTML에서 사용하는 주석 코드 작성내용에 대해 설명하는 곳에 사용 브라우저는 주석 부분을 해석하지 않고 넘어감 -->
글자 꾸미기 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 관련 태그</title>
</head>
<body>
<!-- h태그
- 제목 태그
- 숫자가 작을수록 큰 글자
- 단순히 글자를 크게 하기 위해서 사용하지 않는것이 좋다.
- 뉴스의 제목, 쇼핑의 상품명 등에서 사용하기 적합하다.
-->
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<!--
br태그
- 엔터 효과
- html에서는 연속된 공백(스페이스, 탭, 엔터 등)이 있어도 스페이스 하나로 적용
- 이 떄, 엔터 효과를 주기 위해 br태그를 이용
- 스페이스 효과
-->
안녕하세요
<br>
홍길동입니다.
<br>
안녕하세요
<br><br>
홍길동입니다.
<!--
hr 태그
- 가로 회색 밑줄을 긋는 태그
-->
<hr>
<!-- mark태그
- 노란 형광색 배경
b 태그
- 굵은 글씨
- 내용을 강조
-->
<mark>안녕하세요.</mark> 제<b>이름</b>은 <strong>홍길동입니다.</strong>
<br>
<!-- small태그
- 작은 글씨
em 태그
- 기울임
- 약하게 강조
i 태그
- 기울임
- 아이콘 사용시 활용
u 태그
- 밑줄
s 태그
- 취소선. 글자 중간에 선을 그음
-->
<u>안녕하세요</u> <small>제</small> <em>이름</em>은 <i>홍길동</i>입니다.
<br>
<s>오랜만에</s> <u>만나서 반갑습니다.</u>
<br>
<!--
blockquote 태그
- 인용 태그
- 여백을 주어서 표시
q 태그
- 인용 태그
- ""로 표시
sup태그
- 위 첨자 태그
sub태그
- 아래 첨자 태그
-->
<blockquote>인용문구</blockquote>
<br>
2 <sup>2</sup>
<br>
log 10<sub>10</sub>
<br>
<!--
abbr 태그
- 약어를 풀어쓸 때 사용하는 태그
- 약어에 마우스를 호버하면 풀어쓴 내용이 보임
kbd 태그
- 키보드의 키를 표현할때 사용
cite 태그
- 사이트를 나타낼때
- 기울어짐
code 태그
- 코드를 화면에 보여주는 태그
- pre태그와 함께 사용
pre태그
- 태그 사이에 있는 내용을 그대로 화면에 출력. 엔터도 각각
-->
<abbr title="Hyper Text Markup Language">HTML</abbr>
<br>
<kbd>Ctlr + A</kbd>
<br>
<cite>Naver</cite>는 검색 사이트이다. <br>
<code>
<pre>
System.out.println("Hello World");
</pre>
</code>
</body>
</html>'프론트엔드' 카테고리의 다른 글
| 프론트엔드 2일차 CSS(텍스트 관련 속성, 텍스트 그림자, 공백 처리 속성, 글자 간격 속성) (0) | 2024.01.15 |
|---|---|
| 프론트엔드 1일차 HTML(폼 관련 태그) (2) | 2024.01.10 |
| 프론트엔드 1일차 HTML(멀티 미디어 관련 태그, 하이퍼 링크 태그) (0) | 2024.01.10 |
| 프론트 엔드 1일차 HTML(표 관련 태그, 영역 관리 태그) (0) | 2024.01.10 |
| 프론트 엔드 1일차 HTML(글자 관련 태그, 목록 태그) (0) | 2024.01.10 |