[프론트엔드 입문] 2-2 HTML 기본 태그 1

1. HTML tags

[1] HTML Text Tags Heading

: 제목을 표현할 때 사용한다.

1) 특징

• h1 ~ h6까지 존재한다.
• 숫자가 커질수록 작아진다.

2) 예시

[2] HTML Paragraphs

: 새로운 문단을 시작한다.

1) 특징

• 시작과 끝을 표시하는 태그가 필요하다.
• 글자들이 줄바꿈이 되어 있어도 <p> tag가 없으면 웹 페이지에는 한 줄로 출력된다.

2) 예시

[3] HTML Links

: 링크를 걸 때 사용한다.
: <a> ~ </a> tag

1) 특징

• <a> 내에 'href' 라는 이름의 속성(attribute)에 연결하려는 html 문서나 url을 기술한다.

2) 예시

3) 속성

• title : 연결 문서(링크)에 대한 설명
• href : 참조 문서 경로 지정 (고유 속성)
• target : 문서를 열기 위한 창을 설정

4) 속성 값

• _self : 자기 자신 (기본)
• _blank, _new : 새 창
• _parent : 부모(상웨레벨) 창
• _top : 전체 브라우저 tab에서 가장 상위

5) 예시

[4] HTML Images

: 그림이나 사진을 출력

1) 특징

• <img> 태그로 닫는 태그는 사용하지 않는다.
• Attributes
  • src : 그림 파일 이름을 지정
  • alt : 그림 파일이 제대로 출력하지 않는 경우, 나타날 텍스트
  • width : 출력하는 그림의 넓이
  • height : 출력하는 그림의 높이

2) 예시

[5] HTML Text

: 내용에 쓰는 텍스트의 크기, 색상, 폰트 등을 지정

1) 특징

• HTML5에서는 지원을 하지 않는 tag
• Attributes
  • size : 글자의 크기 지정, 사용 가능한 값은 1~7, 숫자가 커지면 글자가 커진다
  • color : 영어로 색상 이름, RGB code
  • face : 폰트 이름 (ex. arial, arial narrow, times new roman)

2) 예시

[6] RGB(red green blue), HEX value

1) 특징

• 각각 00~ff까지 값을 사용

2) 예시

3) 컬러 선택판에서 색상 값 확인 가능한 사이트

: [htmlcolorcodes 사이트](https://htmlcolorcodes.com

[7] HTML line break

1) <br>

: 줄 바꿈을 사용하는 데 사용되는 태그

2) 예시

[8] HTML Styles

: CSS (Cascading Style Sheet) property를 활용하여 html tag의 기능을 확장

1) 예시