본 내용은 필자가 부스트코스 웹UI 개발 코스를 수강 후 공부하기 위해 정리한 것임을 알려드립니다.
HTML의 이해
HTML 소개
- Hypertext Markup Language 의 약자.
웹페이지를 만드는 언어
Hypertext란, 텍스트를 초월하는, 텍스트 그 이상이라는 말. : Link
Markup Language : 정보를 구조적으로 표현 가능한 언어. : HTML
파일확장자는 .html
영국의 물리학자 팀 버너스 리가 최초로 제안하여 개발됨.
HTML 문법
태그
HTML은 태그의 집합
통상적인 태그의 의미는 무언가를 표시하기 위한 꼬리표, 이름표라는 의미
기본적으로 <, > 기호로 표현하며, 괄호안에 태그 이름이 들어간다.
시작 태그와 종료 태그로 이루어져있고 종료 태그는 </> 기호가 붙는다.
시작 태그와 종료 태그 사이에 실제 화면에 나타나는 내용이 위치된다.
1 2
<h1> Hello, World </h1> <!--h1 태그를 사용하여 Hello, World를 출력한다.-->
내용을 포함한 전부를 ‘요소’라고 한다.
각 태그에는 의미가 있고, 각 의미에 맞게 사용해야 한다.
XML, SGML, XHTML에도 태그를 사용한다.
속성
Attribute
HTML 태그들은 모두 속성을 갖고 있음
속성은 태그에 추가적으로 정보를 재공하거나, 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미한다.
이름과 값으로 이루어짐
1 2 3
<h1id="title">Hello, World</h1> <!--시작 태그에서 태그 이름 뒤에 공백으로 구분--> <!--속성이름="속성 값"으로 표현-->
Equal 사인 뒤에는 절대 공백이 와선 안된다.
하나의 태그에 여러 속성을 선언할 수 있다.
1 2
<h1id="title"class="test">Hello, World</h1> <!--속성들의 순서는 중요하지 않다.-->
속성은 종류에 따라 모든 태그에 사용가능한 글로벌 속성, 특정 태그에만 사용가능한 속성으로 구분된다.
선택적으로 쓸 수 있는 속성, 특정 태그에서 필요한 필수 속성으로 구분된다.
태그의 중첩
태그는 중첩이 가능함.
내부에 선언되는 태그는 반드시 부모 태그를 벗어나면 안됨.
온전히 부모 태그 안에서 시작되고 끝나야 한다.
태그 안에 중첩이 얼마나 되는지, 어떤 태그가 중첩이 되던 상관없다.
경우에 따라선 정해진 태그들만 중첩이 가능한 경우도 있다.
빈 태그
시작 태그만 존재하고 종료 태그가 존재하지 않는 태그
종료 태그가 존재하지 않기 때문에 내용이 들어갈 수 없다.
입력하는 내용만 비어있고, 속성을 통해 화면을 나타내거나 화면에 표시되지 않더라도 다른 용도로 사용되는 태그
브라우저가 작성자 대신 내용을 그려야 하는 경우에 사용한다.
이미지, 비디오 등 외부 리소스 삽입 시.
브라우저가 내용을 대체한다라는 뜻으로 Replacement Tag라고 불린다.
공백
기본적으로 HTML은 두 칸 이상의 공백을 모두 무시한다.
1 2 3 4 5 6
<h1>Hello, HTML</h1>> <h1>Hello, HTML</h1> <h1> Hello, HTML </h1>
세가지 요소는 모두 동일한 결과를 출력
한줄이 아닌 여러 줄의 개행을 모두 무시한다.
주석
화면에 노출되지 않고 메모의 목적으로 사용.
개발자들을 위한 기능임.
문서의 기본구조
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<!--문서가 어떤 버전으로 작성되었는지 브라우저에게 알려주는 선언--> <!DOCTYPE html> <!--해당 문서의 언어--> <htmllang='ko'> <!--head부 : 문서의 기본정보 설정, CSS, Javascript 연결 담당--> <head> <!--문자의 인코딩 방식 설정 속성--> <metacharset="UTF-8"> <!--브라우저 화면 탭바에 노출되는 내용 : title--> <title>HTML</title> </head> <!--body부: 실제 화면에 출력되는 부분--> <body> <h1>Hello, HTML</h1> </body> </html>
![[Kotlin] 2장. 변수와 자료형, 연산자](/images/Kotlin.png)
![[안드로이드] 기본 위젯들](/images/android.png)
![[Elasticsearch] Elasticsearch Engineer Training -4](/images/elastic.jpeg)