[HTML] HTML 기초

Front-End/HTML, CSS

[HTML] HTML 기초

유자맛바나나 2021. 10. 11. 03:36

정의

하이퍼 텍스트 마크업 언어(Hyper Text Markup Language, HTML)는 웹 페이지를 위한 지배적인 마크업 언어다. HTML은 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다. HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 자바스크립트와 본문과 그 밖의 항목의 외관과 배치를 정의하는 CSS 같은 스크립트를 포함하거나 불러올 수 있다.

*출처: 위키피디아

*마크업 언어: 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 마크업 언어라 한다. (위키피디아)

태그와 속성

HTML에는 다양한 태그가 있다. 하지만 몇몇 태그는 CSS Styling을 통해 거의 일치하게 만들 수 있는데, 그럼에도 태그는 목적에 맞게 잘 사용하는 것이 중요하다. 이는 각 태그 자체가 분명한 '목적과 의미'를 갖고 있기 때문인데, 여러 사람이 HTML 문서를 읽거나 검색 엔진이 분석할 때나 각 태그를 보고 어떤 내용인지 파악할 수 있기 때문이다.

1. <!DOCTYPE html>

html의 버전을 의미하며 <!DOCTYPE html> 만 작성되어 있을 경우 최신 버전인 HTML5 문서임을 의미한다

2. <html>

html 문서의 시작을 알리는 태그다.

속성

lang: html의 문서에 주력으로 사용될 언어를 나타낸다. 예) <html lang="ko">

3. <head>

html 문서의 정보를 작성하는 영역이다. 주로 문서의 속성을 정해주는 <meta>태그와 웹 브라우저의 탭 이름을 정해주는 <title>태그를 사용한다. head 태그에서 title을 제외한 어떠한 태그도 웹브라우저에 노출되지 않는다.

3.1. <meta>

문서의 속성을 정해주는 태그이며, meta 태그를 이용해 charset과 viewport 정보를 기본적으로 명시한다.

charset: encoding 정보를 입력한다
예) <meta charset="UTF-8">
viewport: viewport는 컴퓨터 기기에서 보이는 창을 의미한다. content 속성의 속성값으로 width=device-width를 사용하면 창의 가로길이는 사용하는 device의 가로 길이로 지정한다는 뜻이다.
예) <meta name="viewport" content="width=device-width, initial-scale=1.0">

3.2. <title>

웹 브라우저의 탭 이름을 정해주는 태그다. 컨텐츠 부분에 작성된 내용이 이름이 된다.

예) <title>React</title>

4. <body>

사용자에게 보여지는 웹 브라우저에 표시되는 영역

4.1. <h(n)>: h1, h2, ... , h6

콘텐츠의 대제목, 중제목, 소제목과 같은 곳에 사용되기 때문에 헤딩태그라고도 불림. 숫자가 작을수록 중요한 의미를 가지므로 폰트 크기가 커짐.

h(n) 태그는 검색엔진에서 중요한 의미를 가진다. 따라서 검색엔진에 잘 노출되기 위해 다음 두 가지를 주의해서 작성하는 것이 좋다.

<h1> 태그는 한번만 사용한다
검색엔진은 해당 문서에 사용된 컨텐츠가 어떤 것인지 파악하기 위해 h(n) 태그를 사용하게 되는데, 이 때 가장 중요한 <h1> 태그가 여러개 사용된다면 하나의 문서에서 한 번만 사용하는 것이 좋다
가급적 h1부터 h6까지 순차적으로 사용한다
검색엔진은 <h1>부터 <h6>까지 순차적으로 검색한다. 이 과정에서 <h1> 이후 <h2>를 찾는데 <h2>가 없으면 해당 문서에는 <h1> 태그까지만 있다고 인식할 수 있다. 마찬가지로 <h1> 없이 <h2> 부터 작성하면 해당 문서에는 아예 <h(n)> 태그가 없다고 인식할 수 있다.

4. <p>

<p> 태그는 paragraph(단락)의 앞 글자를 딴 것이며 말 그대로 한 단락의 역할을 한다고 보면 된다. <p> 태그는 다음과 같은 특징을 갖는다

