DevSSOM

HTML - 문서를 구성하는 태그 본문

HTML, CSS

HTML - 문서를 구성하는 태그

데브쏨 2021. 7. 5. 01:54
반응형

HTML이란?

Hyper Text Markup Language라고 해서 웹사이트에서 눈에 보이는 정보(텍스트, 이미지 등)나 특정 구역을 설정할 때 사용하는 언어. 예를 들어, 네이버는 아래처럼 구역이 설정되어 있음.

 

 

HTML의 변화

시간이 지남에 따라 버전업이 되면서 자주 사용되지 않는 용어들은 사라지고 시대에 맞추어 새로운 신조어가 등장. 우리가 살펴볼 언어들은 html5를 기준으로 설명될 예정.

 

 

태그의 기본 구성

하나의 태그는 다음과 같이 구성됨.

<!-- 태그의 구성 -->
<열린태그 속성 = "속성값"> 컨텐츠 </닫힌태그>
  • 태그 : 열린 태그와, 닫힌 태그로 이루어져 있음. 몇몇 태그를 제외한 대부분의 태그들은 형태의 닫힘 태그를 꼭 작성해야함.
  • 컨텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용.
  • 속성 : 태그가 갖고 있는 추가 정보.
  • 속성값 : 어떤 역할을 수행할지 구체적인 명령을 입력하는 곳.
  • 주석 : <!-- 이렇게 시작해서 --> 이렇게 마무리 되면, 그 사이에 코멘트가 기록됨. 이 문서를 보는 사람들이 알아보기 쉽게 설명을 달아주는거야.

 

 

HTML 문서의 기본 코드 구조

  • <!DOCTYPE html> : html5라고 하는 신조어로 이 문서를 구성하겠다는 의미. 그래서 과거에 사용된 언어 중 일부는 이 문서에서 사용될 수 없을 수도 있음.
  • <html></html> : html 문서의 시작과 끝을 나타냄. 모든 HTML 태그들은 <html> 태그 안쪽에 입력.
  • <head></head> : 웹 사이트의 요약 정보를 담는 태그. 사용자에게 직접적으로 보여지진 않음.
  • <meta charset="UTF-8"> : 캐릭터 세팅의 약자를 나타내는 문자코드. 모든 문자를 웹 브라우저에서 깨짐없이 표시하겠다는 의미. 이걸 넣지 않으면 한글 태그가 깨질 수 있어.
  • <title></title> : 브라우저 상단 웹사이트 탭에 나타나는 제목을 적는 태그.
  • <body></body> : 실제로 사용자가 웹 사이트에 접속을 했을 때 눈에 보이는 모든 정보. 
<!DOCTYPE html>                 <!-- HTML5 문서 선언 -->
<html>                          <!-- HTML 문서의 시작과 끝 -->
  <head>                        <!-- 문서와 관련된 요약정보 -->
    <meta charset="UTF-8">      <!-- 문자 코드 -->
    <title>TEST</title>         <!-- 웹사이트 제목 -->
  </head>
  <body>                        <!-- 웹사이트 내용 -->
  
  </body>
</html>

 

 

기본 태그

- <img> 태그

이미지를 넣을 때 사용하는 태그. 얘는 닫힌 태그가 없음.

<img src="logo.png" alt="회사로고">
  • src 속성 : 삽입할 이미지의 파일 경로를 넣어줌.
  • alt 속성 : img 태그를 사용할 때는, alt 속성을 반드시 넣어줘야됨. alt는 웹접근성을 고려해서 넣어주는 속성인데, 웹사이트가 이미지를 출력하지 못했을 경우, 그 자리가 빈 공간 그대로 나오면 안되고, 어떤 이미지였는지 사용자에게 알려줘야 되기 때문에 텍스트로 적어줘야됨.

 

- <h> 태그

Heading의 약자로 제목이나 부제목을 표현. <h1>, <h2>, <h3> ... <h6>까지 있음. 숫자 값이 클수록 폰트 사이즈가 작음. 즉, 숫자는 정보의 중요도를 나타냄. <h1>태그는 가장 중요한 정보를 담기 때문에, 하나의 html 문서에서 한 번만 사용됨.

<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>

 

- <p> 태그

Paragraph의 약자로 웹사이트의 본문 내용을 표현. 쉽게 설명하면, 기다란 문장이나 문단을 넣을 때 씀. 

<p>Nice to meet you</p>

 

- <ul> 태그

Unordered list의 약자로, 순서가 없는 리스트 생성. 여기서 순서가 없다는 것은, 각각의 메뉴들이 동급일 때, 우선순위가 없는 정보를 담고 있을 때를 말함. 항상 첫 번째 자식으로는 <li>태그가 들어가 있어야 됨. 메뉴 버튼을 만들 때 자주 사용.

<ul>
    <li>메뉴1</li>
    <li>메뉴2</li>
    <li>메뉴3</li>
</ul>

 

 

728x90
반응형
저작자표시

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

CSS - 속성의 상속, 부모 자식 관계  (0) 2021.07.10
CSS - 선택자  (0) 2021.07.10
CSS - CSS 개념과 연동 방법  (0) 2021.07.09
HTML - 태그의 두 가지 성격 (Block 요소와 Inline 요소)  (0) 2021.07.08
HTML - 구조를 잡을 때 사용하는 태그  (0) 2021.07.07
HTML - <a>태그로 링크 입력하기  (0) 2021.07.06
HTML/CSS - 웹을 구성하는 요소  (0) 2021.07.04
'HTML, CSS' 관련 글 more
댓글