[HTML] 기본1

Notice

Recent Posts

Recent Comments

Link

Beakjoon Online Judge

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

코드일기장

[HTML] 기본1 본문

HTML,CSS

[HTML] 기본1

won_hyeok2 2022. 6. 29. 21:40

HTML(HyperText Markup Language)은 웹 문서를 작성하는 태그 언어이다.

웹 브라우저는 한 번에 하나의 HTML 페이지를 화면에 출력한다.

HTML 언어의 역사는 따로 찾아보면 재밌는 글들이 많을 것이다.

HTML5에서 HTML 페이지는 <!DOCTYPE> 선언과 주석문, 그리고 헤드 부분과 바디 부분으로 구성된다.

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
    <!--주석문 화면에 출력x-->
</body>
</html>

위 코드의 태그 중 <html>, <head>, <body>, <title> 태그는 HTML5의 필수 태그들이다. HTML 문서를 만들 때 반드시 있어야 한다.

<!DOCTYPE html>

<!DOCTYPE html>은 브라우저에게 이 문서는 html5 임을 알리는 지시어이다. 반드시 첫 줄에 있어야 한다. 소문자로 doctype으로 사용해도 된다.

HTML 문서 내에 다는 주석문으로 주석문은 웹 브라우저에 의해 출력되지 않는다. 주석문은 어느 부분에서 언제든지 사용 가능하며 주석문에 용도는 가독성과 코드의 메모 역할이다.

<head></head>

<head></head>로 둘러싼 부분으로 <title> 태그가 있는 것을 위 코드에서 볼 수 있다. head태그는 문서의 제목, 본문을 설명하는 메타 태그들 JS 코드 CSS 스타일 시트 등을 포함하며 문서의 본문은 포함되지 않는다. 한마디로 화면에 출력되지 않는 데이터들을 처리하는 부분이다.

<body></body>

문서의 본문이라고 볼 수 있는 바디(body) 태그는 JS코드도 포함할 수 있다. 바디는 화면에 보이는 데이터를 처리하며 head와 body 사이에는 아무것도 들어갈 수 없다.

HTML 태그 문법

HTML에는 수많은 태그들이 있다. 이 태그들은 HTML5만의 문법을 이용해 태그들을 사용할 수 있다. HTML5 문법은 매우 간단하다.

태드들은 태그 이름과 여러 속성들(attribute)로 구성되어 있다.

<meta name="author" content="kim">

HTML 태그들은 시작 태그와 종료 태그로 구성된 태그들이 있고 위에 meta 태그처럼 종료 태그가 없는 것이 있다.

<!--종료태그가 있는 태그 예시-->
<a href="#" target="_blank">링크</a>

<!--종료태그가 없는 태그 예시-->
<img src="" width="100" height="100" alt="이미지">

종료 태그가 있는 태그들은 종료 태그가 생략되면 오류로 처리되어 화면에 정상적으로 출력되지 않는다. 종료 태그를 꼭 달아야 한다.

태그의 속성은 대소문자를 구분하지 않는다.

<img src="" Width="100" Height="100" alt="이미지">

하지만 통일성을 위해 한 가지만 사용하는 것이 좋다. 대소문자를 섞으면서 속성을 작성하는 것은 옳지 않다.

속성 값 역시 ""로 안 묶어도 된다. ''안에 속성 값을 적어도 되고 아예 ("", '')를 사용하지 않아도 된다. 하지만 많은 HTML 웹 문서들은 ""안에 속성 값을 적는 게 룰이 되었다.

이제부터 기본적인 태그들의 사용법에 대해 정리해보겠다.

<title> 타이틀 태그

HTML5의 필수 태그인 <title>은 <head> 태그 안에 존재해야 한다.

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
</body>
</html>

브라우저 상단에 웹 페이지 타이틀이 HTML인 것을 확인할 수 있다.

문단의 제목 <h1>~<h6>

일반적인 문서들은 가독성을 위해 문서를 구조화한다. 장, 절, 문단, 소제목, 제목 등 HTML5 역시 문서와 매우 비슷하다. 대제목 소제목을 달아주는 태그들이 존재한다. <h1>은 제목 태그 중 제일 큰 태그 <h6>는 제일 작은 제목 태그이다.

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>
</body>
</html>

<title>의 또 다른 기능 툴팁

<title> 태그는 설명문(툴팁)의 기능도 있다.

<h1 title="h1태그의 툴팁입니다.">H1</h1>

<p>, <hr>, <br> (단락, 수평선, 줄 넘기) 태그

paragraph으로 나눌 수 있는 <p> 태그는 문단을 표현하기 위한 태그이다. </p> 종료 태그 다음에는 자동으로 빈 줄이 생긴다.

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
    <p>
        HTML 문서에서 문단을 표현하기 위한 태그는 
        무엇이 있을까? 같이 알아가보자.
    </p>
    <p>
        문단이 나누어 진 것 같다. 종료 태그 기준으로 자동으로 빈 줄도 생겼다.
        신기하다.
    </p>