웹 브라우저의 가로 한 줄을 전부 사용
따라서 웹 브라우저의 가로 크기를 조절하면 자동으로 사이즈에 맞춰 줄바꿈을 해준다
Whitspace(공백)은 항상 한 칸으로 인식한다
아래 예시에서 example2 처럼 공백을 여러개 입력해도 <p> 태그는 하나의 공백으로 인식한다. 그리고 줄바꿈(엔터)를 입력해도 마찬가지로 웹브라우저에서는 인식하지 않는다(줄바꿈을 하려면 <br>을 사용한다). 강제로 공백을 입력하는 방법은 HTML의 Entity 코드인 &bnsp;를 입력하면 된다(JSX 문법에서는 안되니 확인 후 수정 필요)

5.<br>

<br> 태그는 Line Break를 뜻하며 줄 바꿈 역할을 한다. JSX에 작성할 때는 슬래쉬를 넣어 <br/>로 작성해야 인식한다.

6.<a>

anchor(닻)의 첫 글자를 딴 태그로 웹 페이지에서 링크를 연결할 때 사용하는 태그로 자주 사용되는 태그다. 사용할 수 있는 링크는 내부링크, 외부링크 두 종류가 있다.

6.1. 내부링크

내부링크는 현재 페이지 내의 특정 위치로 이동하는 링크를 말한다. href 속성을 사용하며, 주로 페이지 내 목차에 사용된다.

href="#id" : 문서 내 태그 중 일치하는 id를 찾아 이동한다

6.2. 외부링크

외부링크는 구글, 네이버 등 다른 웹 페이지로 이동하는 링크를 말한다. 마찬가지로 href 속성을 사용하며, '새 탭에서 보기' 기능을 사용하고 싶으면 target 속성을 이용한다

href="이동할 웹페이지 주소" : 이동할 웹페이지 주소를 작성한다
예: <a href="https://www.naver.com/">네이버로 이동</a>
target="_blank" : 새 탭에서 보기 기능
예: <a href="https://www.naver.com/" target="_blank">네이버로 이동</a>

7. <button>

버튼 태그 설명 넣기

[참고] <button> vs <a>

<button>과 <a>를 이용해 똑같이 특정 URL로 이동할 수 있다. 이러한 이유로 <button>과 <a> 태그를 각각 어떤 경우에 사용해야할지 헷갈리 수 있다. 아래와 같이 사용하는 것이 각 태그의 목적에 따른 올바른 사용법이다.

<button>: 특정한 액션을 할 때
예) 구독, 좋아요, 알림 버튼 등
<a>: 어디론가(URL) 이동할 때(링크)
예) 현재 웹 페이지 내 특정 위치 이동, 타 웹사이트(다음, 네이버 등)로 이동

9. 텍스트 태그

8.1. <strong> 과 <b>

1) <strong>

Bold 처리하여 중요한 내용임을 알릴 때 사용하는 태그다. 즉, <strong> 태그가 사용되는 곳은 해당 내용이 반드시 사용자에게 전달되어야 함을 의미한다. CSS를 이용해 Bold 처리할 수 있지만, 서두에서 말했듯이 <strong> 태그를 사용함으로써 다른 사람, HTML 해석 프로그램 등에게 중요한 부분이라는 의미를 전달할 수 있다.

2) <b>

<b> 태그는 bold의 첫 글자를 사용한 태그로 <strong> 태그와 마찬가지로 Bold 처리를 해준다. 하지만 시각적으로 Bold 처리만 해줄 뿐 <strong> 처럼 HTML 문법적으로 중요한 내용임을 알리는 것은 아니다.

8.2. <em> 과 <i>

1) <em>

emphasis(강조)의 약자로 이탤릭 처리하여 강조할 문자열임을 알릴 때 사용하는 태그다. 자동 음성 변환 프로그램은 <em> 태그가 나왔을 때 더 강조하는 어조로 변환시켜준다. <em> 태그와 <strong> 태그를 혼용해서 사용할 수 있으며, 현업에서도 혼용해서 많이 사용한다.

2) <i>

