💛[부스트코스_웹 UI 개발] 1. HTML 소개

👾·2021년 1월 13일

html css

HTML & CSS

목록 보기

1/20

HTML이란?

Hyper Text Markup Language

Hyper Text : 텍스트 그 이상, 텍스트를 초월하는. 링크를 의미.

Markup Language : 정보를 구조적으로 표현가능한 프로그래밍 언어

웹페이지를 만들때 사용되는 프로그래밍 언어
웹사이트들은 모두 HTML 언어를 이용해서 만들어짐
파일 확장자가 .html
HTML 코드를 작성하면 브라우저는 이를 해석해서 화면을 나타내준다.
html은 90년대 초반에 개발됨.
초기 개발 목적과는 달라졌지만, 정보를 공유한다는 목적은 여전히 같다.

HTML 문법

태그
속성
태그의 중첩
빈 태그
공백
주석

태그 TAG

HTML내에서 가장 중요하고 기본이 되는 규칙

무언가를 표시하기 위한 꼬리표, 무언가를 인식하기 위한 이름표

우리가 다양한 태그들을 이용해서 코드를 작성하면 브라우저가 이를 인식해서 내용을 표현하게 됨.

<h1>Hello, HTML</h1>

<!--<h1>태그를 사용해서 Hello, HTML이라는 텍스트를 화면에 출력하는 코드-->

<h1>이라는 태그를 사용

태그는 <>를 이용해서 선언을 함. <태그 이름>
태그는 두개가 한쌍으로 선언됨.
<h1> : 시작태그, 여는태그
</h1> : 종료태그, 닫는태그
태그로 감싸진 부분이 내용. <h1>내용</h1>
- 내용이 실제의 화면 브라우저에 나타나는 부분.
- 태그기호들은 브라우저 화면에 노출되지 않음
내용을 포함한 전부가 요소. <h1>내용</h1> = 요소
- 태그와 요소는 다른 의미지만 태그를 요소라고 부르는 경우가 많다.
HTML에는 많은 종류의 태그 존재. 각 태그에는 의미가 있고 그 의미에 맞게 사용을 해야함.
XML, SGML, XHTML등의 마크업 언어에는 모두 태그를 사용한다.

속성 ATTRIBUTE

HTML 태그들은 속성을 가진다.

속성은 태그에 추가적으로 정보를 제공하거나, 우리가 원하는대로 태그의 동작이나 표현을 조절할 수 있는 설정값들이다.

속성 = 이름 + 값

<h1 id="title">Hello, HTML</h1>

시작태그 안에 선언.
태그 이름 뒤에 공백으로 구분하여 속성이름, 속성 값 쓴다.
속성이름과 속성 값 사이에는 =를 제외하고 어떠한 공백도 들어가면 안됨.
속성값은 ""로 감싼다.
- ""를 써도 되고 ''를 써도되지만 "로 시작하면 ", '로 시작하면 '로 닫기.
의미와 용도에 따라 여러 속성들 존재.
하나의 태그에 여러개의 속성 선언 가능.

<h1 id="title" class="test"></h1>

속성들의 선언 순서는 중요하지 않음
속성의 종류
- 어느태그에서도 모두 사용할 수 있는 글로벌한 속성
- 특정 태그들에서만 사용가능한 속성
- 특정 태그에서 반드시 있어야하는 필수 속성
- 있어도 되고 없어도 되는 선택적인 속성

id, class속성은 대표적인 글로벌 속성

태그 중첩 Nesting Tags

태그는 중첩이 가능.
태그안에 다른 태그를 얼마든지 선언할 수 있다.

주의
안에 선언되는 태그는 반드시 부모태그를 벗어나면 안됨.
태그안에 중첩이 얼마나 되는지, 어떤 태그가 중첩이 되도 상관없음.
다만 경우에 따라서 정해진 태그들만 중첩이 가능한 경우 존재

<!--올바른 예-->
<h1>Hello, <i>HTML</i></h1>

<h1>태그 안에 <i>태그가 시작되고 종료되었다.
이와같이 중첩되는 태그는 온전히 부모태그 안에서 시작되고 끝나야함.

<!--잘못된 예-->
<h1>Hello, <i>HTML</h1></i>

<h1>태그 내부에 <i>태그가 시작되었지만 <h1> 종료태그가 먼저 선언되었다.
엇갈리게 중첩이 되면 안됨.

빈 태그 Empty Tag

태그는 기본적으로 시작태그와 종료태그 두개가 한쌍으로 이루어지지만 그렇지 않은 태그도 존재한다.

시작태그만 존재하고 종료태그가 존재하지 않는 태그들

<br>
<img src="">

