HTML
HyperText Markup Language
각각의 역할과 명칭을 가지고 있는 태그를 통해 텍스트에 생명을 불어넣는 것과 같다.
<p>여기는 내용</p>
이렇게 태그를 붙이는 작업을 markup이라고 한다.
내용을 같은 이름의 태그로 감싸주며, 앞/뒤 태그를 여는 태그와 닫는 태그라고 한다.
그렇지않은 것들도 있지만 대부분의 태그는 이런 식이다.
<p>여기는 내용</p>
내용을 감싸는 태그와 내용까지를 묶어서 '요소(Element)'라고 한다.
<p class="contents">여기는 내용</p>
여는 태그에서 한 칸 띄고, 적어준 부분을 '속성(Attribute)'이라고 한다.
하나의 HTML 요소에 특정 스타일을 적용할 타겟을 특정한다고 보면 된다.
속성이름="속성값"의 형태로 구성되어 있고, 한 요소에 복수의 속성값을 줄 수도 있다.
속성을 쓸 수 없다면, 같은 스타일을 줄 요소마다 일일이 코드를 반복해야 할 것이다.
이렇게 되면 작업 시간이 늘어날 뿐만 아니라, 코드도 굉장히 길어진다.
또, 나중에 스타일을 바꾸려고 할 때도 하나하나 바꿔줘야 하기 때문에 유지보수가 어렵게 된다.
그래서 동일한 스타일을 가진다면 같은 속성값을 주고, CSS에서 하나로 묶어 한 번에 적용할 수 있다.
<!-- <p class="contents">여기는 내용</p> -->
주석은 작성 되어있는 코드를 브라우저에 뜨지 않도록 무시하는 역할을 한다.
윈도우의 경우 'Ctrl+ /' 단축키로 주석을 설정할 수 있다.
브라우저에서 html을 받아올 때, 주석을 포함한 모든 내용을 받아온다.
따라서, 주석에 개인 정보나 대외비같은 내용이 있으면 모두 노출되기 때문에 유의해야 한다.
주석은 코드 작성 의도를 명시하는 정도로만 쓰는 것이 좋다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CHEMI CODE</title>
</head>
<body>
</body>
</html>
위처럼 프로그래밍에서 반복적으로 사용되는 구성들을 Boilerplate라고 통칭하고 있다.
보통 직접 입력하기보다는 단축키를 통해 한 번에 생성할 수 있다.
내부적인 메타 데이터(설정 정보 등)를 담고 있는 <head>,
브라우저에 보여지는 내용을 나타내는 <body>를 주축으로 구성되어있다.
'TECHIT 멋쟁이사자처럼 > 온보딩 트랙' 카테고리의 다른 글
| [온보딩트랙]JavaScript 기초 (0) | 2023.12.17 |
|---|---|
| [온보딩트랙]CSS 구성(기본 구조) (0) | 2023.12.14 |
| [온보딩트랙]블록요소와 인라인 요소 (0) | 2023.12.13 |
| [온보딩트랙]HTML <head> (0) | 2023.12.13 |