<i> 태그는 Itallic(이탤릭)의 첫 글자를 사용한 태그로 <em> 태그와 마찬가지로 이탤릭 처리를 해준다. 하지만 <strong>과 <b> 태그의 관계처럼 <i> 태그는 시각적으로만 이탤릭 처리를 할 뿐 HTML 문법적으로 강조하는 내용임을 알리는 것은 아니다.

9. 목록 태그

목록 태그는 비순서형 목록 태그 <ul>, 순서형 목록 태그 <ol>와 개별 아이템으로 들어갈 <li> 태그가 있고, 정의형 목록 태그 <dl> 세 가지로 나눠져 있으며, <ul>과 <ol> 태그에 와 <dl>

9.1. <ul> 과 <ol>

[개별 아이템 태그] <li>

<ul>, <ol> 태그 내부에서 사용되며 개별 아이템을 나타낸다. <ul> 목록 태그의 예제에서 쉽게 이해할 수 있다.

1) <ul>

unordered list 의 약어로 비순서형 목록을 보여줄 때 사용하는 태그다.

예시)

2) <ol>

ordered list 의 약어로 순서형 목록을 보여줄 때 사용하는 태그다.

type="order type" (사용할 수 있는 order type: 1, A, a, I, i)
order type이란 order 의 기호(type)를 (1,2,3,...) 으로 할 것인지 (A, B, C, ...) 할 것인지를 설정하는 속성이다. CSS를 통해 기호 자체를 제거할 수 있다.

9.2. <dl>

definition list의 약어로 정의형 목록 태그다. 메뉴판 목록과 같이 [타이틀 - 설명(내용)], [타이틀 - 설명(내용)]이 반복되는 목록에 적합하다.

[개별 아이템 태그] <dt>와 <dd>

<dt>: definition title의 약어로 해당 아이템의 타이틀을 적어준다
<dd>: definition data의 약어로 해당 아이템의 내용(data)을 적어준다. <dd> 태그는 자동으로 들여쓰기가 된다.

예시)

8.<img>

이미지를 삽입할 때 사용하는 태그.

src="파일 경로"
- 보여줄 이미지의 파일 경로를 설정하는 속성이다. 파일 경로는 내부 경로와 외부 경로로 나눌 수 있다.
- 내부 경로: 내 프로젝트(Local)에 있는 이미지의 경로를 입력하는 것이다. 즉, 디렉토리 경로를 나타낸다.
  예) /Users/citronbanana/Desktop/tistory/citronbanana.png
- 외부 경로: 내 프로젝트가 아닌 외부 서버등에 있는 이미지 경로를 나타낸다.
  예) https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png
alt="텍스트" : 이미지가 정상 업로드 되지 않았을 때(파일 경로 문제, 네트워크 등) 보여지는 문구
width="가로 사이즈"
- 이미지의 가로 사이즈를 지정한다. 단위는 px(픽셀) 또는 %(비율)을 사용할 수 있다.
- px(픽셀) 단위 사용: px 문자 없이 숫자만 입력한다
  예) width="100"
- %(비율) 단위 사용: %문자와 함께 입력한다. '이미지 원본 사이즈 기준'으로 비율을 설정하는 것이다.
  예) width="50%" → 가로 사이즈를 원본 사이즈의 50%로 수정
- height 없이 width만 사용하면 이미지의 비율을 유지하며 입력한 가로 사이즈로 수정한다.
height="세로 사이즈"
- 이미지의 세로 사이즈를 지정한다. width와 마찬가지로 단위는 px 또는 %를 사용한다.
- width 없이 사용하면 이미지의 비율을 유지한 채 세로 사이즈로 수정한다.

N. <table>

테이블 태그 설명 넣기

저작자표시

'Front-End > HTML, CSS' 카테고리의 다른 글

[CSS] Flexbox 개념과 적용 (0)	2021.12.03
[CSS] CSS 기초 3. Layout(display, position) (0)	2021.12.02
[CSS] CSS 기초2. Selector (0)	2021.12.02
[HTML] 기초(2) Document and website structure (0)	2021.10.13
[CSS] CSS 기초 (0)	2021.10.12

현재글[HTML] HTML 기초

유자맛바나나의 Dev-log

[HTML] HTML 기초

정의