웹개발 - Front 관련

[TIL] HTML 기초 간단하게 학습하기

정상호소인 2024. 2. 17. 14:43

Topic =  HTML 개념, 기초 학습

 

 

 

HTML 이란?

 

HTML ( Hypertext Markup Language )

→ 웹 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹 콘텐츠의 의미 구조를 형성

 

  • 마크업 언어
    • HTML은 웹 페이지가 어떻게 구조화 되어 있는지 브라우저에 콘텐츠를 표시하는 방법을 알려주는 마크업 언어이다.
  • 구조 형성
    • 요소 ( Element )을 통해 웹 페이지가 무엇으로 이루어져 있는지, 속성 ( Attribute ) 을 통해 어떻게 구성되어 있는지에 대한 구조를 형성한다.

 

[ 기본적인 html 구조 형성 예제 ]  → HTML Element의 구조에 대해서 아래 추가로 작성.

<!DOCTYPE html> <!--이 문서가 HTML5 임을 정의한다. -->
<html> <!-- html 페이지의 루트 요소. -->
<head> <!-- HTML 페이지에 대한 메타 정보가 포함. -->
    <meta charset="UTF-8" /> <!-- 문자 인코딩 설정 -->
    <title>Document</title> <!-- 제목 요소임을 알리는 title 태그 -->
    <link rel="stylesheet" href="/css/test1.css" /> <!-- CSS연결 -->

</head>
<body> <!-- document의 본문을 정의하며 제목, 본문, 이미지, 하이퍼링크, 표, 목록 등과 같이 표시되는 콘텐츠에 대한 컨테이너 -->
	<h1>제목1</h1>
	<p>본문1</p>
</body>
</html>

 

 

☑️ HTML의 요소는 대소문자를 구분하지 않는다. <p>, <P>, <h1> <H1>, <title>, <TitlE> 등과 같이 사용할 수 있지만, 가독성, 호환성 및 다양한 플랫폼과 상호 운용성 등의 문제로 소문자로 작성하는 것이 HTML 요소의 규칙 및 표준으로 자리잡았다.

 

 

HTML 요소( Element  )

 

 

[ Element의 구조 ]

 

Element의 구조는 다음과 같다.

  • 여는 태그 ( Opening Tag )
    • 여는 태그는 요소의 역할을 지정해주는 이름 ( 본문의 경우 p ) 이 < > 괄호 안에 들어감으로 구성된다.
  • 닫는 태그 ( Closing Tag )
    • 닫는 태그는 요소의 역할을 지정해주는 이름앞에 슬래시( / ) 기호가 들어감으로 구성되며, 요소의 종료 지점을 알려준다.
  • 내용 ( Content )
    • 요소의 내용
  • 요소 ( Element )
    • 여는 태그, 닫는 태그, 내용을 통틀어 요소라고 한다.

 

 

 

중첩 요소 ( Nesting Elements )

 

요소안에 다른 요소가 포함될 수 있다. 그런 요소를 중첩 요소 내지는 내포 요소라고 한다. 이를 통해 특정 요소 안 일부 콘텐츠에 강조 등의 효과를 적용할 수 있다.

<p> 참고 페이지는 <a href="google.com">구글</a> 입니다. </p>

 

 

➡️  적용 결과

  • 본문 요소 <p> </p> 태그 안에 페이지 하이퍼 링크 요소인 <a> </a>를 내포하고 있어 ' 구글 ' 텍스트는 링크 요소로 구성되게 된다.

 

 

빈요소 ( Empty Element )

 

위의 <a> </a> 링크 태그와 같이 HTML 요소는 다양한 라벨 태그를 이용하여 구성될 수 있다. 이때 모든 요소가 여는 태그, 닫는 태그 패턴을 따르는 것은 아니다. 컨텐츠에 무언가를 첨부하기 위해 단일 태그 ( Single Tag ) 를 사용하는 요소도 있다. 대표적으로 이미지를 삽입하기 위한 요소인 <img src=" 이미지 " /> 요소가 있다.

<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_light_color_92x30dp.png" />

 

 

➡️ 적용 결과

 

 

 

 

속성 ( Attribute )

 

속성 ( Attribute )

앞서 <img>, <a> 태그를 사용해보면서 요소 태그 안에 ' src ' 와 같은 값이 들어간 것을 확인할 수 있다. 이와 같이 요소는 속성을 가질 수 있고, 속성은 요소에 실제론 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용한다.  

 

속성 정의

  • 공백을 통해 구분
    • 요소 태그 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 하고, 하나 이상의 속성들이 있는 경우에도 마찬가지로 속성 사이에 공백이 있어야 한다.
  • 속성 값 정의
    • 속성 이름 다음엔 등호가 붙고, 속성 값은 따옴표 ( " " or ' ' ) 내부에 나타낸다.

 

[ 속성의 형식 ]

  • title 속성은 요소에 마우스 커서를 올릴 경우 요소에 대한 추가적인 정보를 제공하는 툴팁이 표시되는 속성이다.

 

➡️ 적용 결과

 

 

속성 ( Attribute ) 2. 사용되는 속성 몇 가지.

 

[ HTML 공통 속성 ]

