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
'웹개발 - Front 관련' 카테고리의 다른 글
| [TIL] CSS / word-break [ 문자열 단어기준 / 글자기준 줄바꿈 속성 ] (2) | 2024.03.31 |
|---|---|
| [TIL] JavaScript - InterSectionObserver - 속성 및 기본 사용 편 (0) | 2024.03.30 |
| JS Library - Swiper.js (1) 개념, 사용방법, 속성들 (0) | 2024.03.01 |
| [TIL] CSS ( 1 ) 기초 - 선택자 ( Selector ) (4) | 2024.02.18 |
| [VS Code] vscode Extension - 단어 선택, 코드 선택 단축키로 확장하기, 단축키 변경 (1) | 2024.02.06 |
