1. HTML이해하기
HTML
Hyper text (텍스트를 초월하는) markup language(정보를 구조적으로 표현 가능한)
Hyper Text는 단순한 텍스트를 넘어서 웹 페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트 즉, 링크를 의미합니다.
Markup Language는 프로그래밍 언어의 한 종류로 정보를 구조적, 계층적으로 표현 가능하다는 특징이 있습니다.
HTML은 파일 확장자로 .html을 쓰며, 그 파일 안에 html 코드를 작성하게 됩니다.
hyper text = 링크
확장자가 html
HTML 문법
태그(TAG)
가장기본이 되고 중요한 규칙
무언가를 표시하기 위한 꼬리표, 이름표
우리가 다양한 태그들을 이용해 코드를 작성하면, 브라우저가 이를 인식해 내용을 표현
<h1>Hello, HTML</h1>꺽쇠기호로 선언 <,>h1이 태그 이름
<시작태그, 여는 태그 > 내용(브라우저에 나타나는 부분 < /종료태그 받는 태그>
요소
내용+태그 전부를 요소라고 한다.
각 태그에는 의미가 있고 의미에 맞게 사용을 해야한다.
마크업언어에서는 모두 태그를 사용 XML, SGML, XHTML
속성(ATTRIBUTE)
<h1 id="title">Hello, HTML</h1>태그에 추가적정보 제공 태그의 동작이나 표현 조절할 수 있는 설정값
이름과 값으로 이뤄짐
태그 이름 뒤에 공백으로 한 칸 띄운 뒤 이름과 값을 쓰면 됨
= 이퀄싸인에 절대 공백 X 홀따옴표 쌍따옴표 상관 X
이름 ="값"
하나의 태그의 여러가지 속성 삽입가능 class라는 속성 추가 시 공백으로 구분
<hi id="title" class="test">속성들의 선언 순서는 중요하지 않음 id class 순서 뒤바뀌어도 내용일정
특정태그에서만 쓸 수 있는 속성이 있음
태그에 반드시 써야하는 속성도 있음
예시에 쓰인 속성은 글로벌 속성(id, class) 모든 태그에 쓸 수 있다.
태그 중첩(NESTING TAGS)
<h1>Hello, <i>HTML</h1></i>태그는 중첩이 가능하다
안에 선언되는 태그는 반드시 부모 태그를 벗어나면 안된다
<h1>Hello, <i>HTML</i></h1>모든 태그들이 중첩이 가능한게 아니라 때에 따라서 다르다.
빈 태그<EMPTY TAG>
중첩이 안되는 태그들이 있음. 그게 바로 빈 태그
시작태그와 종료태그가 없는 태그들이 있음.(한개만 존재)
<br>
<img src ="">내용이 들어갈 수 없음. 종료태그가 없기 때문.
용도와 쓰임이 다 있음 입력하지 않는다고해서 다 용도가 없는게 아님
대부분의 태그가 내용을 갖고있고 스스로가 내용을 입력할 수 있었음.
빈태그 예시
브라우저가 화면에 직접 내용을 그려줘야하는 경우. (이름이나 동영상)
외부리소스 삽입하는 경우 이를 (대체 태그replacement)라고 한다.
화면에 실제로 출력할 내용이 없어 다른 용도로 쓰이는 경우
공백(SPACE)
<h1>Hello, HTML</h1>
<h1>Hello, HTML</h1>
<h1>
Hello,
HTML
</h1>결과 모두 Hello, HTML
동일한 결과 나옴
이유 = HTML은 두 칸 이상의 공백을 모두 무시하기 때문입니다.
두칸 이상의 개행과 공백을 모두 무시하기 때문에 같은 텍스트 결과가 화면에 나옴
주석(COMMENT TAGS)
<!-- 내용 -->HTML의 주석 삽입 방법
하이픈과 꺽쇠로 닫을 수 있음 . 꺽쇠사이가 모두 주석처리.
<!--
주석
-->이런식으로 개행해도 주석처리 가능
HTML 문서 구조(HTML DOCUMENTS)
<!DOCTYPE html> <!-- 태그는 아니고 이문서가 어떤버전으로 작성되었는지 브라우저한테 알려주는 선언문 -->
<html lang="ko"> <!-- 해당문서가 어떤 언어로 작성되었는지 한국어 -->
<head> <!-- 문서의 기본설정, js파일 연결 등 최적화 위해 적절한 제목 입력해야함 -->
<meta charset="UTF-8"> <!-- 문자의 인코딩 속성 설정 -->
<title>HTML</title> <--!문서의 탭바에 노출 -->
</head>
<body> <!-- 실제 브라우저 화면에 나타나는 내용들 -->
<h1>Hello, HTML</h1>
</body>
</html>문서타입의 정의 DTD라고 부름
문서 내 반드시 최상단에 선언
이후에는 <html>태그가 나와야하고 자식태그로는<heay>와 <body>태그가 있음
html의 lang 속성 문서가 어느 언어로 작성되었는지 의미
Reference
본 게시물은 부스트코스 비전공자를 위한 HTML/CSS 강의 수강후 작성되었음.
https://www.boostcourse.org/cs120/lecture/92868?isDesc=false
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
'HTML' 카테고리의 다른 글
| HTML: 5 테이블 요소 (0) | 2022.03.22 |
|---|---|
| HTML: 3 폼요소 (0) | 2022.03.22 |
| HTML: 2. HTML 태그들 (0) | 2022.03.21 |