시작태그와 종료태그 사이에 실제 화면에 나타날 내용이 들어감.
그런데 종료태그가 존재하지 않기 때문에 내용이 들어갈 수 없음.
따라서 내용이 비어있다고 해서 빈 태그라고 부른다

빈 태그들은 우리가 입력하는 내용만 비어있을 뿐 속성을 통해서 1)화면을 나타내거나 또는 2)화면에 표시되지 않더라도 다른 용도로 사용되는 태그들이다.

1) 브라우저가 직접 화면을 그려줘야 하는 경우

대부분의 태그들은 내용을 가지므로 직접 그 내용을 입력할 수가 있음
반대로 브라우저가 대신 내용을 그려야 하는 경우 존재.
ex) 웹문서에 텍스트가 아닌 이미지나 비디오처럼 외부 리소스를 삽입하는 경우.

이미지를 삽입하기 위해서는 반드시 이미지 리소스가 필요.
또 브라우저가 그 이미지를 가져올 수 있도록 위치도 알고 있어야함.
우리가 직접 내용에 그 이미지를 그릴 수 없으니, 브라우저에게 이미지의 경로를 전달하는것.

src속성을 통해서 이미지 리소스의 경로를 전달.
이런 태그들을 브라우저가 내용을 대체한다고 하여 replacement 태그, 대체되어지는 태그라고도 함.

빈태그들이 대체태그만 있는것 아님

2) 실제로 화면에 출력될 내용이 없는 태그도 존재

용도자체가 화면에 보여지는것이 아니고 문서 내부적으로 부가적인 정보를 제공하는 것.
ex) br태그

공백 Space

HTML은 두칸 이상의 공백을 모두 무시

<h1>Hello, HTML</h1>
<h1>Hello,   HTML</h1>
<h1>
  Hello,
  HTML
</h1>

각 요소는 공백과 개행이 다르지만 동일한 결과가 나옴

주석 Coment Tags

주석은 화면에 노출되지 않고 순전히 메모의 목적으로만 사용.

화면에 노출되지 않기 때문에 개발자들을 위한 기능
개발하다보면 서비스의 규모에 따라 많은 개발자가 같이 협업하는 경우 많음.
다른 개발자들을 위해서, 또는 내 스스로를 위해서 메모를 남겨야 하는 경우 존재

<!--내용-->

사이에 들어가는 내용이 모두 주석처리됨

문서의 기본 구조

HTML문서는 공통적으로 가지고 있어야 하는 기본 구조가 존재

몇가지 태그가 기본적으로 선언된다
가장 외곽, 즉 가장 부모가 되는 태그들

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>HTML</title>
  </head>
  <body>
    <h1>Hello, HTML</h1>
  </body>
</html>

HTML 문서 = 최상단의 doctype 선언부와 하나의 html태그로 구성

DOCTYPE : 문서가 어떤 버전으로 작성이 되었는지 브라우저에게 알려주는 선언문 같은 것 (태그 X)

위의 코드는 이 문서는 HTML5로 작성되었다 라고 브라우저에게 알려주고 있다.
반드시 문서 내에 최상단에 위치해야 하고, HTML태그보다도 위에 선언되어야 한다.
어떤것도 DOCTYPE보다 먼저 나와서는 안됨.
DOCTYPE에도 여러 종류가 존재
DOCTYPE을 선언하지 않거나 잘못 선언하면 브라우저는 문서를 비표준방식으로 해석.
DOCTYPE은 웹 표준과도 관련이 있다

<html>태그의 lang속성 : 언어 코드가 들어감.
검색 엔진이나 브라우저들이 참고할 수 있도록 해당 문서가 어느 언어로 작성되어는지 나타내주는 속성.

<html>태그 내부에는 <head>태그와 <body>태그로 이루어져 있다

<head>태그 내부에는 <meta>태그, <title>태그 <link>태그, <style>태그 등 다양한 태그들이 들어감.
<head>태그에 위치하는 태그들은 브라우저 화면에 표시되지 않음
문서의 기본정보 설정이나 외부스타일시트파일 및 자바스크립트 파일등을 연결하는 역할.

<meta>태그에는 다양한 속성이 있음
charset 속성은 문자의 인코딩 방식을 지정하는 속성.
UTF-8이 가장 기본적인 방식

<title>태그는 문서의 제목이 들어감.
실제 브라우저 화면의 탭바에 노출되는 내용이 <title>태그안에 들어가는 내용
접근성이나 검색엔진 최적화 측면에서 많이 도움되므로 적절한 제목을 입력해야한다.

<body>태그는 실제 브라우저 화면에 나타나는 내용이 들어감.

👾

다음 포스트