</body>
</html>

문단 내에서 내용 전환이 필요할 때 수평선을 삽입해서 시각적 효과로 문단을 구분할 수 있다. 수평선을 그어주는 태그는 <hr>이다. 종료 태그는 없다.

<!DOCTYPE html><html lang="ko"><head><title>수평선</title></head>
<body>
    수평선
    <hr>
    그어볼까?
    <hr>
</body>
</html>

HTML 코드는 <Enter> 키를 여러 개 입력해도 웹 상에서 다음 줄로 넘어가지 않는다. 새로운 줄로 넘어가 출력시키고 싶으면 <br> 태그를 사용하면 된다.

<!DOCTYPE html><html lang="ko"><head><title>줄바꿈</title></head>
<body>
    아무리 줄바꿈를 해도


    웹 상에서는 엔터키가 안먹히네 ㅜ
    근데 <br>
    &lt;br&gt;로는 넘어가진다.
    <br><br><br>
    3줄 넘기
</body>
</html>

문자, 기호, 심볼입력

HTML 문서에서 문자들은 유니코드 UTF-8 코드체계로 작성되는 것이 표준이다.

UTF-8은 현재 가장 다양한 종류의 문자, 기호, 심볼을 표현할 수 있는 코드 체계이다. 하지만, '<', '>'와 같은 HTML 예악 어나 다양한 수학기호나 특수기호는 키보드로 입력하기 힘들다. 키보드로 입력하기 위해 엔터티와 코드 표현을 사용하면 된다.

&엔터티; &#코드값;

방법은 위와 같이 두 가지이다.

<!DOCTYPE html><html lang="ko"><head><title>줄바꿈</title></head>
<body>
y = &sum;x
<br>
&#60;body&#62; 와 &lt;head&gt; 태그 ㅎ
</body>
</html>

앤터티와 코드표현에 대한 정보는 외울 필요는 절대 없다. 필요할 때마다 인터넷에 찾아보는 것이 좋다.

https://aneok.tistory.com/86

HTML 자주 사용 특수문자 코드표 (Entity code)

Entity code 자주 사용하는 html 앤티티 코드를 정리하였습니다. 간혹 정말 필요한데 검색할려니 마땅히 무엇을 적어야 할지 몰라 당황했던적이 있습니다. 생각해보면 특수문자 또는 html code라고만

aneok.tistory.com

이 사이트가 정리가 잘 되어있다.

그대로 출력하는 태그 <pre>

브라우저는 개발자가 HTML 문서의 모양을 포맷하기 위해 삽입한 여러 개의 빈칸이나 탭 줄바꿈을 모두 하나의 빈칸으로만 처리한다. 개발자가 의도한 모양대로 출력하기 위해서는 <pre> 태그를 사용하면 된다.

<!DOCTYPE html><html lang="ko"><head><title>줄바꿈</title></head>
<body>
&lt;pre&gt; 사용 전: 개발자가 의도한대로
                    출력이 왜 안돼~
<pre>
    개발자가 의도한대로
    출력이 돼~
      이것도 가    능
</pre>
</body>
</html>

블록태그와 인라인 태그

HTML 태그들은 블록 태그(block) 인라인(inline) 태그 두 가지로 나뉜다.

블록 태그는 항상 새 라인에서 시작하고 브라우저의 왼쪽 끝에서 오른쪽 끝까지 블록 공간을 차지한다.

반대로 인라인 태그는 블록 콘텐트의 일부를 표현하는 데 이용된다.

많이 사용하는 블록 태그 중 <div> 태그가 있다. <div>는 특별한 기능과 의미가 없다 그냥 의미 없는 블로 태그이다.

인라인에서 의미없는 태그는 <span>이다. 보통 이런 의미 없는 태그로 CSS 스타일을 적용하거나 JS로 다루거나 구조화할 때 많이 사용된다.

예)

<!DOCTYPE html><html lang="ko"><head><title>줄바꿈</title></head>
<body>
<h3>&lt;div&gt;와 &lt;span&gt;</h3>
<hr>
<div style="background-color: beige; padding: 20px;">
    <span style="color: red;">1980년</span>, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 <span style="color:skyblue;">팀 버너스리</span>가 
    HTML의 원형인 인콰이어를 제안하였다.
</div>
</body>
</html>

커버사진

<a href="https://www.flaticon.com/kr/free-icons/html-5" title="html 5 아이콘">Html 5 아이콘 제작자: Freepik - Flaticon</a>

https://www.flaticon.com/kr/free-icon/html-5_919827

'HTML,CSS' 카테고리의 다른 글

[HTML] 기본2 (0)	2022.07.05
[HTML] <meta> (meta태그) (0)	2022.01.28

'HTML,CSS' Related Articles

Comments

코드일기장

[HTML] 기본1 본문

[HTML] 기본1

'HTML,CSS' 카테고리의 다른 글

티스토리툴바