코린이의 소소한 공부노트

HTML 간단하게 알아보기 본문

Back-End

HTML 간단하게 알아보기

무지맘 2023. 3. 6. 15:09

[HTML이란?]

1. HyperText Markup Language

2. 웹 사이트의 모습을 기술하기 위한 언어

3. 문서의 구조나 서식을 태그를 이용해 표현한다.

4. 태그는 <ABC>로 시작하면 </ABC>로 끝맺는다.

 

가장 기본이 되는 태그 몇 가지만 소개하고자 한다.

 

[기본 구조 태그]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        Hello, world!
    </body>
</html>

1. <!DOCTYPE>: 어떤 마크업 언어를 썼는지 표시하는 태그. HTML은 아래처럼 쓰면 된다.

2. <html>: HTML이 작용하는 범위를 지정하는 태그로 위의 DTD를 제외한 전체를 이 태그로 둘러싼다.

3. <head>: HTML 문서의 속성 범위를 지정하기 위한 태그이다. 이 태그 안에 타이틀이나 메타 태그 등을 넣는다.

4. <body>: HTML 문서의 본문 범위를 지정하기 위한 태그이다. 초등학생때 배울때는 body 태그에 여러 속성들을 집어넣었던 것으로 기억하는데, 지금은 CSS를 이용한다고 한다.

5. <title>: HTML의 제목을 선언하는 태그. 탭창에 보이는 글쓰기, 다음 등의 글씨가 title의 내용이다.

6. <meta>: HTML의 부가 정보를 선언하는 태그. 예를 들어 charset 속성을 쓰면 인코딩을 선언할 수 있다.

7. <link>: 외부 CSS 파일, 파비콘 등을 연결하는 태그

 

[텍스트 관련 태그]

<h1>1번 글씨</h1>
<h6>6번 글씨</h6>

1번 글씨

6번 글씨

1. <h1>: 제목을 표시할 때 쓰는 태그. 1부터 6까지 있고, 숫자가 클수록 작은 글씨를 나타낸다. 자동 줄바꿈을 한다.

2. <p>: 문단을 지정할 때 쓰는 태그. 자동 줄바꿈을 한다.

3. <br>: 한 줄 띄어주는 태그

4. <b>: 굵은 글씨를 나타내는 태그

5. <i>: 기울임체를 나타내는 태그

6. <u>: 밑줄을 나타내는 태그

7. <sup>: 위 첨자를 나타내는 태그

8. <sub>: 아래 첨자를 나타내는 태그

 

[목록 관련 태그]

<ul>
	<li> 순서 없는 리스트의 항목 1 </li>
	<li> 순서 없는 리스트의 항목 2 </li>
</ul>
<ol>
	<li> 순서 있는 리스트의 항목 1 </li>
	<li> 순서 있는 리스트의 항목 2 </li>
</ol>
  • 순서 없는 리스트의 항목 1
  • 순서 없는 리스트의 항목 2
  1. 순서 있는 리스트의 항목 1
  2. 순서 있는 리스트의 항목 2

1. <ul>: unordered list. 순서(번호) 없는 리스트를 나타내는 태그

2. <ol>: ordered list. 순서(번호) 있는 리스트를 나타내는 태그

3. <li>: 리스트의 항목들을 묶는 태그

 

[텍스트 외 관련 태그]

1. <a>: 하이퍼링크 삽입 태그. href 속성을 써서 <a href="링크할 페이지">내용</a>와 같이 작성한다.

2. <img>: 이미지 삽입 태그.  src 속성을 써서 삽입할 이미지를 담고 width 속성을 써서 크기도 조절할 수 있다.

 

[표 관련 태그]

1. <table>: 테이블을 만드는 태그

2. <tr>: 행의 시작을 알리는 태그

3. <td>: 표의 내용, 셀을 표현하는 태그

 

2행 3열 테이블을 표시할 때 다음과 같이 작성하면 된다.

<table>
　　<tr>
　　　　<td>A1</td>
　　　　<td>A2</td>
　　　　<td>A3</td>
　　</tr>
　　<tr>
　　　　<td>B1</td>
　　　　<td>B2</td>
　　　　<td>B3</td>
　　</tr>
</table>
　　 　　　　 　　　　 　　　　 　　 　　 　　　　 　　　　 　　　　 　　
A1A2A3
B1B2B3

[CSS는 또 뭐지?]

1. Cascading Style Sheet, 내리꾸미기 서식

2. HTML같은 마크업 언어로 작성된 문서가 실제 웹페이지로 표현되는 방법을 정해주는 스타일 시트 언어

3. HTML이 문서의 구조와 글씨 속성 등을 모두 표현했었는데, 이것을 CSS와 분업해서 HTML은 구조 위주로, CSS는 디자인 위주로 그 용도를 맞춰 사용한다.

4. 선택자를 이용해서 어떤 스타일을 입힐지 정해주면 된다.

선택자 { (스타일 속성): (스타일 값); }
<style>
	h2 {color: blue;} // h2의 색을 파랑으로
</style>
<h2>안녕?</h2>

안녕?

저작자표시 비영리 변경금지 (새창열림)

'Back-End' 카테고리의 다른 글

[MySQL] ORDER BY, LIMIT  (0) 2023.03.18
[MySQL] 내가 겪은 오류 모음  (0) 2023.03.16
[MySQL] SELECT, FROM, WHERE  (0) 2023.03.16
인터넷 관련 개념/용어 간단하게 짚어보기  (0) 2023.03.06
백엔드 로드맵  (0) 2023.02.14
'Back-End' Related Articles more