2021. 3. 28. 14:32ㆍDev/프론트엔드
오늘은 패캠 프론트엔드 개발자 강의에서 설명해준 빈태그, 글자와 상자에 대해 알아보자.
empty tag
HTML에서 '빈(empty)태그'라는 개념이 있다. 요약하자면 시작태그는 있는데, 종료태그(</>)가 없는 것을 말한다.
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./main.css">
<title>Document</title>
</head>
<body>
<div></div>
</body>
</html>위 샘플코드를 보면 열리는 태그와 닫히는 태그가 존재하는 태그들이 있다.
(ex) <html></html>, <head></head>, <body></body> ...
그런데 이와는 달리 닫히는 태그가 없는 태그들도 보인다.
(ex) <meta> <link>...
이렇게 닫힌 태그가 없는 것들을 빈태그라고 부른다. 이 빈태그를 작성하는 방법은 크게 2가지가 있다. 아래 이미지처럼
시작태그만 쓰거나 슬러쉬(/)를 붙여서 작성하는 방법이다.
HTML1~4 버전까지는 뒤에 슬러쉬를 붙이는 문법이 없었는데, HTML4와 5사이에 생긴 XHTML에서는 보다 엄격한 문법을 사용하는 것을 차용함으로 인해 빈태그에 슬러쉬를 붙이지 않으면 오류가 발생한다고 한다.
HTML5에서는 두 개의 문법을 모두 차용함으로 인해 뒤에 슬러쉬를 붙여도 돼고 안 붙여도 된다.
다만, 나중에 배우는 프레임워크나 다른 라이브러리에서는 슬러쉬가 없으면 오류가 발생할 수 있고, 좀 더 명확한 코드를 작성하기 위해서는 뒤에 슬러쉬를 붙이는 습관을 들이는 것이 좋을 것 같다.
아마 프론트엔드 개발자들은 프론트엔드 프로젝트를 진행하면서, 똑같은 빈태그인데도 어떤 프로젝트에서는 뒤에 슬러쉬가 붙어있고, 어떤 프론트엔드 프로젝트에서는 슬러쉬가 없는 빈태그들을 봤던 경험이 있을 것이다.
이게 빈태그라는 개념인 줄은 강의를 보면서 처음 알았다. 역시 기본적인 개념은 알아놓는게 중요한 것 같다.
프론트엔드 프로젝트 진행 시, 참여 개발자들에게 공통 규칙처럼 적용하여 일관성있는 코딩을 하는 것도 나쁘지 않을 것 같다.
글자와 상자
웹사이트 화면을 구성하는 요소는 크게 글자(인라인)요소와 상자(블록)요소라는 2개의 개념으로 나뉘어진다.
상자요소는 화면의 전체적 레이아웃을 잡는데 사용하고, 글자는 말 그대로 화면에 출력되는 글자를 의미한다.
1. 글자 요소 (인라인 요소)
글자 요소 중에 대표적인 span 태그로 연습해보자.
아래처럼 코드를 작성하면 'Hello World'가 수평으로 쌓인다. 글자 요소의 특징이다. 대신 코드를 줄바꿈하여 작성했기 때문에 'Hello World'가 한칸 띄어쓰기가 됐다. 만약 <span>Hello</span><span>World</span>으로 한 줄에 작성했다면, 띄어쓰기없이 'HelloWorld'로 출력됐을 것이다.
그리고 글자요소(인라인 요소)는 가로/세로 사이즈를 지정할 수 없다. 아래처럼 width, height 값을 지정해도 글자요소에는 아무런 반응이 없다.
또한 글자 요소에는 내부던 외부던 위/아래 여백은 정상적으로 적용이 안 된다.
이 부분은 프론트엔드 개발자라면 꼭 기본적으로 알아야 한다.
그리고 글자 요소 안에는 상자 요소를 넣을 수 없다. 하지만 글자 요소는 넣을 수 있다.
2. 상자 요소 (블록 요소)
상자 요소는 글자 요소와는 다르게 요소가 수직으로 쌓인다.
가로의 넓이는 요소의 크기만큼 최대한 늘어나려는 속성을 가진다.
세로의 높이는 요소의 크기만큼 최대한 줄어드려는 속성을 가진다.
상자 요소는 외부/내부 여백을 지정하면 해당 크기만큼 정상 적용된다.
상자 요소는 하위에 상자 요소 or 글자 요소 추가가 가능하다.
정리
오늘은 빈태그, 글자와 상자요소의 개념에 대해 알아보았다.
이런 부분들은 완전 기본이 되는 개념이기 때문에 아마 모르고 지나친 프론트엔드 개발자들이 많을 것이다.
이번 패캠 강의는 내가 모르고 있던 기본 개념들에 대해 알 수 있게 해줘서 좋은 것 같다.
강의를 들을수록 프론트엔드 쪽에 조금씩 개념이 잡혀 가는 것 같다.
또한 내가 개인적으로 진행해보려고 하는 프론트엔드 프로젝트에도 도움이 많이 되었다.
한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online. | 패스트캠퍼스
시간당 1천원 대 수강료 한 번 결제로 평생소장 | 프론트엔드 공부, 뭐부터 시작해야 하지? 더 이상 고민하지 마세요! 프론트엔드 개발자가 꼭 다뤄야 할 스택 20가지 이상을 100시간 분량의 온라
www.fastcampus.co.kr
※ 추천 한마디
패스트캠퍼스 프론트엔드 개발자 초격차 패키지는 완전 기초가 되는 HTML, CSS 부터 각종 프론트엔드에서 사용되는 언어 등을 이용하여 실제로 웹사이트를 만드는 프로젝트까지 포함돼 있어 강의 구성이 정말 알찬 것 같다. 따라서 프론트엔드 프로젝트에 투입되었거나 스터디를 통해 프론트엔드 프로젝트를 진행 중인 분들 중에서 기초부터 실전 프로젝트까지 해보고 싶은 분들이 들으면 좋을 것 같다.
'Dev > 프론트엔드' 카테고리의 다른 글
| 프론트엔드 개발자 프로젝트 패캠 수강 후기 - 브라우저 스타일 초기화 (0) | 2021.03.28 |
|---|---|
| 프론트엔드 개발자 프로젝트 패캠 수강 후기 - 정보를 의미하는 태그 (0) | 2021.03.20 |
| 프론트엔드 개발자 패캠 수강 후기 - HTML? (0) | 2021.03.13 |
| 프론트엔드 개발자 패캠 수강 후기 - 프론트엔트 개발자? (0) | 2021.03.06 |