☑️일반적으로 HTML( 구조 ), CSS( 시각적표현 ), JS( 동작 ) 간의 명확한 구분을 유지하는 원칙을 준수하는 것이 권장되기 때문에 style 등의 시각적 표현 속성은 HTML 내부에서 작성하는 것은 권장되지 않는 방식이다.

 

  • id=""
    • HTML 요소에 대한 고유 식별자를 제공한다. CSS를 사용한 스타일링 목적이나 JavaScript 조작에 사용
  • class=""
    • 요소에 대해 하나 이상의 클래스 이름을 지정한다. 이를 통해 클래스가 지정된 요소에 스타일이나 JS 기능을 적용할 수 있다.
  • title=""
    • title 속성은 요소에 마우스 커서를 올릴 경우 요소에 대한 추가적인 정보를 제공하는 툴팁이 표시되는 속성이다.
  • href=""
    • <a></a> 연결된 리소스의 URL을 지정하기 위해 사용된다.
    • ✅ <a></a> 에 href 로 직접 처리하지 않고 onclick으로 처리하는 경우도 있다고 한다. 추후에 학습해보기.
  • target="blank"
    • target은 링크가 어떻게 열릴 것인지를 지정하는 속성이다. blank 속성 값을 통해 링크를 새 탭에서 열 수 있다. <a> 태그의 기본 값이 현재 탭에서 링크로 이동하기 때문에 현재 탭에서 이동할 경우 해당 속성을 생략하면 된다
  • src=""
    • <img>, <script>, <iframe> 등의 요소에서 포함되거나 포함될 리소스를 지정하는 속성이다.
  • alt=""
    • <img> 요소에서 이미지를 로드할 수 없거나 접근성을 위해 표시되는 대체 텍스트를 제공하는 속성이다.,
  • style="" , width="", height="" 등등 
    • 인라인 CSS 스타일을 개별 HTML 요소에 직접 적용하여 내,외부 스타일 시트를 재정의 할 수 있다
    • 권장되지 않음

 

[ 속성값이 없는 속성 - Boolean Attributes ]

<input type="text" disabled />
  • disabled
    • disabled 속성이 <input>, <button>, <select> 등과 같은 양식 요소에 추가된 경우 해당 요소를 비활성화 한다.
  • readonly
    • 일반적으로 <input> 등의 요소와 함께 사용되며 해당 요소 필드를 읽기 전용으로 만들어 사용자가 수정할 수 없도록 한다. 

 

 

 

 

HTML 문서의 특성 및 구조

 

[ HTML 파일 생성 ] 

VSCode 를 통해 HTML 문서를 작성하기 위해서는 파일이름.html 으로 html 확장자로 파일을 생성해준다. 파일명은 알파뱃 소문자로 만들어야 하며, 공백은 하이픈 (  - ) 으로 표기한다. 이때 최상위 HTML 파일의 이름은 관례적으로 index.html 로 만드는 것이 좋다고 한다.

 

index.html?

  • 웹 서버는 사용자가 특정 파일을 지정하지 않고 디렉터리에 액세스할 때 특정 파일을 제공하도록 구성된다. 관례적으로 index.html 파일은 웹 서버의 기본 문서로 지정되는 경우가 많다. 사용자가 웹 사이트의 루트 URL ( 예: https://www.naver.com/ )을 방문하면 웹 서버는 해당 디렉토리에서 index.html 파일을 찾아 사용자의 부라우저에 제공한다. 이는 사용자의 URL 탐색을 단순화하고 웹사이트의 주요 콘텐츠가 즉시 표시되도록 한다. 이는 대부분 웹 사이트 URL을 다른 사람과 공유할 때 특정 파일을 지정하지 않고 루트 URL을 통해 진입하는 것과도 관련되어있다.
  • 많은 웹 개발 도구, 프레임워크 및 컨텐츠 관리 시스템 ( CMS ) 은 index.html 파일이 기본 진입점으로 존재한다고 가정하여 다양한 개발 환경, 플랫폼과 호환성이 보장된다.

 

[ 웹 페이지 언어 설정 ]

<html lang="en"> </html>

  • html 태그의 lang 속성을 통해 페이지에서 보여지는 언어의 속성값을 지정해줄 수 있다. 한국어 웹 페이지는 ' ko ' 속성 값을 가진다. en으로 설정 시 웹 페이지에서 제공하는 번역 툴 안내가 나오지만, ko로 설정 시 크롬 설정된 언어도 ko이기 때문에 별도로 번역 옵션 툴 안내가 나오지 않는다.
  • HTML 문서 작성 시 ! + tab 을 통해 기본적인 HTML 서식을 만들 수 있는데 이때 html의 lang 속성값은 en으로 기본 설정되어 있다.

 

 

 

[ HTML 문서의 문자 인코딩 설정 - UTF-8 ]

<meta charset="utf-8">

 

UTF-8에는 전세계에서 사용되는 언어에 대한 대부분의 문자가 포함된다. 이 설정을 사용하면 페이지에 포함된 모든 텍스트 내용을 처리할 수 있다. UTF-8로 문자 인코딩을 설정 시 문자 인코딩과 관련된 대다수의 문제를 피할 수 있다.

 

 

 

 

 

 

 

[Reference]

 

 

HTML 시작하기 - Web 개발 학습하기 | MDN

HTML 기본 사항을 둘러 보셨기를 바랍니다.

developer.mozilla.org